{"id":18392,"date":"2019-09-10T08:44:01","date_gmt":"2019-09-10T06:44:01","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=18392"},"modified":"2026-01-12T11:34:21","modified_gmt":"2026-01-12T11:34:21","slug":"building-a-dashboard-with-highcharts-and-webdatarocks-pivot","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/building-a-dashboard-with-highcharts-and-webdatarocks-pivot\/","title":{"rendered":"Building a dashboard with Highcharts and WebDataRocks Pivot"},"content":{"rendered":"<p>&nbsp;<br \/>\nIf you are looking for a web-based tool to both slice, dice and analyze data as well as visualize those data, combining Highcharts and the free Pivot Table tool from WebDataRocks might be just what you are looking for.<\/p>\n<p>Together they allow you to generate a powerful web-based dashboard that can serve multi-purpose analytical and reporting needs, and be integrated with any project.<br \/>\nArmed with this approach, you and your users will be able to come up with data-driven decisions faster and quicker (and most likely, cheaper) than before.<\/p>\n<p>Here is an example of the kind of dashboard you will be able to make after reading this tutorial:<\/p>\n<p><iframe style=\"width: 100%; height: 1800px; border: none;\" src=\"https:\/\/codepen.io\/webdatarocks\/full\/mNMgoG\" title=\"Dashboard displays random employees' information. By  Veronika Rovnik\"><\/iframe><\/p>\n<h4>Why dashboards<\/h4>\n<p>Many dashboards are designed to only report data. However, once you combine data manipulation and visualization, the analysis becomes much more sophisticated.<\/p>\n<p>No need for an expensive BI (Business Intelligence) too. All you need is WebDataRocks Pivot Table and Highcharts. Here is how they may work together:<\/p>\n<p>By taking your raw data as an input, the pivot table transforms it into intelligible tabular reports. In our case, this also prepares the data for the Highcharts charting engine, so that you may explore the data visually.<\/p>\n<p><a href=\"https:\/\/www.highcharts.com\/demo\/streamgraph\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-18399 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/09\/09143610\/streamGraph.gif\" alt=\"\" width=\"698\" height=\"558\" \/><\/a><\/p>\n<p>The pivot table component comes with a collection of aggregation functions, a drag-and-drop interface, a comfy field list, and customization options. It&#8217;s very flexible when it comes to integrating with charting libraries, Highcharts in particular.<\/p>\n<h4>Building a dashboard<\/h4>\n<p>Building any dashboard requires you to first define the objectives of your data analysis, specify key metrics and collect relevant data.<\/p>\n<p>We won\u2019t get into the preparatory work in this tutorial. We will just assume the role of a fictional HR department, looking to better visualize data about the organizations\u2019 employees. Here are some fictional <a href=\"https:\/\/www.webdatarocks.com\/wd_uploads\/2019\/09\/hr_data.json\">HR data<\/a> to get us started.<\/p>\n<p>So, where should we start?<\/p>\n<h4>Step 1: Include libraries<\/h4>\n<p>&nbsp;<\/p>\n<p>Like Highcharts, the Pivot Table integrates smoothly with a majority of front-end technologies, including <a href=\"https:\/\/www.webdatarocks.com\/doc\/integration-with-react\/?r=hc\">React<\/a> and <a href=\"https:\/\/www.webdatarocks.com\/doc\/integration-with-angular\/?r=hc\">Angular<\/a> frameworks. For this tutorial, we won\u2019t debate frameworks, but simply use a static HTML page for demonstration purposes.<\/p>\n<p>Create an empty HTML page and embed <a href=\"https:\/\/www.webdatarocks.com\/doc\/download\/?r=hc\">WebDataRocks<\/a> into our page by linking it to the library via it\u2019s CDN.<\/p>\n<p>Open your HTML file and betweentags include WebDataRocks with some sample data.<\/p>\n<pre>&lt;html&gt;\r\n    &lt;head&gt;&lt;\/head&gt;\r\n    &lt;body&gt;\r\n        &lt;div id=\"wdr-component\"&gt;&lt;\/div&gt;\r\n        &lt;link href=\"https:\/\/cdn.webdatarocks.com\/latest\/webdatarocks.min.css\" rel=\"stylesheet\" \/&gt;\r\n        &lt;script src=\"https:\/\/cdn.webdatarocks.com\/latest\/webdatarocks.toolbar.min.js\"&gt;&lt;\/script&gt;\r\n        &lt;script src=\"https:\/\/cdn.webdatarocks.com\/latest\/webdatarocks.js\"&gt;&lt;\/script&gt;\r\n        &lt;script&gt;\r\n            var pivot = new WebDataRocks({\r\n                container: \"#wdr-component\",\r\n                toolbar: true,\r\n                report: {\r\n                    dataSource: {\r\n                        filename: \"https:\/\/www.webdatarocks.com\/wd_uploads\/2019\/09\/hr_data.json\"\r\n                    }\r\n                }\r\n            });\r\n\r\n        &lt;\/script&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>You can see how this code is working in the <a href=\"https:\/\/codepen.io\/webdatarocks\/pen\/vWQLZJ\">live demo on CodePen<\/a>.<\/p>\n<h4>Step 2: Add your data&amp;lt<\/h4>\n<p>Once the pivot table is embedded, we are ready to fill the pivot table with data. Connect it to the data source. Learn how to connect using a <a href=\"https:\/\/www.webdatarocks.com\/doc\/json-data-source\/?r=hc\">JSON source<\/a> or using a <a href=\"https:\/\/www.webdatarocks.com\/doc\/csv-data-source\/?r=hc\">CSV source<\/a>.<\/p>\n<h4>Step 3: Create a report<\/h4>\n<p>Next, define which <a href=\"https:\/\/www.webdatarocks.com\/doc\/configuring-fields\/?r=hc\">data to show<\/a> on the grid.<\/p>\n<p>Here is what we&#8217;ve got:<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-18431\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2019\/09\/13111139\/2-3.gif\" alt=\"\" width=\"1000\" height=\"433\" \/><\/p>\n<h4>Step 4: Sending data to the charts<\/h4>\n<p>&nbsp;<\/p>\n<p>Integrating Highcharts is easy. As explained in the <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/chart-types\/?r=hc\">Highcharts documentation<\/a>, a neatly organized JSON file is all it takes to get a chart up with its default settings.<\/p>\n<p>Fortunately for us, this step can be handled by the WebDataRocks connector that is shipped as a script. Details of how this connection works can be found in our <a href=\"https:\/\/www.webdatarocks.com\/doc\/integration-with-highcharts\/?r=hc\">integration guidelines<\/a>.<\/p>\n<p>To send the data to charts, we can use a special method &#8211; <a href=\"https:\/\/www.webdatarocks.com\/doc\/highcharts-getdata\/?r=hc\">webdatarocks.highcharts.getData()<\/a>.<\/p>\n<p>As the name suggests, the method requests and gets the aggregated data from the pivot. Depending on the chart&#8217;s type, the method preprocesses the data according to the required structure. (That was easy!) Once the method&#8217;s callback is triggered, a chart is generated based on the received data. If the underlying data (i.e. the report) is changed, the chart is also updated.<\/p>\n<p>Here is a <a href=\"https:\/\/codepen.io\/webdatarocks\/pen\/mNMgoG\">CodePen demo<\/a> if you want to study the simple code behind this integration more carefully.<\/p>\n<h4>Step 5: Customize the Look &amp; Feel<\/h4>\n<p>&nbsp;<\/p>\n<p>You may now customize the dashboard to a color scheme of your choosing. Check <a href=\"https:\/\/www.webdatarocks.com\/doc\/changing-report-themes\/?r=hc\">this article<\/a> to learn how.<\/p>\n<h4>Results<\/h4>\n<p>Well, that is it. With the two JavaScript libraries working together you may interact with the pivot table and instantaneously see the changes reflected in the charts.<\/p>\n<h4>What&#8217;s next?<\/h4>\n<p>To learn the concepts of Highcharts from the ground up, check out the <a href=\"https:\/\/www.highcharts.com\/docs\/chart-concepts\/understanding-highcharts\">Understanding Highcharts guide<\/a>. To explore the capabilities of WebDataRocks Pivot, walk through its <a href=\"https:\/\/www.webdatarocks.com\/doc\/technical-specifications\/?r=hc\">technical specifications<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Step by step tutorial to create an interactive dashboard using Highcharts and WebDataRocks Pivot  <\/p>\n","protected":false},"author":246,"featured_media":21960,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1010],"coauthors":[778],"class_list":["post-18392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-dashboards"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/246"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=18392"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18392\/revisions"}],"predecessor-version":[{"id":29213,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/18392\/revisions\/29213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21960"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=18392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=18392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=18392"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=18392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}