SAPUI5 VIZ Charts and streaming data

[Andreas_Wiedema]

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

[Andreas_Wiedema]

I wan't to bring this up again as we didn't find a solution within the SAP product portfolio. Startet to build graphs with D3 but would still like to know if there is a solution from SAP for real time graphing.

Thanks!

[Former Member]

Hi Andreas,

I was just experimenting with this and you can embed the D3 example you gave using sap.ui.core.HTML (SAPUI5 SDK - Demo Kit)  to include a reference DIV  and appropriate afterRendering function.

It would be nice if a standard sap.viz chart was enhanced to include this.

Just let me know if you want the example code I used for this quick test.

Cheers

Aron

[Andreas_Wiedema]

Hi Aron,

Thanks for your reply and for sharing your ideas.

That's exactly what we are currently doing as it looks like there is no "build in" feature in SAPUI5 (openUI5) for real time graphing.

The target of the question was rather if there is a way to build it with native SAPUI5 and avoid using D3 directly.

Cheers

Andreas

[former_member200689]

Hey Andreas

I am also trying to show streaming data but could not find any info on such a chart-control. Do you know if SAPUI5 now supports real-time charts like D3.

Thanks.

Cheers

Rusheel