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.
Top comments (6)
This is great, I've been searching for such a project to work with/use in our projects and all the products I could find were so pricy. I'll give it a shot on the weekend.
Is it open source? I couldn't figure it out from the post or the website.
Thank you Bassel, let me know your thoughts when you try it.
Getting back to your question, initially, we made a commercial advanced pivot table called Flexmonster. Then, analyzing our experience and market needs in reporting we decided to create a free analog of that Pivot. Yes, actually it is not an open source project but you can use it freely for your commercial purposes. Hope you will.😉
Hey, I just want to say that this is amazing!!
Thank you! I really hope you will use it.
love it
Hi there!
Can i call output data from any db and export it to excell?
***Alternative link, maybe helpfull: paperjs.org/