JavaScript library for data visualization and reporting. Free dev tool. Your thoughts? 
Tags: javascript, webdev, devtips, coding
Published: 2018-12-04 13:38:02

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

published: true
description: Introducing new product - free data visualization tool for business reporting
tags: #javascript, #webdev, #devtips, #coding
---

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](https://thepracticaldev.s3.amazonaws.com/i/ynyks8aker4n2mofpadk.gif)

__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](https://www.webdatarocks.com/doc/download/), choose the most suitable for you. I’ll refer to CDN in this example)

Secondly, add WebDatarocks into your HTML file  between the &lt;body&gt; 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/](https://thepracticaldev.s3.amazonaws.com/i/pusfb0xep2mjvlr4ndgj.gif)


More detailed info is presented in the [documentation](https://www.webdatarocks.com/doc/intro/). 

To see the whole code: 
{% codepen https://codepen.io/webdatarocks/pen/NwYbVm %}

You are still there? :-) - Thanks for reading! 

So, what do you think? Any ideas or cases where you could use it?
Please share.