JavaScript library for data visualization and reporting. Free dev tool. Your thoughts?
AKrus
Posted on December 4, 2018
Hi to all the community!
Want to share with you a non-commercial project our team is working on.
We truly believe that visualization and analysis totally rock the business. Also, our team believes that the future is oriented towards web solutions. That's why we've named our product WebDataRocks :)
This tool is created by developers and for developers. Thus, we’ll really appreciate a tech community opinion.
Briefly about WebDataRocks Pivot Table
It’s a free embeddable JavaScript library to visualize data in an aggregated manner.
To be even more specific, it’s an Excel-like pivot table that allows creating dynamic reports in a browser. It works with CSV and JSON data up to 1MB.
Main value for a developer
It’s free ready-made and well-designed tool. Simply integrates with frameworks and other libraries. Customizable and localizable.
Thus, any developer can add it to any web project where data analysis is needed.
Interested? - To get you an idea of what this tool does, let me tell you a bit more about its core features.
Analysis
You have a non-aggregated data, here what you can do with it using a web reporting tool:
- Organize data with the Field List by dragging the needed members into rows and columns
- Filter data by choosing the needed members that you want to be shown in the report
- Group data via multi-level hierarchies
WebDataRocks supports 13 types of aggregations like sum, count, average, min, max, difference etc. If it’s not enough for your report, there are calculated values where you can set your own function.
Visualization
When your report has already been configured, additionally you can:
- Expand, collapse and sort values
- Drill through the cell to see non-aggregated values
- Format cells to set the needed number formatting
- Colorize cells by setting the conditional formatting and highlight the needed values
Pivot Grid looks like that.
As a bonus
Predefined themes, localization files, readymade integration wrappers - all that can facilitate developer’s work.
Plus: Reports can be saved, exported (PDF, Excel, HTML) and printed.
Let’s test it and create a report:
Firstly, download WebDataRocks (there are a few options for how to do it, choose the most suitable for you. I’ll refer to CDN in this example)
Secondly, add WebDatarocks into your HTML file between the <body> tags:
<html>
<head></head>
<body>
<div id="wdr-component"></div>
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script>
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
filename: "https://cdn.webdatarocks.com/data/data.csv"
}
}
});
</script>
</body>
</html>
The last step - load your data:
Add your URL to CSV or JSON file directly into the report. Just specify the URL to your file in the filename:
filename: "URL-to-your-CSV-or-JSON-file"
That’s all. The report is ready!
More detailed info is presented in the documentation.
To see the whole code:
You are still there? :-) - Thanks for reading!
So, what do you think? Any ideas or cases where you could use it?
Please share.
Posted on December 4, 2018
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
December 4, 2018