Skip to Content
1
Nov 20, 2013 at 10:49 PM

SAPUI5 VIZ Charts and streaming data

362 Views

Hi,

We are trying to use the sap.viz charting library to display streaming data (ongoing data via websockets).

Unfortunately it looks like it is currently not possible to display new data points without redrawing the chart.

Our current minimal test code for the looks like this:

1. Creating a JSON model with a few data objects

var bizData = [        {Country :"Canada",revenue:410.87,profit:141.25, population:34789000},        {Country :"China",revenue:338.29,profit:133.82, population:1339724852},        {Country :"France",revenue:487.66,profit:348.76, population:65350000}    ];var oModel = new sap.ui.model.json.JSONModel({    businessData : bizData}); 

2. Defining a dataset and a simple line chart as described in the SDK documentation. Setting the model of the chart and placing the chart at a defined DOM element.

  var oDataset = new sap.viz.ui5.data.FlattenedDataset({    dimensions : [         {            axis : 1,            name : "Country",             value : "{Country}"        }     ],    measures : [         {            name : "Profit",            value : "{profit}"         }    ],    data : {        path : "/businessData"    } });var oChart = new sap.viz.ui5.Line({    width : "300px",    height : "300px",    title : {        visible : false,        text : 'Profit and Revenue By Country'    },    legend: {        visible: false    },    dataset : oDataset});oChart.setModel(oModel);oChart.placeAt("graph_area", "only");

To simulate a incoming new data point we simply push an additional data object to the bizData array after a timeout of 2000 ms:

setTimeout(function(){addBizData()}, 2000);function addBizData(){    bizData.push({Country :"Germany",revenue:470.23,profit:217.29, population:81799600});    oModel.refresh();}

In order to display the new data point of Germany on the line chart a oModel.refresh() is required which unfortunately triggers a redraw of all data points.

As VIZ Charts are basically based on D3.js I'm wondering if there is a way to realize something similar to this example http://bost.ocks.org/mike/path/ - a graph which is adding the new datapoints on the right and shifting the old datapoints to the left.

Any help or ideas would be highly appreciated. Not happy about the idea drawing x- and y- axis with D3 ;-)

Regards,

Andreas