Documentation menu
JS React Angular Vue
JS React Angular Vue

Integration with Highcharts

This detailed tutorial will walk you through the integration of WebDataRocks with Highcharts.

Supported chart types

WebDataRocks supports the following chart types of the Highcharts library:

Follow the steps below to start creating interactive data visualizations.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the integration guide. Your code of the web page with WebDatarocks should look similar to the following:

<html>
  <head>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
  </head>

  <body>
    <div id="pivot-container"></div> 
    <script>
      const pivot = new WebDataRocks({
        container: "#pivot-container",
        toolbar: true,
      });
    </script>
  </body>
</html>

Step 1.2. Create a report for WebDataRocks — connect to the data source and define which fields should be displayed in rows, columns, and measures:

const pivot = new WebDataRocks({
  container: "#pivot-container",
  toolbar: true,
  report: {
    dataSource: {
      filename: "https://cdn.webdatarocks.com/data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "Business Type",
        },
        {
          uniqueName: "Measures",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
          aggregation: "sum",
        },
      ],
    },
  },
});

The fields you’ve specified in the report will be shown on the chart.

Step 2. Add Highcharts

Step 2.1. Include the scripts for Highcharts into your web page:

<script src="https://code.highcharts.com/4.2.2/highcharts.js"></script>
<script src="https://code.highcharts.com/4.2.2/highcharts-more.js"></script>

Step 2.2. Add a container where the chart should be rendered into your web page:

<div id="highcharts-container"></div>

Step 3. Show the data from the pivot table on the chart

Step 3.1. Import the WebDataRocks Connector for Highcharts:

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

The Connector provides the highcharts.getData() method, which gets data from WebDataRocks and converts it to the format required for a specific chart type.

Step 3.2. If we call the highcharts.getData() method before WebDataRocks is fully loaded and ready to use, it will return an empty result. To know when WebDataRocks is ready to provide data for the chart, handle the reportcomplete event:

const pivot = new WebDataRocks({
  container: "#pivot-container",
  toolbar: true,
  report: report,
  reportcomplete: () => {
    pivot.off("reportcomplete");
    createChart();
  }
});

Now the chart will be created only when the data is loaded and the report is ready.

Step 3.3. Implement the createChart() function. It will use the highcharts.getData() method from the Connector:

function createChart() {
  pivot.highcharts.getData({
    type: "spline"
  },
  // Function called when data for the chart is ready
  (data) => {
    Highcharts.chart("highcharts-container", data);
  },
  // Function called on report changes (filtering, sorting, etc.)
  (data) => {
    Highcharts.chart("highcharts-container", data);
  });
}

Step 4. See the result

Open your web page in the browser to see how the pivot table looks in combination with Highcharts.

To see what a real-time interaction is, try experimenting: filter the data, change the measures and the aggregation functions — the results are reflected on the chart at once.

Check out the full code

After completing this tutorial, the full code of the web page should look as follows:

<html>
  <head>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <script src="https://code.highcharts.com/4.2.2/highcharts.js"></script>
    <script src="https://code.highcharts.com/4.2.2/highcharts-more.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.highcharts.js"></script>
  </head>
  <body>
    <div id="pivot-container"></div>
    <div id="highcharts-container"></div>

    <script>
      const report = {
        dataSource: {
          filename: "https://cdn.webdatarocks.com/data/data.csv"
        },
        slice: {
          rows: [
            {
              uniqueName: "Country",
            },
          ],
          columns: [
            {
               uniqueName: "Business Type",
            },
            {
              uniqueName: "Measures",
            },
          ],
          measures: [
            {
              uniqueName: "Price",
              aggregation: "sum",
            },
          ],
        },
      };

      const pivot = new WebDataRocks({
        container: "#pivot-container",
        toolbar: true,
        report: report,
        reportcomplete: () => {
          pivot.off("reportcomplete");
          createChart();
        }
      });

      function createChart() {
        pivot.highcharts.getData({
          type: "spline"
        },
        // Function called when data for the chart is ready
        (data) => {
          Highcharts.chart("highcharts-container", data);
        },
        // Function called on report changes (filtering, sorting, etc.)
        (data) => {
          Highcharts.chart("highcharts-container", data);
        });
      }
    </script>
  </body>
</html>

Live example

Interact with the following sample where WebDataRocks Pivot Table is integrated with Highcharts to see how they work together:

See also