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

[Former Member]

Hey Andreas,

To be honest it's a bit of a moot point in the examples I'm playing with because at least with HANA you can't fire events from the database to UI5. I understood there was a project underway to do this. Have you found any way to achieve this?

That said, I think that sap.viz is a really under-developed part of SAPUI5 - I'd like to see some heavier development going on including a richer set of visualizations like bubble charts, multiple dimensions etc.

Hoping someone like Former Member may notice 🙂

John

[Former Member]

Hi John,

You will find bubble charts etc in the viz library.

And you can get DJ to lobby for you in Walldorf

SAPUI5 SDK - Demo Kit

[Former Member]

Thanks, this is really handy. If you navigate the way I do, you end up here:

SAPUI5 SDK - Demo Kit

Which I guess is an old version of the demo. The one you showed me is much neater, though I do like the ability to copy/paste code.

🙂

[Former Member]

Hi Andreas/John,

I'd love to see the feature in SAPUI5 Viz but in the meantime I just uploaded my example here.

Instead of using Javascript random() every second to update the D3 Chart example (by Mike Bostocks),  I've called "select rand() from dummy" using HANA XSJS, to demonstrate getting near real-time data from HANA.

http://scn.sap.com/community/developer-center/hana/blog/2014/01/21/dynamic-charts-in-hana-xs

Cheers

Aron

[Former Member]

Hi Aron,

is the same thing possible with bar graph..??

Is there any thread which has real time update to the graphs..??

We have a application which displays a bar  graph and a line graph and some gauges,which needs to be updated real time with streaming data.

Is this possible..??

Thanks,

Vinod.

[agentry_src]

Hi Vinod,

Please create a new Discussion as you are changing the topic of this Discussion (also known as hijacking in the Rules of Engagement).  See the Getting Started link at the top right to review those rules.

Cheers, Mike (Moderator)

SAP Technology RIG

[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