Integrating with WebDataRocks

This short intro tutorial will show how to connect your data stream with client-side grid library - WebDataRocks - and use it to visualize in amCharts 4.

Introduction

Before we begin with WebDataRocks, we suggest familiarizing with getting started tutorials on their website.

In this tutorial we will provide only basics of the data loading, grid initialization, and their relation to charts. For a more in-depth information visit WDR's amCharts integration tutorial.

Using grid data in chart

Loading data into grid

We're going to use a simple JSON file as bases for our tests:

[{
  "quarter": "2000 Q1",
  "value1": 1587,
  "value2": 650,
  "value3": 121
}, {
  "quarter": "2000 Q2",
  "value1": 1567,
  "value2": 683,
  "value3": 146
}, {
  "quarter": "2000 Q3",
  "value1": 1617,
  "value2": 691,
  "value3": 138
}, {
  "quarter": "2000 Q4",
  "value1": 1630,
  "value2": 642,
  "value3": 127
}, {
  "quarter": "2001 Q1",
  "value1": 1660,
  "value2": 699,
  "value3": 105
}, {
  "quarter": "2001 Q2",
  "value1": 1683,
  "value2": 721,
  "value3": 109
}, {
  "quarter": "2001 Q3",
  "value1": 1691,
  "value2": 737,
  "value3": 112
}, {
  "quarter": "2001 Q4",
  "value1": 1298,
  "value2": 680,
  "value3": 101
}, {
  "quarter": "2002 Q1",
  "value1": 1275,
  "value2": 664,
  "value3": 97
}, {
  "quarter": "2002 Q2",
  "value1": 1246,
  "value2": 648,
  "value3": 93
}, {
  "quarter": "2002 Q3",
  "value1": 1218,
  "value2": 637,
  "value3": 101
}, {
  "quarter": "2002 Q4",
  "value1": 1213,
  "value2": 633,
  "value3": 87
}, {
  "quarter": "2003 Q1",
  "value1": 1199,
  "value2": 621,
  "value3": 79
}, {
  "quarter": "2003 Q2",
  "value1": 1110,
  "value2": 210,
  "value3": 81
}, {
  "quarter": "2003 Q3",
  "value1": 1165,
  "value2": 232,
  "value3": 75
}, {
  "quarter": "2003 Q4",
  "value1": 1145,
  "value2": 219,
  "value3": 88
}]

URL: https://assets.codepen.io/t-160/sampledata.json

Let's init a grid using our file as a data source:

var wdr = new WebDataRocks({
  "container": "#datadiv",
  "toolbar": true,
  "report": {
    "dataSource": {
      "dataSourceType": "json",
      "filename": "https://assets.codepen.io/t-160/sampledata.json"
    },
    "options": {
      "showAggregationLabels": false
    },
    "slice": {
      "rows": [{
        "uniqueName": "quarter"
      }],
      "columns": [{
        "uniqueName": "Measures"
      }],
      "measures": [{
        "uniqueName": "value1",
        "aggregation": "sum"
      }, {
        "uniqueName": "value2",
        "aggregation": "sum"
      }, {
        "uniqueName": "value3",
        "aggregation": "sum"
      }]
    }
  }
});

Here's what we have so far:

See the Pen amCharts 4: Integration with WedDataRocks by amCharts team (@amcharts) on CodePen.24419

Hooking up the chart

Now that we have data loaded and displayed in a grid, let's hook up a live chart to it.

The idea is to set up functions for a) creating the chart when grid is loaded; b) updating chart data whenever values in grid are updated.

For that we can use WDR's reportcomplete callback option.

We'll use WDR's amcharts.getData() method to trigger data update on a chart we have pre-created without data.

var wdr = new WebDataRocks({
  // ...
  "reportcomplete": function() {
    wdr.amcharts.getData({}, function(chartData, rawData) {
      chart.data = chartData.data;
    });
  }
});

Here's a full demo:

See the Pen amCharts 4: Integration with WebDataRocks by amCharts team (@amcharts) on CodePen.24419

Using chart data in grid

Now, let's turn the tables.

Suppose we already have a chart with data, which we want to display in grid.

We can use chart's datavalidated event to catch the moment when new data is parsed, then feed it to a WDR grid.

Since our WDR grid depends on chart data, we'll wrap WDR code into a function and call it when chart's data loads.

Subsequent chart data updates can be synced to grid using its updateData() method:

chart.events.on("datavalidated", function(ev) {
  if (chart.data.length) {
    if (wdr) {
      wdr.updateData({
        data: newData
      });
    }
    else {
      initWDR(chart.data);
    }
  }
});

Live example:

See the Pen amCharts 4: Send data from amCharts to WebDataRocks Pivot by amCharts team (@amcharts) on CodePen.24419