Documentation menu
JS React Angular Vue
JS React Angular Vue

Integration with FusionCharts

FusionCharts is a charting library that provides a wide range of interactive charts, maps, and graphs. This tutorial describes how to integrate WebDataRocks with FusionCharts and visualize your data from the component.

Supported chart and map types

Charts:

Maps:

  • maps/worldwithcountries (demo)

In case the chart you need is not on the list, you can implement a custom logic of data processing in the options.prepareDataFunction parameter of fusioncharts.getData().

Please follow these steps to integrate your pivot table component with FusionCharts.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the Quick start 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 FusionCharts

Step 2.1. Include fusioncharts.js into your web page:

<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>

Step 2.2. Include a theme for FusionCharts:

<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

Step 2.3. Add the <div> container where the chart will be rendered:

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

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

Step 3.1. Include the WebDataRocks Connector for FusionCharts:

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

The Connector provides the fusioncharts.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 fusioncharts.getData() method before WebDataRocks is fully loaded, 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: {
    // ...
  },
  reportcomplete: onReportComplete
});

function onReportComplete() {
  // Unsubscribing from reportcomplete
  // We need it only to track the initialization of WebDataRocks
  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 fusioncharts.getData() method from the Connector:

function createChart() {
  const columnChart = new FusionCharts({
    type: "mscolumn2d",
    renderAt: "fusioncharts-container",
    width: "100%",
    height: 450
  });
  
  pivot.fusioncharts.getData(
    {
      type: columnChart.chartType()
    },
    // Function called when data for the chart is ready
    function(chartConfig) {
      // Applying the chart theme
      chartConfig.chart.theme = "fusion";
      // Passing the data to the chart
      columnChart.setJSONData(chartConfig);
      columnChart.render();
    },
    // Function called on report changes (filtering, sorting, etc.)
    function(chartConfig) {
      // Applying the chart theme
      chartConfig.chart.theme = "fusion";
      // Passing the data to the chart
      columnChart.setJSONData(chartConfig);
    }
  );
}

If the Connector does not support the desired chart type or you need to preprocess the data differently, implement a function that handles the data processing and pass it to fusioncharts.getData() as the options.prepareDataFunction parameter.

To learn more about configurations available for FusionCharts, please refer to the FusionCharts documentation.

Step 4. See the result

Open your web page in the browser to see an interactive dashboard with WebDataRocks and FusionCharts. The column chart shows the data from WebDataRocks and reacts instantly to any changes in the report.

Check out the full code

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

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

    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

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

  <body>
    <div id="pivot-container"></div>
    <div id="fusioncharts-container"></div>
    <script>
      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",
              },
            ],
          },
        },
        reportcomplete: onReportComplete,
      });

      function onReportComplete() {
        pivot.off("reportcomplete");
        createChart();
      }

      function createChart() {
        const columnChart = new FusionCharts({
          type: "mscolumn2d",
          renderAt: "fusioncharts-container",
          width: "100%",
          height: 450,
        });

        pivot.fusioncharts.getData(
          {
            type: columnChart.chartType(),
          },
          function (chartConfig) {
            chartConfig.chart.theme = "fusion";
            columnChart.setJSONData(chartConfig);
            columnChart.render();
          },
          function (chartConfig) {
            chartConfig.chart.theme = "fusion";
            columnChart.setJSONData(chartConfig);
          },
        );
      }
    </script>
  </body>
</html>

Live example

This sample shows how to integrate WebDataRocks Pivot Table with FusionCharts:

See also