Integration with amCharts
This step-by-step tutorial will help you integrate WebDataRocks with amCharts. Our tutorial is based on the V4 of amCharts.
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. As a result, any chart type will work with WebDataRocks Pivot Table.
Here is the list of demos that show how to integrate different chart types with WebDataRocks:
- Column Chart (demo)
- Line Chart (demo)
- Stacked Column Chart (demo)
- Bar Chart (demo)
- Clustered Bar Chart (demo)
- Stacked Bar Chart (demo)
- Radar Chart (demo)
- Bubble Chart (demo)
- Pie Chart (demo)
- Semi-circle Pie Chart (demo)
- Donut Chart (demo)
- Nested Donut Chart (demo)
- Radar Chart with switched axes (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 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: "Measures",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
},
],
},
},
});
The fields you’ve specified in the report will be shown on the chart.
Step 2. Add amCharts
Step 2.1. Include the scripts for amCharts into your web page:
<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.
Step 2.2. Apply the theme imported in the previous step:
am4core.useTheme(am4themes_animated);
Step 2.3. Add a container to your web page where the chart should be rendered:
<div id="amcharts-container"></div>
Step 3. Show the data from the pivot table on the chart
Step 3.1. Include the WebDataRocks Connector for amCharts:
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.amcharts.js"></script>
The Connector provides the amcharts.getData() method, which gets data from WebDataRocks and converts it to the format required by amCharts.
Step 3.2. If the amcharts.getData() method is called before WebDataRocks is fully loaded, an empty result will be returned. To ensure that WebDataRocks is ready to provide data for the chart, handle the reportcomplete event:
const pivot = new WebDataRocks({
container: "#pivot-container",
toolbar: true,
report: {
// ...
},
reportcomplete: function() {
pivot.off("reportcomplete");
createChart();
}
});
Now the chart will be created only when the data is loaded and the report is ready.
Step 3.3. Declare a variable for the chart:
let chart;
Step 3.4. Implement the createChart() function using the amcharts.getData() method from the Connector:
function createChart() {
pivot.amcharts.getData({},
// Function called when data for the chart is ready
drawChart,
// Function called on report changes (filtering, sorting, etc.)
drawChart);
}
Step 3.5. Implement the drawChart() function specified in the previous step. drawChart() initializes the chart, sets all the configurations specific for this chart type, and fills it with the data provided by WebDataRocks:
function drawChart(chartConfig, rawData) {
// Create a chart instance
// The selector must match the id of the <div> container for the chart
chart = am4core.create("amcharts-container", am4charts.XYChart);
// Add data processed by WebDataRocks to the chart
chart.data = chartConfig.data;
// Create category axis for a column chart
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = pivot.amcharts.getCategoryName(rawData);
// Create value axis
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create and configure series
let 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 the name of the category to the category axis using the webdatarocks.amcharts.getCategoryName() method:
categoryAxis.dataFields.category = pivot.amcharts.getCategoryName(rawData);
This method 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.
Step 3.6. Set the autoDispose global option to true. As a result, the chart will be automatically disposed when it is necessary:
am4core.useTheme(am4themes_animated);
am4core.options.autoDispose = true;
Step 4. See the result
Open your web page in the browser to see how the pivot table looks in combination with amCharts.
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.
To learn more about chart customization, please refer to the amCharts Documentation.
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 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>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.amcharts.js"></script>
</head>
<body>
<div id="pivot-container"></div>
<div id="amcharts-container"></div>
<script>
am4core.useTheme(am4themes_animated)
am4core.options.autoDispose = true;
let chart;
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: "Measures",
},
],
measures: [
{
uniqueName: "Price",
aggregation: "sum",
},
],
},
},
reportcomplete: function() {
pivot.off("reportcomplete");
createChart();
}
});
function createChart() {
pivot.amcharts.getData({},
drawChart,
drawChart);
}
function drawChart(chartConfig, rawData) {
chart = am4core.create("amcharts-container", am4charts.XYChart);
chart.data = chartConfig.data;
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = pivot.amcharts.getCategoryName(rawData);
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
let series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryX = pivot.amcharts.getCategoryName(rawData);
series.dataFields.valueY = pivot.amcharts.getMeasureNameByIndex(rawData, 0);
}
</script>
</body>
</html>
Live example
Interact with the following sample where WebDataRocks Pivot Table is integrated with amCharts to see how they work together:
See the Pen amCharts column chart minimal configuration and Pivot Table by WebDataRocks (@webdatarocks) on CodePen.