self updating highcharts graph

self updating highcharts graph

  

I want to do something similar to https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/ in OutSystems.  Basically if you look at the code they do:

var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);

I think what I would need to do is replace the var x and y stuff with my own query to data in my database.  Has anyone done this before or have a good idea of how to proceed?

Hi Jason,

The problem is that your database is only accessible server-side, while the script runs client-side. I think the best you could do is a setInterval that triggers a hidden button press that Ajax Submits a Screen Action that gets the new data and Ajax Refreshes the chart. Not sure whether it would look as seemless as the fiddle you supplied.

So we kept playing with it and eventually found a good way to do this.  What we did was use this as a basis https://www.highcharts.com/docs/working-with-data/live-data and then we made a rest api that returns the data for the chart.  Seems to work very well.

Cool! So you consume the REST API in JavaScript? Or is it something Highcharts can do?

Kilian Hekhuis wrote:

Cool! So you consume the REST API in JavaScript? Or is it something Highcharts can do?

We were surprised it was this easy - its all in highcharts.  If you go to jsfiddle: http://jsfiddle.net/joumr68y/ in the data section we just looked at the URL they supplied and then replaced the url with the direct url to our API.  The API does a query, then does a for each on the results of the query to spit out the data in the format that highcharts is looking for.


Hi Jason,

Thanks for the info. Is the For Each necessary? Typically an assign or ListAppendAll with mapping suffices?

Kilian Hekhuis wrote:

Hi Jason,

Thanks for the info. Is the For Each necessary? Typically an assign or ListAppendAll with mapping suffices?

Maybe you can help there - I did try making the api with an output of type list of record.  In the record was name of type text and count of type integer.  The problem was that the output was something like:

[{"X" = "some name","Y"=5}, so on] 

But highcharts wants the data to be just simple name and values for the bar chart in the form

[["some name",6],so on]

I didn't see a way to directly change the output so what I did was make the output of the api type text, then in the for each I just keep adding text to it.  It is not the most elegant (your method would be) but it gives me the format highcharts wants to see.


Now the fun part is that I want to make this clickable to drill down into sub data.  We shall see how that goes.  I think it might not be possible.

Mmm, yeah, I think it would be difficult to generate nameless pairs like that. It's possible to consume them with a trick, but I haven't seen a way to produce them.

Good luck with the drill down :).

Kilian Hekhuis wrote:

Mmm, yeah, I think it would be difficult to generate nameless pairs like that. It's possible to consume them with a trick, but I haven't seen a way to produce them.

Good luck with the drill down :).

We are kind of doing a work around - through highcharts you can have it link to a url based on an input in the data.  So we are going to link to a separate page for the drilldown which will be a static graph vs updating.


Nice work around!