This guide will walk you through the process of integrating WebDataRocks with Vue.js.
Before starting, make sure that Node.js is installed on your machine.
Next, choose one of the following guides:
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.
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. Unless you already have a Vue 2 project, create one with the following command:
npm create vue@2
During the creation process, you will be prompted to choose configurations for your project. Choose No for all the configs for simplicity.
Step 2. Install npm packages for the project:
cd <project-name> npm install
Step 3. Get the WebDataRocks Vue wrapper from npm:
npm install @webdatarocks/vue-webdatarocks
Step 4. Register 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 5. Add Pivot 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
/>
</div>
</template>
Note that the <template> must contain only one root <div> element.
Step 6. Run your app:
npm run dev
Your WebDataRocks & Vue 2 project will be available at http://localhost:5173/.
You can shut down the app with Ctrl + C.
Follow the steps below to integrate WebDataRocks with Vue 3.
Step 1. If you don’t have a Vue 3 project, create one:
npm create vue@3
During the creation process, you will be prompted to choose configurations for your project. Choose No for all the configs for simplicity.
Step 2. Install npm packages for the project:
cd <project-name> npm install
Step 3. Install WebDataRocks from npm:
npm install @webdatarocks/webdatarocks
Step 4. Download the Pivot.vue file from our GitHub and place it in the src/components/ folder.
Step 5. 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 6. 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 7. Import WebDataRocks CSS:
<script setup> import Pivot from "./components/Pivot.vue"; import "@webdatarocks/webdatarocks/webdatarocks.css"; </script>
Step 8. Add WebDataRocks to the <template> tag of the component (e.g., src/App.vue):
<template>
<Pivot
toolbar
report="https://cdn.webdatarocks.com/reports/report.json"
/>
</template>
Step 9. Run the app:
npm run dev
Your WebDataRocks & Vue 3 project will be available at http://localhost:5173/.
You can shut down the app with Ctrl + C.
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.
This guide contains a list of available chart connectors and their methods.
Сhart connectors are ready-to-use scripts that help integrate WebDataRocks with JavaScript charting libraries.
Each connector contains methods that request data from the pivot table and preprocess it according to the format required by the used charting library.
To integrate with other charting libraries, use the getData() method.
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.
/* 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;
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 + "')}";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.
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");
}
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.
amcharts.getMeasureNameByIndex():
var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = webdatarocks.amcharts.getMeasureNameByIndex(rawData, 0);
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.
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = pivot.amcharts.getCategoryName(rawData);
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.
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:
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.
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.
<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.
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.amcharts.js"></script>
<div id="chartContainer"></div>
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.
var chart;
Note that the variable should be accessible by the functions that draw and redraw the chart.
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.
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.
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.
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.
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:
thousandsSeparatordecimalSeparatordecimalPlacesmaxDecimalPlacescurrencySymbolcurrencySymbolAlignisPercentHere’s an example of the formatting string returned by the method:
$#,###.00
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 + "')}";
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.
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.
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.
To successfully add WebDataRocks Pivot Table to a Django application, follow the next steps:
Step 1. If you’re building an app from scratch, create a Django project by running the following commands:
django-admin startproject analytics_project cd analytics_project
Step 2. Create a new application inside the project:
python manage.py startapp pivot_table_app
Step 3. Go to analytics_project/settings.py and register the app’s name to the INSTALLED_APPS list to make the app accessible at the project level:
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 you can always check the exact name of the application in the your_app/apps.py file.
Step 4. Add an app-specific template.
Start by creating a templates folder within the app’s directory (pivot_table_app). Here, we will keep the HTML templates for the application. Then, 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>
Note that you also can create templates at the project level.
Step 5. In pivot_table_app/views.py create 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')
Step 6. Open pivot_table_app/urls.py and map a URL pattern to the view in the urlpatterns list:
from django.urls import path
from . import views
urlpatterns = [
path('', views.home, name='pivot_table'),
]
Step 7. Register the application’s URL patterns at the project level. Go to 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.
Step 8. Open the command line and start the Django development server locally:
python manage.py runserver
The server runs on the 8000 port by default.
Step 9. Open http://localhost:8000/ in the browser and see the result: the pivot table is rendered on the page and filled with data.
To stop the Django development server, press Ctrl+C.
Step 1. Download or clone our sample project from GitHub:
git clone https://github.com/WebDataRocks/pivot-django cd pivot-django
Step 2. Open the command line and start the Django development server locally:
python manage.py runserver
Step 3. Open http://localhost:8000/ in the browser and see the result: the pivot table is rendered on the page.
To stop the Django development server, press Ctrl+C.
This tutorial will guide you through the process of integrating WebDataRocks Pivot Table with Jupyter – a web-based interactive application for sharing notebooks with live code, visualizations, text, and other media. As a result, you will get a notebook empowered with a pivot table for interactive data exploration and data analysis.
Before installing a Jupyter environment, make sure Python is installed on your machine. Jupyter requires Python 3.3 or greater, or Python 2.7.
Next, start using Jupyter in one of the following ways:
To integrate WebDataRocks Pivot Table with Jupyter, follow the next steps:
Step 1. Start the notebook server. Then, create a new Notebook or open the existing one.
You can start the notebook server in the following ways:
Step 2. Import the following Python libraries into the notebook:
IPython.display – an API for display tools in IPython. From this module, import only the HTML class for rendering the HTML content in the notebook.json – a module for serializing and de-serializing Python objects.pandas – a library for working with data frames.from IPython.display import HTML import json import pandas as pd
Step 3. Define a function that accepts JSON-formatted string and renders it as a pivot table on the HTML page:
def pivot(webdatarocks_json_object):
code = '''
<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<h1>WebDataRocks Integration with Jupyter</h1>
<div id="pivot-container"></div>
<script>
new WebDataRocks({0});
</script>
'''.format(webdatarocks_json_object)
return HTML(code)
Step 4. Create a pandas DataFrame and fill it with data. The data can come from a CSV/JSON/Excel file, SQL database, or other type of storage. For simplicity, we will use the static inline data:
df = pd.DataFrame(
[["Apple pie", "20"], ["Lemon cake", "30"]],
index=["row 1", "row 2"],
columns=["Product", "Quantity"],
)
Step 5. Convert the DataFrame to a JSON string:
json_data = df.to_json(orient='records')
Note that it’s important to set the orient parameter to 'records'. This way, the object will be translated into a list-like structure: [{column -> value}, … , {column -> value}]. This structure corresponds to the format of a JSON data source accepted by WebDataRocks.
Step 6. Create an instance of WebDataRocks using the dictionary as follows:
webdatarocks = {
"container": "#pivot-container",
"width": "100%",
"height": 430,
"toolbar": True,
"report": {
"dataSource": {
"type": "json",
"data": json.loads(json_data)
},
"slice": {
"rows": [
{
"uniqueName": "Product"
}
],
"columns": [
{
"uniqueName": "[Measures]"
}
],
"measures": [
{
"uniqueName": "Quantity",
"aggregation": "sum"
}
]
}
}
}
Here we have specified the initialization parameters and set the slice. For connecting to a data source, we have decoded JSON using the json.loads() method and set the response to the dataSource.data property of the pivot table.
Step 7. Use json.dumps() to encode the webdatarocks object to a JSON-formatted string.
webdatarocks_json_object = json.dumps(webdatarocks)
Step 8. Pass the JSON-formatted string with the pivot table’s configuration to the previously defined pivot function:
pivot(webdatarocks_json_object)
Step 9. Run the code contained in the notebook’s cells by selecting Run > Run All Cells. You can also run the cells separately, one after another.
The pivot table component will be rendered as an output of the cell where the pivot function is called.
Step 1. Download or clone our sample project from GitHub:
git clone https://github.com/WebDataRocks/pivot-jupyter-notebook/
Step 2. Start the notebook server. You can do it in the following ways:
Step 3. Import the WebDataRocks_in_Jupyter_Notebook.ipynb file into the Jupyter working directory.
Step 4. Run the code in the notebook’s cells by selecting Run > Run All Cells. You can also run the cells separately, one after another.
The pivot table component will be rendered as an output of the cell where the pivot function is called.