Back to homepage

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:

• Area range (demo)
• Area-spline (demo)
• Area spline range (demo)
• Basic area (demo)
• Basic bar (demo)
• Basic column (demo)
• Bubble chart (demo)
• Column range (demo)
• Error bar (demo)
• Line chart (demo)
• Funnel chart (demo)
• Pie chart (demo)
• Polygon (demo)
• Pyramid (demo)
• Scatter plot (demo)
• Spline (demo)
• Waterfall (demo)

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

Step 3.1. Download the Highcharts npm package:

npm install highcharts-vue@1

Note that Vue and the Highcharts package versions must be compatible. Since we are using Vue 2 in our project, we installed the 1.x.x version of the package.

Step 3.2. Import Highcharts into your component and create a reactive variable to store options for the chart (e.g., chartOptions):

// ...
import { Chart } from "highcharts-vue";
// ...
const chartOptions = ref({});
// ...

Step 3.3. In the <template> section of your component, add the Chart component and set its options prop to the reactive variable created in the previous step (e.g., chartOptions):

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

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

Step 4.1. Import the WebDataRocks Connector for Highcharts:

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

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

<script setup>
  // ...

  function reportComplete () {
    // 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"
     v-bind:report="report"
     v-bind:reportcomplete="reportComplete"
     toolbar
    />
    <Chart
      v-bind:options="chartOptions"
    />
  </div>
</template>

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

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

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

Step 5. Run the project

Run your project with the following command:

npm run dev

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

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

  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 pivotRef = ref(null);

  const chartOptions = ref({});

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

  function createChart () {
    pivotRef.value.webdatarocks.highcharts.getData(
      {
        type: "spline",
      },
      // Function called when data for the chart is ready
      (data) => {
        chartOptions.value = data;
      },
      // Function called on report changes (filtering, sorting, etc.) 
      (data) => {
        chartOptions.value = data;
      }
    );
  }
</script>

<template>
  <div>
    <Pivot
     ref="pivotRef"
     v-bind:report="report"
     v-bind:reportcomplete="reportComplete"
     toolbar
    />
    <Chart
     v-bind:options="chartOptions"
    />
  </div>
</template>

See also

• highcharts.getData()
• getData()

Get the sample project to try WebDataRocks.

See the Integrate WebDataRocks tutorial to integrate WebDataRocks into your existing project.

Note that our sample project uses Options API.

Step 1. Download or clone our sample project from GitHub:

git clone https://github.com/WebDataRocks/pivot-vue
cd pivot-vue

Step 2. Install the npm packages described in the package.json file:

npm install

Step 3. Run your application:

npm run serve

The sample project will be available at http://localhost:8080/.

You can shut down the app with Ctrl + C.

See also

• How to load the report
• How to save the report
• How to connect to JSON data source
• How to use the Toolbar

Read this tutorial to learn how to integrate the WebDataRocks reporting tool with Google Charts.

Supported chart types

WebDataRocks supports the following chart types:

1. Area (demo)
2. Bar (demo)
3. Column (demo)
4. Line (demo)
5. Pie (demo)
6. Sankey (demo)

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

To start a new Vue data visualization project with WebDataRocks Pivot Table and Google Charts, follow the steps below.

Step 1. Add WebDataRocks to your project

Step 1.1. Complete the integration 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: "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 Google Charts

Step 3.1. Download the Google Charts wrapper for Vue:

npm install vue-google-charts

Step 3.2. Import Google Charts for Vue 2:

import { GChart } from "vue-google-charts/legacy";

Step 3.3. Now you can add a chart to your component. Let’s create a column chart:

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

If you run the project now, the chart won’t show any data because WebDataRocks is not integrated with Google Charts 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 data for the chart (e.g., chartData):

const chartData = ref([]);

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

Step 4.2. Import the WebDataRocks Connector for Google Charts:

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

The Connector provides the googlecharts.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 googlecharts.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"
    />
    <GChart
      type="ColumnChart"
    />
  </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 googlecharts.getData() method from the Connector:

function createChart() {
  pivotRef.value.webdatarocks.googlecharts.getData(
    {
      type: "column",
    },
    // Function called when data for the chart is ready
    (chartConfig) => chartData.value = chartConfig.data,
    // Function called on report changes (filtering, sorting, etc.)
    (chartConfig) => chartData.value = chartConfig.data
  );
}

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

Step 4.5. Finally, pass the data to the chart:

<GChart
 type="ColumnChart"
 v-bind:data="chartData"
/>

Since the chartData is reactive and is assigned using the v-bind directive, the chart will be re-rendered each time the chartData’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 how the pivot table looks in combination with Google Charts.

Now try experimenting: filter the data, change the measures and the aggregation functions, and see how the results are reflected on the chart.

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

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 { ref } from "vue";
  import { GChart } from "vue-google-charts/legacy";
  import "@webdatarocks/webdatarocks/webdatarocks.googlecharts.js";

  let pivotRef = ref(null);

  const chartData = ref([]);

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

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

  function createChart() {
    pivotRef.value.webdatarocks.googlecharts.getData(
      {
        type: "column",
      },
      // Function called when data for the chart is ready
      (chartConfig) => chartData.value = chartConfig.data,
      // Function called on report changes (filtering, sorting, etc.)
      (chartConfig) => chartData.value = chartConfig.data
    );
  }
</script>

<template>
  <div>
    <Pivot
      ref="pivotRef"
      toolbar
      v-bind:report="report"
      v-bind:reportcomplete="onReportComplete"
    />
    <GChart
      type="ColumnChart"
      v-bind:data="chartData"
    />
  </div>
</template>

See also

• googlecharts.getData()
• getData()

These tutorials show how to integrate the WebDataRocks reporting tool with the Vue.js framework using Composition API.

Choose one of the following tutorials:

• Integrate WebDataRocks into a Vue 2 project
• Integrate WebDataRocks into a Vue 3 project

You can also run our sample project from GitHub.

Prerequisites

• Node.js

Integrate WebDataRocks into a Vue 2 project

The guidelines below describe how to integrate WebDataRocks with Vue 2. You can also integrate WebDataRocks into a Vue 3 project.

Step 1. Create a project (optional)

Step 1.1. If you don’t have a Vue 2 application yet, create one by running the following command in the console:

npm create vue@2

During the creation process, you will be prompted to choose configurations for your project. For simplicity, select No for all the configurations.

Step 1.2. Install npm packages for the project:

cd <project-name>
npm install

Step 2. Get WebDataRocks

Install the WebDataRocks Vue wrapper from npm:

npm install @webdatarocks/vue-webdatarocks

Step 3. Include WebDataRocks

Step 3.1. Import WebDataRocks in the component where you need the pivot table (e.g., src/App.vue):

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

Step 3.2. Add Pivot to the component’s template:

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

Note that the <template> must contain only one root <div> element.

Step 4. See the result

Run your application:

npm run dev

Open http://localhost:5173/ in the browser — WebDataRocks is embedded into your Vue 2 project.

You can shut down the app with Ctrl + C.

Integrate WebDataRocks into a Vue 3 project

Follow the steps below to integrate WebDataRocks with Vue 3.

Note that WebDataRocks does not have a ready-to-use Vue 3 wrapper. In this tutorial, the Vue 2 wrapper is used for the integration with Vue 3.

Step 1. Create a project (optional)

Step 1.1. If you don’t have a Vue 3 application yet, create one by running the following command in the console:

npm create vue@3

During the creation process, you will be prompted to choose configurations for your project. For simplicity, select No for all the configurations.

Step 1.2. Install npm packages for the project:

cd <project-name>
npm install

Step 2. Get WebDataRocks

Install WebDataRocks from npm:

npm install @webdatarocks/webdatarocks

Step 3. Include WebDataRocks

Step 3.1. Download the Pivot.vue file from our GitHub and place it in the src/components/ folder.

Step 3.2. In the Pivot.vue file, find the <style> block and edit it as follows:

<style scoped>
@import '~@webdatarocks/webdatarocks/webdatarocks.min.css';
</style>

<style scoped>
@import '@webdatarocks/webdatarocks/webdatarocks.min.css';
</style>

Step 3.3. Import WebDataRocks from Pivot.vue in the component where you need the pivot table (e.g., src/App.vue):

<script setup>
import Pivot from "./components/Pivot.vue";
</script>

Step 3.4. Import WebDataRocks CSS:

<script setup>
import Pivot from "./components/Pivot.vue";
import "@webdatarocks/webdatarocks/webdatarocks.css";
</script>

Step 3.5. Add WebDataRocks to the component’s template:

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

Step 4. See the result

Run your application:

npm run dev

Open http://localhost:5173/ in the browser — WebDataRocks is embedded into your Vue 3 project.

You can shut down the app with Ctrl + C.

See also

• How to connect to JSON data source
• How to connect to CSV data source
• How to use the Toolbar