🚀 New WebDataRocks v. 1.4.Check it out!

Browser compatibility

This page contains information about browser versions that WebDataRocks requires.

Starting from version 1.4, WebDataRocks follows the ES6 standard. Hence, the component will work correctly only in browser versions that fully support ES6. You can find these versions in the below table:

BrowserVersion
Chrome51+
Firefox54+
Microsoft Edge15-18, 79+
Opera 38+
Safari 10+
iOS Safari 10+
Internet ExplorerNot supported

This guide will walk you through the process of integrating WebDataRocks with Vue.js.

Prerequisites

Before starting, make sure that Node.js and npm are installed on your machine. 

Next, choose one of the following guides:

  1. Run the sample Vue 2 project from GitHub
  2. Integrate WebDataRocks into a Vue 2 project
  3. Integrate WebDataRocks into a Vue 3 project

Run the sample Vue 2 project from GitHub

Step 1. Download or clone the 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 the project:

npm run serve

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

You can shut down the app with Ctrl + C.

Integrate WebDataRocks into a Vue 2 project

The below guidelines describe how to integrate WebDataRocks with Vue 2. If you’re interested in integrating with Vue 3, see this guide: Integrate WebDataRocks into a Vue 3 project.

Step 1. Install the Vue CLI by running the following command:

npm install -g @vue/cli

Skip this step if the Vue CLI is already installed. 

Step 2. Unless you already have the Vue project, create one with the following command:

vue create project-name
cd project-name

During the creation process, you will be prompted to choose configurations for your project. Choose the default Vue 2 preset.

Step 3. Get the WebDataRocks Vue module from npm:

npm install vue-webdatarocks

Step 4. Register WebDataRocks in your Vue project using one of the following approaches:

  • Register globally in the src/main.js file:
    // other imports
    import Pivot from 'vue-webdatarocks';
    import 'webdatarocks/webdatarocks.css';


    Vue.use(Pivot);
    //other code
  • Register locally in the component where you need the pivot table (e.g., src/App.vue):
    <script> 
    import {Pivot} from 'vue-webdatarocks';
    import 'webdatarocks/webdatarocks.css';


    // Define WebDataRocks in the list of components
    export default {
    name: 'app',
    components: {
    Pivot,
    }
    }
    </script>

Step 5. Add WebDataRocks to the <template> tag of the component (e.g., src/App.vue):

<template>
    <div id="app">
        <WebDataRocks
         report="https://cdn.webdatarocks.com/reports/report.json"
         toolbar>
        </WebDataRocks>
    </div>
</template>

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

Step 6. Run your app:

npm run serve

Your WebDataRocks & Vue 2 project will be available at http://localhost:8080/.

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.

Step 1. If you don’t have a Vue 3 project, create one:

vue create vue-3-project
cd vue-3-project

During the creation process, you will be prompted to choose configurations for your project. Choose the default Vue 3 preset. 

Step 2. Install WebDataRocks from npm:

npm install webdatarocks

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

Step 4. In the main.js file, import webdatarocks.css:

import { createApp } from 'vue'
import App from './App.vue'
import 'webdatarocks/webdatarocks.css'

createApp(App).mount('#app')

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

<script>
import Pivot from "./components/Pivot";
 
export default {
    name: "App",
    components: {
        Pivot,
    },
};
</script>

Step 6. Add WebDataRocks to the <template> tag of the component (e.g., src/App.vue):

<template>
    <div id="app">
        <Pivot
     	 report="https://cdn.webdatarocks.com/reports/report.json"
         toolbar>
        </Pivot>
    </div>
</template>

Step 7. Run the app:

npm run serve

Your WebDataRocks & Vue 3 project will be available at http://localhost:8080/.

See also

WebDataRocks allows visualizing the data from the pivot table using 3rd-party charting libraries. Feel free to use the following tutorials:

Integration with any other charting library is possible via the getData() method.

WebDataRocks Connector for amCharts is a script that assists in integrating WebDataRocks with amCharts – a JavaScript charting library for dynamic data visualization. 

The methods available in the Connector allows to request the data from the pivot table and pre-process it according to the format required by amCharts.

This reference contains all the available methods that can be used for convenient communication between the pivot table and charts. 

List of API calls

webdatarocks.amcharts.getNumberFormatPattern(format: Object): String

Returns a number formatting string for a chart. Accepts one argument – format which is a Format Object of WebDataRocks. 

Examples

  1. Here is an example of how to apply number formatting to the value axis of a chart:
    /* Create a number formatter for the value axis: */
    valueAxis.numberFormatter = new am4core.NumberFormatter();
    /* Get a format object from WebDataRocks: */
    var numberFormat = pivot.amcharts.getNumberFormatPattern(rawData.meta.formats[0]);
    /* Apply number formatting to the value axis: */
    valueAxis.numberFormatter.numberFormat = numberFormat;
  2. Here is an example of how to apply number formatting to the chart’s tooltip text:

    var numberFormat = pivot.amcharts.getNumberFormatPattern(rawData.meta.formats[0]);
    series.columns.template.tooltipText = "{valueY.value.formatNumber('" + numberFormat + "')}";

See also

webdatarocks.amcharts.getNumberOfMeasures(rawData: Object): Number

Returns the total number of measures that are specified in the data slice.

The common use case is to use this method in a for-loop when creating multiple series for a certain type of chart. Often used together with the amcharts.getMeasureNameByIndex() method.

Examples

  1. Here is an example of how to configure the series for a stacked bar chart using amcharts.getNumberOfMeasures(), amcharts.getMeasureNameByIndex(), and amcharts.getCategoryName():
    /* Create and configure series for a stacked bar chart */
    for (s = 0; s < pivot.amcharts.getNumberOfMeasures(rawData); s++) {
        var series = chart.series.push(new am4charts.ColumnSeries());
        series.dataFields.valueX = pivot.amcharts.getMeasureNameByIndex(rawData, s);
        series.dataFields.categoryY = pivot.amcharts.getCategoryName(rawData);
        series.stacked = true;
        series.name = pivot.amcharts.getMeasureNameByIndex(rawData, s);
        var labelBullet = series.bullets.push(new am4charts.LabelBullet());
        labelBullet.locationX = 0.5;
        labelBullet.label.text = "{valueX}";
        labelBullet.label.fill = am4core.color("#fff");
    }

    See the full code on CodePen.

See also

webdatarocks.amcharts.getMeasureNameByIndex(rawData: Object, index: Integer): String

Returns the name of a specific measure from the data prepared for a chart. In chartData and rawData returned by amcharts.getData() the measures are ordered according to the order in the slice. The measures can be accessed by an index.

Examples

  1. Here is an example of how the series values of the column chart can be set using amcharts.getMeasureNameByIndex():
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = webdatarocks.amcharts.getMeasureNameByIndex(rawData, 0);
    

See also

webdatarocks.amcharts.getCategoryName(rawData: Object): String

Returns the name of the field that represents a category in the data prepared for a chart. 

Note that unless a caption is defined in data types settings, the field’s uniqueName is returned.

Examples

  1. Here is an example of how the name of the category axis can be set:
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = pivot.amcharts.getCategoryName(rawData);
    

See also

This step-by-step guide will help you integrate WebDataRocks with amCharts. 

Starting from the 1.3.1 version, WebDataRocks supports integration with amCharts – a high-level JavaScript library for interactive data visualization. 

This tutorial is based on the V4 of amCharts. 

The guide consists of the following sections:

The integration can be done via a special connector – a JavaScript file that provides API for interaction between WebDataRocks and amCharts. See more details on the Connector’s API calls and principles of work in the API reference.

Supported chart types

WebDataRocks Connector for amCharts takes the data from the pivot table and prepares it according to the structure of an array of objects required by amCharts:

[{
    "categoryName": "value",
    "measureName1": "value",
    ...
    "measureNameN": "value",
}, 
 ...
 
]

Any chart type that accepts such data format will work with WebDataRocks Pivot Table.

Here is the list of demos that show how to integrate different chart types with WebDataRocks:

How to integrate WebDataRocks with amCharts

The steps below cover how summarized data from WebDataRocks can be passed to a column chart. For other chart types, refer to the examples above or to the amCharts documentation.

Step 1: Create a pivot table and configure the report

Following the instructions from the Quick start guide, initialize the pivot table on the page and connect it to the data source (JSON or CSV) as in the code snippet below:

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<div id="pivotContainer"></div>
<script>
    var pivot = new WebDataRocks({
        container: "#pivotContainer",
        toolbar: true,
        height: 580,
        width: "100%",
        report: {
            "dataSource": {
                "dataSourceType": "csv",
                "filename": "https://cdn.webdatarocks.com/data/data.csv"
            },
            "slice": {
                "rows": [{
                    "uniqueName": "Country"
                }],
                "columns": [{
                    "uniqueName": "Measures"
                }],
                "measures": [{
                    "uniqueName": "Price",
                    "aggregation": "sum"
                }]
            }
        }
    });
</script>

Note that we set the slice that specifies which fields go to the rows, columns, and measures. Find more details on what the slice is and how to set it in the pivot table.

Step 2: Connect to amCharts

  1. Include amCharts JS files:
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
    <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
    

    Find more information about other ways of amCharts installation in the official amCharts documentation

  2. Include WebDataRocks Connector for amCharts:
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.amcharts.js"></script>
    

Step 3: Create a chart

  1. Create a container for the chart:
    <div id="chartContainer"></div> 
  2. The chart should be created only after the pivot table is ready to provide the aggregated data. To track this, add an event handler for reportcomplete:
    var pivot = new WebDataRocks({
    container: "#pivotContainer",
    toolbar: true,
    height: 580,
    width: "100%",
    report: {
    // the report is the same as in the Step 1
    },
    reportcomplete: function() {
    pivot.off("reportcomplete");
    createChart();
    }

    });

    Once this event is triggered, the createChart() function will be invoked. Its description will be given below.

  3. Declare a variable for the chart:
    var chart;

    Note that the variable should be accessible by the functions that draw and redraw the chart. 

  4. In createChart(), request the data from the pivot table using the webdatarocks.amcharts.getData() method:
    function createChart() {
    pivot.amcharts.getData({}, drawChart, updateChart);
    }

    Note that the returned data is structured according to a format required by amCharts.The requested data contains the fields defined by the current slice of the pivot table. If the slice is passed as an argument to webdatarocks.amcharts.getData(), the data is prepared accordingly to it.

  5. Define drawChart() specified in the previous step – a function that initializes the chart, sets all the configurations specific for this chart type, and fills it with the data provided by WebDataRocks via the webdatarocks.amcharts.getData() API call. Pass this function as a callbackHandler to webdatarocks.amcharts.getData():
    function drawChart(chartData, rawData) {
    /* Create a chart instance */
    chart = am4core.create("chartContainer", am4charts.XYChart);
    /* Add data processed by WebDataRocks to the chart */
    chart.data = chartData.data;
    /* Create category axis */
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = pivot.amcharts.getCategoryName(rawData);
    / * Create value axis * /
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    / * Create and configure series * /
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.categoryX = pivot.amcharts.getCategoryName(rawData);
    series.dataFields.valueY = pivot.amcharts.getMeasureNameByIndex(rawData, 0);
    }

    The lines of code that are highlighted in bold are related to the interaction between the pivot table and charts. Let’s break down what they stand for. After passing the data from the pivot table to the chart, set a name of the category to the category axis:

    categoryAxis.dataFields.category = pivot.amcharts.getCategoryName(rawData); 

    For this, the webdatarocks.amcharts.getCategoryName() method is used. It returns the name of the category of the prepared data. By default, it’s a caption of the first hierarchy from the rows. If the rows do not contain fields, webdatarocks.amcharts.getCategoryName() returns a caption of the first hierarchy from the columns.The same method is used for setting the chart’s category to the series:

    series.dataFields.categoryX = webdatarocks.amcharts.getCategoryName(rawData); 

    To set the series values, the webdatarocks.amcharts.getMeasureNameByIndex() method is used:

    series.dataFields.valueY = webdatarocks.amcharts.getMeasureNameByIndex(rawData, 0);

    Find more details on the API calls available in the Connector for amCharts in the API reference.

  6. Define a function that redraws the chart once any change is applied to the pivot table’s report (e.g., the data is filtered, sorted, the formatting is changed, etc). Pass this function as an updateHandler to webdatarocks.amcharts.getData():

    function updateChart(chartData, rawData) {
    chart.dispose();
    drawChart(chartData, rawData);
    }

    Upon update, the existing chart will be disposed of. Next, the process described in drawChart is repeated, namely drawing the chart but with updated data, its slice, or formatting.

Step 4: See the results

Here is the example of the resulting dashboard with the chart reacting to changes in the slice of the pivot table. It is possible to add more different charts if needed.

See the Pen amCharts column chart minimal configuration and Pivot Table by WebDataRocks (@webdatarocks) on CodePen.

How to set number formatting to the chart

It can be important to display the data in the charts the same way as it comes from the pivot grid.

WebDataRocks Connector for amCharts provides a method that can take a Format Object from WebDataRocks and convert it to the amCharts number formatting pattern:

webdatarocks.amcharts.getNumberFormatPattern(format: Object)

This method can be used for applying formatting to the chart’s axes or to the tooltip.

When the formatting string is prepared by the method, the following properties of the pivot table’s format object are considered:

  • thousandsSeparator
  • decimalSeparator
  • decimalPlaces
  • maxDecimalPlaces
  • currencySymbol
  • currencySymbolAlign
  • isPercent

Here’s an example of the formatting string returned by the method:

$#,###.00

Examples

1) How to apply number formatting to the value axis:

/* Create a number formatter for the value axis: */
valueAxis.numberFormatter = new am4core.NumberFormatter();
/* Get a format object from WebDataRocks: */
var numberFormat = pivot.amcharts.getNumberFormatPattern(rawData.meta.formats[0]);
/* Apply number formatting to the value axis: */
valueAxis.numberFormatter.numberFormat = numberFormat; 

In this case, the first format object from the report’s configuration is returned. By accessing the format by index from rawData, it’s possible to retrieve any format object and process it by this method.

2) How to format values on the chart’s tooltip:

series.columns.template.tooltipText = "{valueY.value.formatNumber('" + numberFormat + "')}";

Dashboard with WebDataRocks and amCharts sample

This sample shows how to integrate WebDataRocks with amCharts and create a dashboard:

See the Pen amCharts Donut Chart & WebDataRocks Pivot Table by WebDataRocks (@webdatarocks) on CodePen.

See also

This guide will walk you through the integration of WebDataRocks Pivot Table with Django – a Python web development framework. Upon completion, you will get a Django application empowered with reporting functionality. 

Prerequisites

Get the latest or specific-release version of Python and install Django on your machine. We recommend using the latest versions of both Python and Django to benefit from their newest features. 

See the Python-Django compatibility matrix to know which Python version you can use with a specific version of Django. Note that the latest versions of Django can be used only with Python 3. 

Ways to integrate WebDataRocks with Django

  1. Integrate WebDataRocks Pivot Table with a new/existing Django application
  2. Run a ready-to-use Django project sample with WebDataRocks Pivot Table

Integrate WebDataRocks Pivot Table with a new/existing application

To successfully add WebDataRocks Pivot Table to a Django application, follow the next steps:

  1. If you’re building an app from scratch, first, create a Django project by running the following command:
    django-admin startproject analytics_project
    

    And navigate to the directory where it is located:

    cd analytics_project
    
  2. Create a new application inside the project:

    python manage.py startapp pivot_table_app
    

    To make the further configuration process more convenient, open the project in the IDE of your choice. 

  3. The app needs to be registered at the project level to be accessible. Go to analytics_project/settings.py and append the app’s name to the INSTALLED_APPS list:
    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'pivot_table_app',
    ]
    

    Note that the exact name of the application can always be checked in the your_app/apps.py file.

  4. There are two possible approaches to templates creation:

    1. Creating app-specific templates

    2. Creating templates at the project level

    Let’s follow the app-specific approach. Create a templates folder within the app’s directory (pivot_table_app). Here we will keep the HTML templates for the application. Create a new HTML file (e.g., home.html). Add WebDataRocks dependencies, namely scripts and styles, within the <head> or <body> elements of the HTML page. Within the <script> tags, initialize the pivot table component and set a basic report according to the structure of your data:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>WebDataRocks Example</title>
    <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
    </head>
    <body>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
    <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
    <div id="pivot-container"></div>
    <script>
    var pivot = new WebDataRocks({
            container: "pivot-container",
            toolbar: true,
            width: "100%",
            height: 600,
            report: {
                "dataSource": {
                    "dataSourceType": "csv",
                    "filename": "https://cdn.webdatarocks.com/data/data.csv"
                },
                "slice": {
                    "rows": [
                        {
                            "uniqueName": "Category"
                        }
                    ],
                    "columns": [
                        {
                            "uniqueName": "Country"
                        },
                        {
                            "uniqueName": "Measures"
                        }
                    ],
                    "measures": [
                        {
                            "uniqueName": "Price",
                            "aggregation": "sum"
                        }
                    ]
                }
            }
        }
    );
    </script>
    </body>
    </html>
    
  5. In pivot_table_app/views.pycreate a view – a function that accepts a web request and returns a rendered HTML template as a web response:

    from django.shortcuts import render
    def home(request):
       return render(request, 'home.html')
    
  6. To map a URL pattern to the view, open pivot_table_app/urls.py and add the corresponding URL pattern to the urlpatterns list:

    from django.urls import path
    from . import views
    urlpatterns = [
      path('', views.home, name='pivot_table'),
    ]
    
  7. Register the application’s URL patterns at the project level. Go analytics_project/urls.py and append a new URL pattern:

    from django.contrib import admin
    from django.urls import path, include
    urlpatterns = [
       path('admin/', admin.site.urls),
       path('', include('pivot_table_app.urls')),
    ]
    

    This line of code makes all the URL patterns from pivot_table_app accessible by ‘/’ within the project.

  8. Open the command line and start the Django development server locally:

    python manage.py runserver

    Unless specified otherwise, the server runs on 8000 port by default. 

  9. Open http://localhost:8000/ in the browser and see the result: the pivot table is rendered on the page and filled with data. Slice and dice the fields to experience the full power of reporting. To stop the Django development server, press Ctrl+C.

Run a Django project sample with WebDataRocks Pivot Table

  1. Download the project as a .zip archive or clone the sample from GitHub:
    git clone https://github.com/WebDataRocks/pivot-django
    cd pivot-django
  2. Open the command line and start the Django development server locally:
    python manage.py runserver
  3. Open http://localhost:8000/ in the browser and see the result: the pivot table is rendered on the page. Add your data, configure a report, and start gaining insights right away.

    To stop the Django development server, press Ctrl+C.

See also