The title of the chart does not update when redrawing

Share RGraph:   To help my Google visibility (it can't get much worse!), if you like and use RGraph I'd appreciate it if you could link to me

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by trent on 20th December 2016
Hi,

For instance the following code will produce the title as "title1" even though it should be "title2".

function titleExample() {
  currentLine = new RGraph.Line("trace-canvas", currentData);


  RGraph.clear(document.getElementById("trace-canvas"));
  currentLine.set({
   title: "title1",
  }).draw();


  RGraph.clear(document.getElementById("trace-canvas"));
  currentLine.set({
   title: "title2",
  }).draw();
}

Please note that if you were to run this at the end of the function it would return "title2" it's just not displayed to the canvas:
console.log(currentLine.get('title'))

The only way to get the title to change on the canvas it would appear is to re-initialize the graph. I don't want to do this if I can avoid it. Funnily you can change the labels dynamically with no issue.
Posted by Richard on 20th December 2016
Hi there,

Judging by the style of the constructor that you're using I'm guessing that you may be using an older version. In more recent(ish) versions the title is no longer cached along with the background grid.

So what you can do is clear the cache before you redraw the chart by doing this:

RGraph.cache = [];

Or you could also try upgrading to version 4.59, but try the above first because it's far simpler to do.




Richard
Posted by trent on 20th December 2016
Thanks for the response Richard,

It seems that "RGraph.cache = [];" has enormous overhead. I'm trying to plot a graph in real time at approx 20Hz (data streamed via a websocket). To achieve this it's untenable to hold more than a few seconds worth of data but it's discrete events rather than continuous with each event lasting up to 60 seconds. So I limit the datapoints to 100 and every time it hits 100 datapoints I simply throw out every other point (to reduce to 50) and continue onward (now only adding every other data point etc). Anyway this cache clear looks to only be able to operate at maybe 1Hz so it's no good for application. So I guess I'll try updating the RGraph. I don't know what my version number is per say, but each of the RGraph.js files has "// version: 2016-02-06" at the top.

Cheers, Trent.
Posted by trent on 20th December 2016
So I've updated the RGraph and it would appear that it's no longer able to update at 20Hz (probably because you've amended what gets cached) I can nerf it by about 3 fold to 6Hz to get it to display semi-smoothly on my laptop but really I need to nerf it 5-fold to about 4Hz (and maybe further to encompass less-capable client machines). I think I'll stick with the old version with it's defunct titling.

Cheers, Trent.
Posted by Richard on 20th December 2016
Hi there,

Try the new version but add this to your configuration:

...
textAccessible: false
...

Recent versions of RGraph use DOM text instead of native canvas text for better text rendering and accessibility but DOM text is not fast at all.

Setting textAccessible to false disables this and reverts to using native canvas text - which is not accessible but it's far faster.




Richard
Posted by trent on 21st December 2016
Doesn't appear to make even a small difference.

For reference I'm using it like this:

function drawTrace(currentData, title) {
  currentLine.original_data[0] = currentData;
  currentLine.set({
   title: title,
   textAccessible: false,
   labels: getLabels(currentData.length)
  }).draw();
}

With that function being called when the websocket receives data (at about 20Hz).

Ah well it's no biggy, I can just put the title in an external DOM. The title itself doesn't actually require rapid updating but the new version of RGraph seems incapable of keeping up to this 20Hz irrespective of the titling issue.

Cheers for your Time,
Trent.
Posted by trent on 21st December 2016
Ok here's my solution (using the old version of RGraph as the new one just can't operate at these speeds):

function drawTrace(currentData, title) {
  if (currentLine.get('title') !== title) {
   RGraph.cache = []; //if title has changed clear the canvas cache to display it.
  }

  currentLine.original_data[0] = currentData;
  currentLine.set({
   title: title,
   labels: getLabels(currentData.length)
  }).draw();
}

Cheers for your help Richard!
Posted by Richard on 21st December 2016
Hi there,

Rgraph can handle that sort of speed quite easily. For example here's a chart that updates at 60fps:

www.rgraph.net/demos/line-dynamic-updates.html


Richard

Add a reply




« Back to message list