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:

area2d (demo)
bar2d (demo)
bar3d (demo)
column2d (demo)
column3d (demo)
doughnut2d (demo)
doughnut3d (demo)
line (demo)
marimekko (demo)
msarea (demo)
msbar2d (demo)
msbar3d (demo)
mscolumn2d (demo)
mscolumn3d (demo)
mscolumn3dlinedy (demo)
msline (demo)
msspline (demo)
mssplinearea (demo)
pareto2d (demo)
pareto3d (demo)
pie2d (demo)
pie3d (demo)
radar (demo)
spline (demo)
splinearea (demo)
stackedarea2d (demo)
stackedbar2d (demo)
stackedcolumn2d (demo)
stackedcolumn3d (demo)

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 the steps below 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 component with WebDatarocks should look similar to the following:

<script setup>
  import { Pivot } from "@webdatarocks/vue-webdatarocks";
  import "@webdatarocks/webdatarocks/webdatarocks.css";
</script>

<template>
  <div>
    <Pivot
     toolbar
    />
  </div>
</template>

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:

<script setup>
  import { Pivot } from "@webdatarocks/vue-webdatarocks";
  import "@webdatarocks/webdatarocks/webdatarocks.css";

  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",
        },
      ],
    },
  };
</script>

<template>
  <div>
    <Pivot
     toolbar
     v-bind:report="report"
    />
  </div>
</template>

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

Step 2. Get a reference to the WebDataRocks instance

Some of WebDataRocks methods and events are needed to create a chart. Using a reference to the WebDataRocks instance, we can access WebDataRocks API.

Get the reference as follows:

<script setup>
  // ...
  import { ref } from "vue";
  
  const pivotRef = ref(null);

  // ...
</script>

<template>
  <div>
    <Pivot
     ref="pivotRef"
     toolbar
     v-bind:report="report"
    />
</template>

Now it’s possible to interact with the component through pivotRef.value.webdatarocks.

Step 3. Add FusionCharts

Step 3.1. Download FusionCharts and its wrapper for Vue:

npm install fusioncharts vue-fusioncharts@3.1.0

Note that Vue and FusionCharts Vue wrapper versions must be compatible. Since we are using Vue 2 in our project, we installed the 3.1.0 version of the wrapper.

Step 3.2. Import the necessary FusionCharts dependencies into your component:

// Import the VueFusionCharts component
import VueFusionCharts from "vue-fusioncharts";
// Import the FusionCharts library
import FusionCharts from "fusioncharts";
// Import the necessary chart type (we’ll import column)
import Column2D from "fusioncharts/fusioncharts.charts";
// Import a FusionCharts theme
import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

Step 3.3. Use the imported dependencies as plugins by calling the Vue.use() method:

import Vue, { ref } from "vue";

// ...

Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);

Step 3.4. Now you can add a chart to your component:

<template>
  <div>
    <Pivot
     ref="pivotRef"
     toolbar
     v-bind:report="report"
    />
    <fusioncharts
     type="mscolumn2d"
     width="100%"
     height="450"
     dataFormat="json"
    />
  </div>
</template>

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

If you run the project now, the chart won’t show any data because WebDataRocks is not integrated with FusionCharts yet. We will connect them in the next step.

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

Step 4.1. Create a reactive variable to store the chart’s data source (e.g., chartDataSource):

const chartDataSource = ref({});

The chartDataSource variable is now empty, but soon we’ll fill it with data from our component.

Step 4.2. Import the WebDataRocks Connector for FusionCharts:

import "@webdatarocks/webdatarocks/webdatarocks.fusioncharts.js";

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 4.3. 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:

<script setup>
  // ...

  function onReportComplete() {
    // Unsubscribing from reportcomplete
    // We need it only to track the initialization of WebDataRocks
    pivotRef.value.webdatarocks.off("reportComplete");
    createChart();
  }
</script>

<template>
  <div>
    <Pivot
     ref="pivotRef"
     toolbar
     v-bind:report="report"
     v-bind:reportcomplete="onReportComplete"
    />
    <fusioncharts
     type="mscolumn2d"
     width="100%"
     height="450"
     dataFormat="json"
    />
  </div>
</template>

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

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

function createChart() {
  pivotRef.value.webdatarocks.fusioncharts.getData(
    {
      type: "mscolumn2d",
    },
    // Function called when data for the chart is ready
    drawColumnChart,
    // Function called on report changes (filtering, sorting, etc.)
    drawColumnChart
  );
}

Notice the type configuration — it must correspond to the chart type specified in step 3.4 (in our case, it is "mscolumn2d").

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.

Step 4.5. Now create a function to draw the chart:

function drawColumnChart(chartConfig) {
  // Applying the chart theme
  chartConfig.chart.theme = "fusion";
  // Updating the chart’s data source
  chartDataSource.value = chartConfig;
}

Step 4.6. Finally, pass the configured data source to the chart:

<fusioncharts
 type="mscolumn2d"
 width="100%"
 height="450"
 dataFormat="json"
 v-bind:dataSource="chartDataSource"
/>

Since the chartDataSource is reactive and is assigned using the v-bind directive, the chart will be re-rendered each time the chartDataSource’s value is updated. As a result, all your changes to the WebDataRocks report will be reflected on the chart.

Step 5. Run the project

Run your project with the following command:

npm run dev

Open http://localhost:5173/ 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 component should look as follows:

<script setup>
  import { Pivot } from "@webdatarocks/vue-webdatarocks";
  import "@webdatarocks/webdatarocks/webdatarocks.css";
  import "@webdatarocks/webdatarocks/webdatarocks.fusioncharts.js";

  import Vue, { ref } from "vue";

  import VueFusionCharts from "vue-fusioncharts";
  import FusionCharts from "fusioncharts";
  import Column2D from "fusioncharts/fusioncharts.charts";
  import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";

  Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);

  const pivotRef = ref(null);
  const chartDataSource = ref({});

  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",
        },
      ],
    },
  };

  function onReportComplete() {
    pivotRef.value.webdatarocks.off("reportComplete");
    createChart();
  }

  function createChart() {
    pivotRef.value.webdatarocks.fusioncharts.getData(
      {
        type: "mscolumn2d",
      },
      drawColumnChart,
      drawColumnChart
    );
  }

  function drawColumnChart(chartConfig) {
    chartConfig.chart.theme = "fusion";
    chartDataSource.value = chartConfig;
  }
</script>

<template>
  <div>
    <Pivot
     ref="pivotRef"
     toolbar
     v-bind:report="report"
     v-bind:reportcomplete="onReportComplete"
    />
    <fusioncharts
     type="mscolumn2d"
     width="100%"
     height="450"
     dataFormat="json"
     v-bind:dataSource="chartDataSource"
    />
  </div>
</template>