Back to homepage

Best 6 Charting Libraries to Build Dashboards with

Importance of analytics

Employees often spend hours trying to compose meaningful reports with inconvenient tools, creating a big drain on efficiency in the team.

To prevent this from happening, you can provide them with ready-to-use data dashboard libraries equipped with interactive features and intelligible visualizations.

As a developer, you can build such a dashboard right in your app with the help JavaScript libraries.

The advantage of this approach is that it makes development flexible – you can control all the aspects of a dashboard (both visual and functional) and customize it whenever required.

Where to start

Firstly, understand your problem and objectives. 

Since the core purpose of any dashboard library is to communicate actionable information at a glance, you need to figure out the far-reaching goals of analysis and define metrics or KPIs to measure in a specific department.

Secondly, define the dashboard’s structure. The data dashboard can consist of many elements of varying complexity: charts, tables, maps, graphs, networks, diagrams, word clouds, timelines, widgets, etc.

Key characteristics of a full-featured dashboard library are the ease of customization and displaying trends in data. 

Keeping this in mind, we’ve decided to provide you with an overview of popular JavaScript data visualization libraries which charts can be used as a dashboard’s components. We’ll also focus on “a pivot table + charts” combination and show how to build a dashboard with WebDataRocks Pivot and any of the listed charting libraries. 

But firstly, a few words about WebDataRocks. 

What is WebDataRocks

WebDataRocks

WebDataRocks is a lightweight JavaScript pivot table component that runs on any browser and integrates with any front-end and back-end technology. Its functionality is aimed primarily at creating tabular reports in a fast-paced and efficient manner.

The coolest thing is that you can integrate this component as a part of an embedded business intelligence solution.

Its core features are:

  • Aggregation functions.
  • Slicing & dicing data via the drag-and-drop.
  • Calculated values feature for tracking custom metrics.
  • Filtering based on members and values.
  • Report filters that can be applied to the entire report.
  • Highlighting cells via conditional formatting.
  • Number formatting.
  • Built-in exporting of reports to PDF, HTML, Excel.
  • The drill-through feature that helps to know which records stand behind the aggregated values.

And a lot more!

All these reporting features are at hand via the UI and make WebDataRocks Pivot so essential for data analysis. 

The pivot table has a smooth learning curve. To explore more features, please refer to our UI Guide. If you prefer the code-first approach, you are welcome to dive deeper into the API reference.

Integrations

Available tutorials on integrations will walk you through using a pivot in React, Angular, AngularJS, and jQuery projects.

Another shiny feature is that you can use a pivot control with any charting library of your choice. 

Charts

We are excited to present our top of charting libraries that you can use with WebDataRocks. ?

Highcharts

With over 8K stars on GitHub, the Highcharts library holds the leading positions among free and commercial charting solutions on the market. It’s widely used across diverse industries: from computer software and IT to higher education and financial services. It’s also favored by such top companies as Facebook, Microsoft, StackOverflow, MasterCard, and others.

You can run it either on top of jQuery or on top of its framework. 

It’s easy to get started – simply install packages via CDN, npm, Bower or locally.

Data

You can load data from a CSV file, HTML tables or Google Sheets. You can even visualize the real-time data from a server. 

Chart types

The Highcharts library provides a whole family of charts: Highstock, Highmaps, Highcharts Gantt

Among the basic charts there are gauges, area, areaspline, bar, column, error bar, box plot, funnel, heat maps, line, pie, polar range, waterfall, scatter, spline charts, treemaps, and more.

Highcharts chart example

Integration options

Supports TypeScript, React, Django integrations. 

Documentation

The documentation is divided into topics that contain logically linked tutorials. You can quickly get used to all primary concepts and move to create more sophisticated charts. 

A particular point of interest is the Use cases section. Here you can check real examples of industry-specific usage. 

Customization

There are a lot of aspects you can configure through options: 

  • Customize the design of charts by changing colors, gradients, axes, titles, predefined styles and even create your theme. 
  • Add the drill-down, zooming features, tooltips, bubble legends, scrollbars.
  • Make charts responsive. 

It’s also possible to extend Highcharts functionality by writing custom plugins.

General impression

Highcharts stand out from the rest thanks to a wide variety of responsive charts for all purposes and the ease of usage  – the code is incredibly developer-friendly. 

If you want to communicate your data effectively, this library is a perfect choice.

Dashboards with Highcharts and WebDataRocks:

Fusion Charts

FusionCharts is one of the most widely used charting libraries written in JavaScript. 

It offers three types of installation: via CDN, npm or locally.

Chart types

Once you start working with FusionCharts, a broad spectrum of charts is at your disposal: maps, columns, bar, line, area, pie, donut, stacked, bubble, scatter charts, heat maps, Gantt, Pareto, box and whisker, bullet charts, gauges, and more. 

Chart Types

All charts are categorized by purposes and accompanied by the code you can play with.

Most of the charts are available in 3D versions. There are also their real-time charts which means you can stream real-time data through charts. Another benefit is that there are a lot of charts for time-series analysis.

Integration options

It integrates easily with such front-end technologies as React, Angular, jQuery, Vue, Ember, AngularJS, and React Native. Plus, it works well with apps that are written in Java, PHP, Ruby on Rails, Django, ASP.NET.

If you want to integrate FusionCharts with Highcharts – it’s not a problem as well.

Customization options

Personalize charts by changing colors, titles, labels, add tooltips, animations, and exporting options, apply themes. Using API events, you can build custom scenarios around the component. 

You can even add a special extension to make charts more accessible to any end-user and great looking on any screen and device.

Documentation

The documentation is user-friendly – it walks you through the basics to advanced custom charts creating.  What is more, you can take a look at how to build each chart using various frameworks. 

If you want to develop your storytelling skills and learn how to communicate information, we strongly recommend delving into the Data stories section where you can find many industry-oriented demos. 

General impression

Regardless of your level of expertise, it takes a brief time to figure out how charts work and configure them. This is all thanks to a rich gallery of examples.

Dashboards with FusionCharts and WebDataRocks:

Google Developers

Google Charts is one of the most popular services for creating web-based data visualization. It’s created and maintained by Google. 

You can install it by simply including JS scripts and loaders to your web page. 

Data

The simplest way to use Google Charts is by setting JSON data in the chart’s configuration. Under the hood, it will be represented by DataTable and DataView classes.

Other options include connecting data from your database, importing data from Salesforce, Google Fusion Tables, or Google Sheets. As an advanced option, you can implement your data source protocol to fill the charts with data from custom data sources. 

Also, you can embed charts right in spreadsheets.

Chart types

It offers pre-built visualizations that serve for diverse purposes: bar, column, combo, area line, geo, pie, donut, bubble, scatter charts, histograms, gauges, timelines, candlestick charts, word trees, and a lot more. 

Google developers chart examples

Integration options

There are no official integration guides with frameworks but you can find wrappers for Angular, React, Vue, and TypeScript definitions contributed by passionate developers. 

Customization
You can customize the look and feel of every chart effortlessly by setting their options in the chart’s draw() method.
Change axes, formatters, lines, crosshairs, points, overlays, tooltips, animations, add toolbars – it’s all possible. 

If you want to run certain scenarios upon the user’s actions or describe complex interactions between charts and widgets placed on the same web page, you can do it with events.

Chosen charts are available in material design which makes charts look modern in any app.  

logo

Do you want to be the first to test the grid with your data?

Download

Documentation
The library’s functionality is well-documented and exemplary. The structure of the documentation is intuitive and consists of many tutorials. It guides you through all the important aspects of visualizing data: from installing the library to creating advanced web dashboards.

General impression
Charts are easy-to-use for both beginners and skilled developers. 

Check out how to create a dashboard with WebDataRocks Pivot and Google Charts:

AmCharts

AmCharts is a charting library that can brighten up any project with truly eye-catching visualizations. Among customers, there are Amazon, eBay, Microsoft, CISCO, Apple, PayPal and a lot of other outstanding companies. 
The library runs on any platform and browser and can be used with mobile platforms. 
You can include it via CDN, npm or install it right on your server. Note your browser must support SVG technology (which is true for all modern browsers).
To make it work perfectly on mobile devices, you can activate touch-specific UX features.

Chart types

A collection of charts contains pie, line, column, pyramid, polar, dumbbell, bubble, stacked column, Gantt charts, histograms and many more. It also comes with plenty of charts for visualizing time-series data. You can also visualize geographical data with maps. 

Amchart chart example

With minimum lines of code and using an object-based approach, you can build any chart. 

Integration options
You can use it with vanilla JavaScript, React, Angular2+ projects. It also integrates with Ember, RequireJS, Cordova / PhoneGap, webpack. You can use it as a plugin for WordPress.
The latest version is written in TypeScript, therefore, there are no problems in integrating with this language.

Customization

You can tailor colors, gradients, patterns, themes, zoom and localize charts. Besides, it’s possible to enable responsive settings of charts to make them look accurate on any device’s screen. The adapters can be used to override the default functionality.
Also, charts support right-to-left (RTL) languages such as Arabic, Aramaic, Hebrew, Farsi, and others. 
To complement the existing functionality with new features, you can load extra plugins (e.g., Regression trend lines, Slice Grouper)

Documentation

We’d like to note that the product is well-documented and the documentation is nicely organized by logical sections. What is more, each demo contains the source code that helps to understand how to use charts with frameworks. You can simply copy-paste and create a chart. 

General impression

All in all, this library is definitely worth your attention. Feel free to use it in your data visualization projects.

Check out how to create a dashboard with amCharts and WebDataRocks Pivot:

AnyChart

AnyChart is a JavaScript library that provides a collection of beautiful charts that run on any device and browser, including IE 6 and can be integrated with any app.

A lot of companies, startups, governmental and educational organizations all around the world choose AnyChart. Among the largest ones, there are Microsoft, Ford, Samsung, At&T, Nokia, Bosch, Oracle, McDonald’s, Citi, and others. 

Chart types

There is a family of products that serve different purposes. You can use AnyStock to visualize financial data, AnyMap to display data in maps, AnyGantt to track performance inside the organization. 

Other kinds of charts and maps you can try are area, bar, bar mekko, box, pie, Pareto, line, error, bubble, cherry, bullet, column charts, gauges, maps, candlestick and bullet charts, and many more. All of them are noteworthy. 

AnyChart Chart example

Besides, the list of charts is constantly updated. 

Integration options

Works well with scripting languages (PHP, ASP, ColdFusion, Perl).

Integrations with Elasticsearch and Backbone are planned. 

Customization

You can customize everything manually or by using scripts. 

Documentation

The documentation allows walking through all general concepts of using charts effortlessly.  It’s divided into sections: the General User’s Guide is a great place to start with, the API Reference with all properties and methods, the Playground – a sandbox for running charts, and Chartopedia for discovering all kinds of charts.

General impression

This lightweight charting library offers brisk visualizations that deserve to be a part of your data visualization project.

Dashboards with WebDataRocks and AnyChart:

Chart.js

ChartJS is a free and open-source JavaScript charting library.

Getting started is easy: you can install it via CDN, Bower, jsDelivr, or npm and create your first chart.

Data

To fill the chart with information, you should make sure that your data fits the structure required for a certain type of visualization. In most cases, it’s an array of numbers or objects.

Chart types

There are eight kinds of charts you can add to your project: bar, line, pie, radar, area, bubble, scatter and a polar area. 

Chart.js example

All charts are rendered in canvas elements that are supported in all modern browsers.

Customization

You can configure fonts, colors, texts, tooltips, scales, chart’s size, gradients, as well as add scriptable properties and transitions.

What is especially cool is the ability to configure animations. There are a lot of easing functions that modify the motion of charts.

Also, try using plugins – they represent an extra way to change the charts.

Integration options

You can use ChartJS with plain JS and various bundlers. There are also React, Meteor, Vue, Ember, Angular wrappers available.

We recommend trying extensions for ChartJS that extend the capabilities of the original charting library. The extensions are contributed by developers – you can support this trend and suggest your ideas of making charts better.

Documentation

The most important information is at your fingertips in the documentation which is short yet comprehensive.

General impression

ChartJS is lightweight and simple. The visualizations it has to offer are enough for basic data exploration. But if you need more diverse charts (e.g., for statistical analysis or visualizing geospatial data), it’s better to stick to other solutions presented on this article’s list.

See how to create a data dashboard with WebDataRocks Pivot and ChartJS:

Putting it all together

In this blog post, we’ve covered top JavaScript data visualization libraries and showed how these can be combined. We encourage you to take some time exploring the data in interactive dashboards. Hopefully, these will help to improve your data analysis and bring value to your business. 

Extra: pivot table personalization

We believe customizing should be easy. Hence, we’ve prepared plenty of tutorials to make your pivot table component look and work uniquely: 

How to become a better developer

Searching for ways to improve your programming skills? Try GitConnected – here you can find a rich collection of the most up-to-date coding tutorials.

Microsoft Excel is spreadsheet software that has been a standard on the market of reporting tools for many years. It’s designed to assist you in summarizing and analyzing data or keeping it in tabular format. Excel is also loved for its diversity of mathematical formulas for every situation. They come in handy when you need to solve a complex mathematical problem. 

Excel is one of the most widely used reporting software in the business world. A lot of small and large companies use it for different data analysis purposes. 

But before investing in licensed software, you can try other solutions that offer more flexibility and allow visualizing data right in your app.

Today we’ll research on the features of two tools for reporting – WebDataRocks and Excel and compare the ways they provide reporting experience. 

We hope this article will help you to pick what is right for you. 

Overview of features: Excel

Interface & learning curve

Excel strikes with the available functionality related to data visualization. But once you are taken to its workspace, it’s easy to get lost among the variety of tabs and bars. Figuring out the purposes of each one may be overwhelming for a newcomer. It often takes a lot of time before you learn how to navigate swiftly and efficiently. In general, the learning curve for adapting to Excel can be described as steep. You need to invest a lot of time to learn how to do reporting rather than extracting value from the data. 

Scalability & performance

Performance is always a key consideration in any data analysis and reporting process.

Excel ensures fast data access and processing because of the way it manipulates memory. When you are working with spreadsheets, an entire file is loaded into RAM. On the one hand, this approach speeds up data access. On the other hand, the whole document has to be reloaded into RAM again once you make any small change to your current workbook. 

Thus, working with spreadsheets that contain large amounts of data (~ 200k records) can be rather slow and not efficient. 

Customizability

If you are willing to change some parts of the interface, you can personalize the Ribbon, Quick Access Toolbar, change the language, etc. In this sense, Excel is customizable enough. 

Integrations

Excel works with almost every other product of Office 365. You can add spreadsheets to presentations or text reports. 

But to move data between Excel and any third-party app, you need to use external services since there are no off-the-shelf integration options available. 

Working online

Not only can you use Excel as a desktop app but also in the web browser. Pay attention to the fact that there are certain variations in the functionality of both versions. However, it’s not possible to embed Excel into a web application. 

Teamwork

Shared workbooks had many limitations previously but now you can use Excel for collaborative work with the help of the `Co-authoring` feature. Provided that you have a cloud-based version of Excel (as part of an Office 365 subscription), your colleagues can have remote access to your spreadsheets and see updates nearly in real-time. Without this subscription, another way to send a report is via an e-mail or a portable storage media which leads to duplicating information and is a neither secure nor convenient way to share the data. 

Excel as a data storage

Many companies use Excel as a database. Despite certain similarities between spreadsheets and databases, Excel lacks the capabilities of a database management system. Spreadsheets can’t meet the requirements on data integrity, consistency, security, ease of updating and retrieval of data. Moreover, as mentioned before, multiple users can’t access and update such a kind of database at the same time if they don’t have ‘Co-authoring’ feature enabled. 

Considering all, it’s more convenient and reliable to keep your data in relational databases rather than store it in spreadsheets.

What about Pivot Tables?

Excel is primarily known for its pivot tables – the most indispensable tool when it comes to summarizing the data and getting insights from it.

But be aware that adding pivot tables may affect the performance – they double increase the workbook’s size because of the large caches they require. 

Cost

Excel is not expensive for companies but can be costly for individual users. 

Conclusion

Many people use Excel because it’s comfortable and they get used to it. 

But why not break out of your comfort zone and move towards web-based solutions? Especially if you have exhausted the possibilities of Excel’s pivot tables. 

It’s worth to note that using web pivot table components instead of Excel pivot tables implies going to a programmatic approach. The advantage of such an approach is that you can embed the component into any app, fully control the access to it and tailor pretty much every aspect of your reporting experience. 


And this is where WebDataRocks comes into play.

WebDataRocks

WebDataRocks is a client-side pivot table component designed to provide data analysts with summarized data in the form of a tabular report. You can easily embed this tool in your web application and empower your end-users with reporting.

Let’s see what it has to offer. 

Interface & learning curve

To make your learning curve less steep, we developed a highly intuitive interface that enables you to concentrate solely on the reporting purposes without being distracted by redundant functionality. All vital features are at hand, most of them are accessible via the Toolbar

Customizability

You can customize WebDataRocks according to the style of a particular application, add or remove tabs to/from the Toolbar, and leave only the features which you need. You can easily switch between different layouts, apply predefined themes, add icons to the cells, and change everything through the UI or in code to make the component look natively in your app. 

Additionally, you can bring to life your ideas about design and create a custom report theme

Flexibility

The previously mentioned customization options are what make WebDataRocks a flexible reporting tool that ideally suits Agile practices. In particular, it adapts to such Agile principles as continual improvement and flexible response to changes. 

Integrations

As a developer, you can experience the freedom of integration with popular frameworks such as React, Angular, AngularJS, Vue, and more. 

To facilitate the integration process, you can make use of the available tutorials: 

Besides, you can follow an API-first approach with a lot of API calls that make interacting with the tool easier and allow building your scenarios around the component. 

Responsiveness

Works perfectly on all browsers and mobile platforms. Looks natively in any app. 

Charts

In Excel, you are limited to use default charts and apply a set of defined styles to them. Of course, you can install some add-ons of 3rd-party charting libraries but it takes time to figure out how to use them in Excel’s workspace.

Here is how we solved this problem in WebDataRocks – you can integrate the pivot table component with any charting library you like. All you need to do is to pivot your data and pass it to any kind of chart. To make things easier, we prepared a series of tutorials on integration with the most popular charting libraries. If your favorite library is not on the list, you can make use of webdatarocks.getData() method to preprocess the data accordingly to the format the chart requires.

Ease of use and configuration

With little or no IT help, you can set up a powerful data visualization tool in no time. The Quick start guide will walk you through the basics of working with the component. 

Teamwork

We know how teamwork matters: it provides the company with a diversity of thoughts and perspectives. After installing your instance of a pivot table tool, you can give role-based online access to analytics inside the application. Moreover, you can customize it to make a read-only mode of the pivot table

Saving reports

We protect you from losing your working results. 

Save the report in a JSON file and restore it anytime. 

Sharing results

The exporting of reports is meant to be as fast as possible – WebDataRocks comes with exporting functionality bundled in which means there is no need to install custom plugins for exporting to PDF, HTML, and, of course, Excel. You can even send your report for printing. If you need to send the report to a server, it’s not a problem at all as well. To make that possible, you can customize exporting configurations with a few lines of code.

Data size

You can load up to the 1MB of data.

Cost

Free.

You can get WebDataRocks at no cost and save your money for other business investments. 

Integration with Excel

To help you make the best of both Excel and WebDataRocks, we made a transition from Excel to WebDataRocks as smooth and simple as possible. 

You can load your CSV data into the pivot table component and start pivoting your data in a new web-based interface. 

Besides, if you feel you miss the spreadsheets and want to see the raw data, you can always switch to the flat mode and view non-aggregated data in a row-by-row manner.

Putting it all together

Today we reviewed the capabilities of a desktop reporting software (Excel) and a web-based pivot component (WebDataRocks). While the former is a great example of a standalone application, the latter can be successfully used as an integrated component of a larger Business Intelligence platform.  

The choice is yours. 

Live demos

How to become a better developer

Searching for ways to improve your programming skills? Try GitConnected – here you can find a rich collection of the most up-to-date coding tutorials.

Collecting high-quality data is a fundamental prerequisite for starting any data analysis or machine learning project.

However, you may notice that looking for a really thought-provoking dataset can be a burdensome process and usually entails spending a lot of time. So as to save your precious time for deriving insights from the data, WebDataRocks team prepared a carefully selected list of free repositories with real-world data, ready to boost your project. 

Let’s start exploring them!

Contents:

Socrata OpenData

One of the largest and most powerful search engines, which hosts thousands of datasets on the topic of finance, infrastructure, transportation, environment, economy, and public safety. What is more, all the datasets are categorized by use of machine learning algorithms, which makes this platform even more intriguing. 

Try digging deeper to find here the most challenging datasets for your work. 

Developers may find useful the fact that Socrata OpenData exposes the Discovery API which presents a mighty way for getting access to all the public data from the platform. Another great feature for developers is the fact that API calls return nested JSON objects which are easy to understand and parse.

On top of that, there are a lot of examples of data visualization and short tutorials which allow you to explore data interactively with charts. Here you can also find wrappers for accessing features of Socrata OpenData from various server-side languages. 

If you want to become a contributor, read the Publisher guide to know how to upload your data. 

Kaggle

Literally, Kaggle is the greatest data science platform and community which impresses with a diversity of datasets, competitions, examples of data science projects. Apart from educational purposes, it gives a chance to win financial rewards in competitions, hosted by the leading companies which yearn for understanding their data better. 

But competitions are more about journeys to the data science realm rather than winning the first places. You should definitely bring all the available opportunities into play to master the skills required for your career as a data scientist. 

It should be noted that this resource contains mainly cleaned data, especially if it’s a part of a competition’s kernel. Datasets can be searched by different tags. 

To experience a competitive and challenging environment and test your strengths, you can try participating in the following open competitions:

Or build visualizations and ML models around these datasets:

FiveThirtyEight

Keen on data-driven articles and graphics created by writers of FiveThirtyEight blog? Have a peek into the data that is at the heart of visualizations. You can download the data from this online collection of data or the GitHub repository. Also, you can navigate right up to the journalistic article where it was used. 

Most of the visualizations that you can find here are interactive. And we encourage you to create your own variant of the analysis and visualization. 

UCI Machine Learning Repository

A comprehensive platform that hosts datasets for machine learning tasks for many years. This is a classic place to start your machine learning path which is supported by the National Science Foundation. Every dataset is well-described – you can check its default task, attribute types, data types, and other features. Many of the datasets are quite small but still great for educational projects.

ProPublica 

This American nonprofit organization is recognized for noteworthy investigative journalism. But it’s also known for offering a versatile data repository that covers health, criminal justice, education, politics, business, transportation, and finance topics. Besides, it’s frequently updated. 

The collection contains both paid and free datasets. Paid datasets, in turn, are available under academic, commercial, students and journalist licenses.

ProPublica also cares for the ways to access data by exposing five APIs which simplify retrieving data.

Yelp

Have been waiting for the opportunity to create your project but didn’t know how to start?

Then you can’t miss a perfect chance to improve your research and analysis skills on Yelp – one more platform that provides ready-to-use data and encourages both newcomers and skilled data scientists to solve problems.

Not only can you participate in the challenges but also win cash prizes.

After downloading and playing with the data, as the next step, you can submit your project by filling the application form. It can be presented in any format – a paper, video presentation, website, blog, etc – anything that confirms your using of the data. 

Do not pass by this place – it’s not only for students. Feel free to participate in challenges and discover your hidden talents.

InsideAirbnb

A data service created and maintained by Airbnb company. It hosts a unique collection of the Airbnb’s data which is categorized by regions and countries. You can browse data for your particular city and explore insightful reports with creative visualizations. But we recommend getting the data and exploring it deeper with your favorite tools. 

data.world

Being an open community for developers, data.world is a real treasure for everyone who is passionate about data analysis. More than 450 datasets for all tastes and purposes are freely available in the collection. Most of them are close to the modern world and, henceforth, require cleaning. Since cleaning data is an important stage of any data science project, here you are given an opportunity to practice these skills.

Datasets cover finance, crime, economy, education, census, education, environment, energy, sports, NASA, and a lot more topics.

Besides, you can even contribute your own data.

Signing up is a piece of cake – just use your GitHub account to register and get access to all the datasets.

Working with data is easy as well – you can write SQL queries through the site interface, use SDKs for Python or R or simply download the data file.  

Data Hub: Collections

A rich data catalog containing datasets on various topics: economic, climate, education, logistics, healthcare, and more. On the dataset’s page, there are embedded visualizations built with Plotly, which give you a quick overview of data trends.

If you can’t find data you are looking for, you can even make a free request for it.

You will be impressed by a variety of means to integrate the dataset into the tool you are using. There are code snippets that show how to use data with R, Pandas, Python, JavaScript, cURL, and data-cli. Also, you can simply download CSV or JSON datasets. 

Quandl

It positions itself as a not to be missed platform with financial and economic data that help power data-driven strategies. Here you can find free and pre-paid datasets. For data retrieval, Quandl provides a free-to-use API which acts as a single interface. Also, you can access data from Python, R, Ruby with the help of modules and packages. The Add-In for Excel is available as well. 

NASA datasets

Enthusiastic about space-related projects?

Then this repository is a real find for you. It contains Astrophysics, Heliophysics, Solar System Exploration data, and Image Resources.

Wikipedia

Surprised to see Wikipedia on the list? Yes, you can use it not only for educational purposes. Wikipedia also offers ways of downloading and querying data. You can read more about them in this guide

The World Bank

A huge repository which provides free access to global development data. You can search datasets by countries, regions and economic or demographic indicators. 

With the help of online data visualization tools, you can explore data interactively using charts, tables, maps, build reports in no time, style them, share and embed. Datasets are available as CSV, XML and Excel files. 

Data.gov

A repository of public datasets from US government agencies. The datasets related to climate, consumers, education, ecosystems, energy, finance, manufacturing, science are at your fingertips. 

Datasets are available for public use but sometimes you have to agree to license agreements before downloading and using data.

Another great thing is that you can submit data stories to share with the world your ways of using data. There are also a lot of challenges you can participate in. 

Pew Research Center

Pew Research Center is known for publishing survey reports and various kinds of analysis. Its researchers make datasets that lie at the core of reports available to the public. Many of datasets are provided as .sav files, therefore, you should know how to use SPSS or R. With them you can discover religious, political, social, journalistic and media trends.

Google Dataset Search

Dataset Search is a powerful search engine that exposes a convenient interface through which you can access millions of datasets from around the world. This relatively new product launched by Google has been already favored by scientists, data journalists, and students who need to find scientific, social, environmental, or government data. A huge plus is that the volumes of the data are growing fast. 

After querying data, you’ll see the list of repositories, including academic ones, from which you can download it. 

If you want to publish your data, follow these quality and technical guidelines which help understand how to describe uploaded datasets. 

In general, Google Dataset Search copes well with the goal of making data more accessible to everyone. 

But what if you want to practice analyzing big data

Google Public Datasets

Visit the Cloud Public Datasets Program catalog to find large and amazing datasets. All of them are stored in BigQuery and can be accessed through the Cloud Public Datasets Program. Though you need to pay for the queries that you perform on the data, you can make use of the first 1 TB of free queries. 

AWS Public Datasets

You can search datasets from the Amazon Web Services platform through the Registry of Open Data. Datasets are available in the public domain. Here you can also find a lot of fascinating usage cases which may inspire you for starting new scientific or enterprise projects. They cover details on using data by organizations, implementing recommended systems, predicting stock prices, etc. 

Besides, you can make your personal contribution by sharing data on AWS. 

To start working with data, simply download it or get access from the cloud with the help of EC2 or Hadoop. 

Academic Torrents

A distributed system that contains more than 45 TB of data for research. Pay attention to license terms – most datasets are allowed to be used for non-commercial and educational purposes.

Here is the list of some popular datasets:

Final words

You are more than welcome to explore the above-mentioned collections of data. To get an even more complete list of amazing datasets, we recommend referring to this GitHub page

We do hope you’ll find your perfect dataset for conducting data-driven researches and satisfying your intellectual curiosity about trends in certain areas of our diverse life.

Good luck with your data analysis and machine learning projects!

Tools for data visualization

To extract the value from your data, you can try visualizing it with WebDataRocks Pivot Table and a charting library of your choice. Here are the tutorials which will help you get started:

To advance your programming and analytical skills, we recommend searching for courses and tutorials on GitConnected

In WebDataRocks, we care about your reporting experience and make every effort to deliver value to you on a daily basis.

In the light of the new release, we are delighted to introduce to you new awesome aggregation functions and report themes enhancements.

New aggregations

Starting from version 1.1.0, you can calculate the following measures right in the pivot table component:

  • Running totals
  • Median
  • Sample standard deviation
  • Population standard deviation

Let’s figure out why these aggregations may become handy for your reporting and data analysis.

As well as average, the median is extremely important in the statistical analysis since it represents the middle of a dataset. Unlike the mean (average), it’s less affected by outliers and skewed data.

The standard deviation is another important statistic (parameter) that helps to measure the spread of data distribution.

We implemented two versions of this aggregation – population and sample standard deviations

One more aggregation you can benefit from is the running total aka cumulative sum. It’s simply a total which is changed every time a new value is added to the list of numbers. A nice thing about the running total is that you can check the total at any moment without having to sum the whole sequence every time.

Styles enhancement

The appearance of the reporting tool is no less important than its functionality. 

Therefore, we made minor improvements to lightblue and teal report themes and fixed issues with colors so as to make your pivot table stand out from the rest.

You can try all the themes in our demo

Test new features now

Explore our demos to try new aggregations ?

Or install a new version of your favorite reporting tool via npm

Thank you for entrusting your data analysis and reporting to WebDataRocks. We do our best to help you turn your raw data into rich and comprehensible reports. 

There is much more to come. 

Stay tuned to new updates!

Meet us on social media

Follow us on Twitter to keep track of the latest developments and tips & tricks on data visualization.

Subscribe to our CodePen profile to be the first to know about new mind-blowing demos.

To help your audience get insights from your report, the best practice is to place accents on the most important chunks of information in it. Highlighting data makes your report more efficient and easier to perceive.

Today we’ll show how to highlight trends in your data by substituting individual values with custom icons.

Our reporting goal is to identify successful and unsuccessful months in terms of revenue.

To see the results right away, you can scroll down to the CodePen demo at the end of the tutorial.

Let’s head over to practice!

Initialize Pivot Table

Following the steps from the Quick start guide, embed a pivot table component on the web page.

Now it’s time to fill the pivot table with the data.

Connect to your data source (CSV or JSON) by specifying a URL to the data file or defining a function which returns the data.

Here is how you can define the data provider:

function getData() {
    return [{
            "Country": "Spain",
            "Revenue": 33297,
            "Date": "2018-02-21T08:05:23.683Z"
        },
        {
            "Country": "France",
            "Revenue": 232333,
            "Date": "2018-02-21T08:05:23.683Z"
        },
        {
            "Country": "France",
            "Revenue": 66233,
            "Date": "2018-03-21T08:05:23.683Z"
        },
        {
            "Country": "Spain",
            "Revenue": 27356,
            "Date": "2018-03-02T18:57:56.640Z"
        }
    ]
}

Now tell the pivot table where to get the data by specifying the function in the dataSource attribute of report:

dataSource: {
    data: getData()
}

Specify a slice

Define which hierarchies you need to see on the grid. Put them to the rows and the columns. Choose fields for the measures and apply aggregation to them.

In our sample, we’ll put “Date.Month” to the rows, “Country” to the columns and “Revenue” to the measures.

"slice": {
    "rows": [{
        "uniqueName": "Date.Month"
    }],
    "columns": [{
            "uniqueName": "Measures"
        },
        {
            "uniqueName": "Country"
        }
    ],
    "measures": [{
        "uniqueName": "Revenue",
        "aggregation": "sum"
    }]
}

Also, you can apply filters now or later via the UI.

Customize cells based on a condition

Now that your report is ready, it’s time to emphasize the numbers that speak most.

Our main helper will be customizeCell. With this powerful API call, you can easily change the style and content of any cell on the grid.

Here is how you can define customizeCellFunction:

function customizeCellFunction(cell, data) {
    if (data.type == "value" && !data.isDrillThrough && data.isGrandTotalColumn) {
        if (data.value < 200000) {
            cell.text = "<img src='https://static.webdatarocks.com/uploads/2019/02/21213347/icons8-decline-64-1.png' class='centered'>";
        } else if (data.value >= 200000) {
            cell.text = "<img src='https://static.webdatarocks.com/uploads/2019/02/21213348/icons8-account-64.png' class='centered'>";
        }
    }
}

What does customizeCellFunction do? This piece of code iterates over each cell and replaces the content of grand totals with an appropriate icon depending on its value. In a similar way, you can customize any CSS styles of the cells.

To make the icon fit the cell, apply the following CSS styles for the image:

img.centered {
    margin: auto !important;
    padding-bottom: 10px;
    color: transparent !important;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    font-size: 12px;
    position: relative;
    bottom: 4px;
    left: 6px;
}

Here is how your pivot table looks now:

Share the results

Now you can export your report to HTML and send it to your teammates!

Live demo

Play with the code on CodePen?

If you want to customize your pivot table more, we suggest reading the following articles:

Attribution

The icons used in this tutorial are designed by Freepik from www.flaticon.com.


JSON stands for JavaScript Object Notation. It’s a syntax that allows storing information in a self-explanatory and readable manner. Any JSON data can be converted into JavaScript objects. And vice versa: you can convert a JavaScript object into JSON before sending it to a server. This is what makes it so powerful and irreplaceable for fast server-to-browser communication.

Why JSON

It’s favored by developers for its comprehensible structure. A JSON object contains key-value pairs which are called properties. The properties are separated by commas. You can access any property by referring to its name. Each object is surrounded by curly braces.

JSON for reporting

To work with WebDataRocks, you need to pass an array of JSON objects to the reporting tool.

But before loading your JSON data into the pivot table, you should make sure it’s valid.

To prevent any issues with your data, we recommend using JSON validators – special online web services that allow you to load your JSON and check whether it contains any errors. Therefore, we’ve carefully prepared for you an overview of the best JSON validators.

Instead of scrolling hundreds or thousands of lines of code so as find an error, use them. Not only they save a great amount of your time but also format your dataset accurately.

JSONLint

JSONLint is one of the most popular free validators and formatters for JSON data. It’s incredibly simple to use.

To validate your data, follow these steps:

  1. Paste the JSON data or a link to it into the input field.
  2. Click “Validate JSON”.
  3. Read a message – it tells whether there is a problem with your JSON and if so, it specifies the line where the error occurred.
  4. After correcting the errors, copy the formatted JSON data.

Now your data is ready to be loaded into a pivot grid.

JSON formatter

This free and powerful tool helps you validate, beautify and minify your JSON data. Along with validating functionality, it comes with extra features: you can set indentation levels, print the formatted data, convert it to CSV, YAML or XML formats and download the data into a file. Also, it’s a great option if you have nested JSON objects as it enables you to see the tree view of your data. We tested this validator on browser compatibility – everything works as expected in Chrome, Safari, Edge and Firefox browsers.

How to validate your data:

  1. Load the data by entering the URL of the file, pasting the data into the input field or browsing the file from your local storage.
  2. Click “Validate”.
  3. Choose tabs indentation, format your data and copy the resulting dataset or simply download it.
Summary

Preparing your data is the most important step on the way to successful data analysis. We hope these tools will make working with your data a trouble-free process.

When you use static reports to make up a baseline for your data analysis you should always keep in mind that they show only the static view of your data. To take a look at it in real time, the majority of data analysts opt for dashboards. The reason for that is because they provide more opportunities for exploring the data interactively, meaning you can always go deeper into the details or get the big picture.

Challenges

As a developer, one day you may receive a task to configure a dashboard and embed it into the business application. After you’ve found suitable tools, a lot of heavy-lifting may be involved in the integration process: compatibility with the software stack, customization challenges, overall performance, and, of course, budget limitations.

Also, since dashboards are powered by data which often comes from multiple sources, end-users should be able to connect it to the dashboard, switch between data sources and present the data in a consumable form as a result. The whole process needs to be completely time-saving.

What is the solution?

That’s where free JavaScript libraries come to the rescue.

WebDataRocks is a reporting tool that allows aggregating, filtering and sorting the data.

Google Charts is a data visualization library that provides with a wide range of charts and graphs.

With their help, you can build a low-cost yet effective solution for any analytical project with any front-end technology including Angular, AngularJS, jQuery and React. Both tools are lightweight and extremely customizable.

Today we will focus on creating a fully personalized dashboard for monitoring sales metrics. If you are eager to get hands-on experience, scroll down to the section with useful links and run the demo. It will be enriched with the dynamic report and responsive charts. We truly hope this tutorial will help you get a better understanding of how to combine the analytical features of a pivot table and the expressive power of charts.

Ready?

Let’s start!

Step 1: Define your problem & objectives

What is a data analysis without a purpose? Setting your goals from the very beginning is a milestone on the road to successful analysis. It’s better to have a clear idea in mind of what your end-users need to achieve in the long run.

For an illustrative example, let’s analyze the data of a fictional supply chain to understand its sales performance on a monthly basis as well as customer demographics.

Step 2: Add a reporting tool

A pivot table is an engine of a dashboard as it takes all your raw data and transforms into the summarized form.

Firstly, establish all the dependencies of WebDataRocks and include its styles into the <head> of your web page:

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

Secondly, create a container which will hold a pivot table:

<div id="wdr-component"></div>

Thirdly, add the component to your web page:

var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true
});

Step 3: Prepare and load your data

Pull the CSV or JSON data from your database, CRM or any other data source.

You have three equivalent options of loading it into the pivot table:

  • By specifying a URL to your data file:
"dataSource": {
    "dataSourceType": "json",
    "filename": "URL-to-your-data"
}
  • By connecting to a data source via the UI:
  • By defining a function which returns the JSON data.
"dataSource": {
    "data": getJSONData()
}

Step 4: Create a report and aggregate the data

Firstly, set up a slice it’s the most important part of the report where you specify which hierarchies to place into the rows and columns, apply various filtering and pick aggregation functions for your measures.  

To extend the measuring capabilities, calculated values are at your disposal:

  • Put the ‘Location’ hierarchy into the rows and ‘Product Group’ into the columns.
  • Place the ‘Product’ hierarchy under ‘Product Group’ so as to be able to expand the latter to get more details.
  • Create the ‘Sales’ calculated value and put it to the measures. It will help you track the revenue of our organization.

Please refer to the source code at the end of the article to learn how to set a slice.

Step 5: Connect to the charting library

Now that you aggregated data and displayed it on the grid, connect to the Google Charts library by including its Visualization API loader into the <head> of your web page:

<script src="https://www.gstatic.com/charts/loader.js"></script>

After that, load the package for particular types of charts (either in the <head> or <body> section):

google.charts.load('current', {
   'packages': ['corechart']
});

Also, you need to add the WebDataRocks connector for Google Charts that handles all the data pre-processing for the specific types of charts:

<script src="https://cdn.webdatarocks.com/latest/webdatarocks.googlecharts.js"></script>

Lastly, add containers for the charts:

<div id="combo-chart-container"></div>
<div id="pie-chart-container"></div>
<div id="bar-chart-container"></div>

Step 6: Bind the charts to the pivot table

To make the charts show the data from the table, you need to attach an event handler to the pivot table for the reportcomplete event.

reportcomplete: function() {
    pivot.off("reportcomplete");
    pivotTableReportComplete = true;
    createComboChart();
    createPieChart();
    createBarChart();
}

To track the pivot’s and Google Charts readiness, add two flag variables:

var pivotTableReportComplete = false;
var googleChartsLoaded = false;

Also, set the onGoogleChartsLoaded() function as a callback to run after the “corechart” package is successfully loaded:

google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(onGoogleChartsLoaded);

onGoogleChartsLoaded() is responsible for getting the data from the pivot and starting the functions that instantiate our charts:

function onGoogleChartsLoaded() {
    googleChartsLoaded = true;
    if (pivotTableReportComplete) {
        createComboChart();
        createPieChart();
        createBarChart();
    }
}

function createComboChart() {
    if (googleChartsLoaded) {
        pivot.googlecharts.getData({
            type: "column"
        }, drawComboChart, drawComboChart);
    }
}

function drawComboChart(_data) {
    var data = google.visualization.arrayToDataTable(_data.data);
    var options = {
        title: _data.options.title,
        height: 300,
        legend: {
            position: 'top'
        }
    };
    var chart = new google.visualization.ComboChart(document.getElementById('combo-chart-container'));
    chart.draw(data, options);
}

Similarly, you need to define the functions for a pie and a bar chart.

In the definition of each function, specify the chart types as the input arguments for the googlecharts.getData() method which takes upon itself the pre-processing of the data for this chart. You can also pass the slice of the data that differs from the current grid’s report.

As the second and the third arguments, pass the functions that act as a callback and update handlers, meaning they are called once the data is loaded into the pivot table or updated. This way we make the chart react to the tiniest changes in our report.

Also, don’t forget to set the charts options to make them look awesome.

Step 7: Apply extra options

Let’s make our dashboard even more expressive and customize the grid cells based on the values.

With the customizeCell function, we’ll redefine the style and content of the cells with totals.

Now we can clearly observe the trends in our sales data, can’t we?

Step 8: Enjoy the result

Summarizing all the steps, today you’ve learned in practice how to build a sales dashboard with minimum code, maximum flexibility, and effectiveness. Now you can share it with your team and help them reveal deeper insights from the data.

See a complete code in the live demo.

You can always tune the report and get the new view of your data in real-time – simply drag and drop the hierarchies to switch them, expand or collapse their members and drill through the records to see the raw data and reveal more insights. Feel free to add the report filters to focus on the months in which you are interested the most.


 

It is well known that digital marketing is an irreplaceable way to connect and communicate online with potential customers of your business with the help of different channels, both free and paid. Its set of tactics comprises diverse tools such as search engine marketing, email marketing, posting content to social media, remarketing, which help stay engaged with prospects and much more. When combined together, they are called integrated marketing methods and help achieve the most sophisticated goals.

According to Gartner’s Digital Marketing Spend report, marketers invest 25% of marketing expense budget in digital marketing methods as they remain the most effective tactics to convert traffic into leads, subscribers, and sales.

To make the investments profitable, the first and foremost rule for a marketer is to plan the campaign thoroughly and analyze results afterward. Only thus can the efforts be rewarding.

Where to get the data?

Data is the heart of any analysis. And marketing analysis is no exception.

There are plenty of ways of storing marketing data and pulling it out – from databases to analytical platforms. Not all of them are suitable for reporting and data analysis, though. By blending the data from various sources, you can collect a versatile dataset to work with.

For you, as a marketer, keeping the analytics in one place is vital. Having finished your campaign and collected enough data, it’s the best time to put your raw data to work. That’s exactly where a pivot table may stand you in good stead.

Pivot Table Magic for Marketing Analysis

Recently we’ve sorted out the structure and purpose of the pivot table as a powerful tool for web reporting. Now it is the best time to find out how it may come in handy for shaping your marketing strategy.

Today we’ll analyze and measure paid marketing campaigns: track their results and evaluate the performance so as to maximize the return on the investment of time and money.

What metrics to consider?

For this, we should take a look at trends in the engagement metrics (such as conversion rates, sessions, bounce rates) and the overall amount of leads, opportunities, and sales over a certain time period (let’s say, six months).

When you think of metrics, naturally you imagine a performance dashboard. That’s why we’ll try a mixed technique that lies in combining reporting features of a pivot table and visualization capabilities of charts.

How to calculate performance measures

  • Revenue = Total Sales * Purchase Cost
  • Gross Profit = Revenue – Campaign Cost
  • ROI (return on investment) = (Gross Profit – Campaign Cost) / Campaign Cost
  • Conversion Rate = Total Leads / Total Clicks
  • CPL (Cost Per Lead) = Total Marketing Spend / Total New Leads
  • CPO (Cost Per Opportunity) = Total Marketing Spend / Total Opportunities
  • CPS (Cost Per Sale) = Total Marketing Spend / Total Sales

Methods of calculating these metrics depend greatly on the specifics of the industry you’re working in, that’s why your formulas may differ from ours. The purpose of this article is to show how you can take advantage of pivot table capabilities for effective analysis of various metrics.

Goals of analysis

Before the start, we should know what results we want to achieve in the long run.

Our far-reaching goal is to optimize leads-opportunities and opportunities-sales conversions.

That’s why we’ll pay particular attention to amounts of leads, opportunities, and sales generated by channels and campaigns. Also, we’ll calculate ROI, CPL, CPO, and CPC as these metrics are the foundation of measuring how successful the campaign was. ROI is of special importance – it shows how profitable the marketing investment was.

We’ll show you how to analyze real live data and provide you with the link to the demo at the end of the article.

Reporting

Let’s master the process of creating reports together.

Connect to a data source

Let’s connect to a CSV/JSON data file that has been previously exported from the platform you’re using for marketing.

The fields from our dataset are represented as the hierarchies in the rows, columns, and measures. Particularly, we have the following fields:

  • Channel
  • Campaign
  • Campaign Cost
  • Clicks
  • CPC
  • Date
  • Users
  • Sessions
  • Leads
  • Opportunities
  • Sales
  • Bounce rate
  • Purchase Cost

Let’s take a quick glance at the structure of the data in a flat view:

Add custom measures

To get a complete picture of our analysis, let’s add our own metrics by using the calculated values. Simply define the formulas for these measures in the Field List.

Add calculated values to the report

Arrange the hierarchies

Organize the data on the grid and aggregate it via the Field List or by defining a slice in code. Here is the result:

Note that we’ve added the “Month” level of the “Date” hierarchy to the report filters so as to be able to evaluate metrics over specific months.

Put the accent on individual cells

To tailor the report, highlight the cells with conditional formatting based on their values:

Highlight important values of your report

Campaigns Analysis

It’s time to perform a campaigns analysis. Let’s focus on three types of campaigns: Social Media, SEM, and Display Advertising and define which channel is the main driver of traffic to your website.

Social Media Channel

We took the four most popular social media platforms to find out whether social media campaigns have any impact on generating leads.

  1. Facebook
  2. Instagram
  3. LinkedIn
  4. Twitter

SEM Channel

Also, we added the results of search engines advertising campaigns to measure their effectiveness:

  1. Bing Ads
  2. Google Search Ads

Display Advertising Campaigns

To define how many impressions your display advertising brings and whether your strategy needs improvement, we’ll analyze the flow of traffic from these campaigns:

  1. Google Display Network
  2. Display advertisement network – 2

We’ll analyze all this data using a top-down approach: starting from the big picture, we’ll drill down to the deeper levels of detail. In our case, the most logical way is to analyze the metrics of channels and then assess particular campaigns.

Charting

To gain even more insights, you can enhance the report with visual elements such as charts or diagrams that make information easier to grasp.

Let’s add these kinds of graphs to our dashboard:

  • Multiple-series line charts for illustrating the trend in the conversion rate over months, comparing clicks, CPL, CPO, and CPS across channels.
  • Column charts for comparing the number of leads, opportunities, and sales generated by the campaigns and channels; bounce rates across channels and campaigns and the largest revenue drivers.

And others. All of them are designed to communicate the results of the analysis as effectively as possible. There are no limitations on your choice as we hope you’ll discover your unique way of visualizing the data.

Displaying the results

Now it’s time to estimate what we’ve achieved by following these guidelines.

For example, the next stacked column chart presents how many leads, opportunities, and sales were generated monthly by all the channels:

Moreover, we can observe which channels are the drivers of revenue:

From the chart above it’s clear that the SEM channel brought the least profit and we should analyze Display Ads and Social channels more closely:

This chart answers the question: “Which campaigns were the most profitable?”

Afterward, let’s dig deeper into the analysis of social media campaigns:

Using these charts, we’ve checked whether the bounce rate was high and how many leads, opportunities and sales were delivered by social media campaigns.

Likewise, you can create interactive dashboards for the rest of the campaigns by using the dashboard templates we’ve carefully prepared for you.

What’s next?

Now that you understand the results of your marketing efforts, feel free to share the report with colleagues or boss.

Bringing it all together

Today you’ve learned how to use a pivot table as a leading tool for doing research on the effectiveness of campaigns. We do hope you are inspired to use it for improving your strategic marketing goals.

Live demo

Experience is the best teacher. We’ve prepared the interactive demos for you – load your own data and try exploring it to reveal more details about your marketing campaigns.

Search the ways to rock the data with us. Stay tuned not to miss new blog posts!

Useful tutorials

Numerous researches in the field of cognitive neuroscience show that your brain loves a visual content more than plain text.

(more…)

Being a web component it’s important to be easily fittable to any web project.

WebDataRocks is as customizable as it’s required by the application where it is embedded.

When you are creating your website or application, the design of the user interface comes as an important part of the developing process. (more…)

Move up