loading...

JavaScript library for data visualization and reporting. Free dev tool. Your thoughts?

antonina profile image AKrus Updated on ・3 min read

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.

WebDataRocks Pivot Table Tool

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!

GIF from https://tenor.com/

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.

Discussion

pic
Editor guide
Collapse
bass3l profile image
Bassel Shmali

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.

Collapse
antonina profile image
AKrus Author

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.😉

Collapse
adriansamuel profile image
Adrian-Samuel

Hey, I just want to say that this is amazing!!

Collapse
antonina profile image
AKrus Author

Thank you! I really hope you will use it.

Collapse
greenroommate profile image
Collapse
drmbios profile image
Emin

Hi there!

Can i call output data from any db and export it to excell?

***Alternative link, maybe helpfull: paperjs.org/