original_data equivalent in scatter plots


« 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 Joakim Lindén on 30th July 2013
Hi!

I'm trying to create a scatter chart that updates once a second. The new data is received as a JSON struct which I parse to build an array which is fed into the constructor when the plot is created. I followed the example given for a line plot to use the window.__rgraph_scatter__ to get a global variable which can be reused.

This seem to work for the initial drawing of the graph (when the page loads).
However, my problem is when I try to update the graph I don't seem to get my new values into the graph, but rather I get only 0s. I'm using (in the last else clause below) the window.__rgraph_scatter__.data property and set it to my new data set, I guess somewhere here I'm doing something wrong. the window.point_ary is declared globally (window.point_ary = {};) and then in the DrawGraph function it is padded to the correct length.

Any thoughts or pointers are highly appreciated!

Cheers,

Joakim


function DrawGraph () {
var point = ['2013-07-20 02:02:56', 1];
window.point_ary = RGraph.array_pad(point, json_data.length, point);

for(i=0;i<json_data.length;i++)
{
  window.point_ary[i] = [(json_data[i].time), parseFloat(json_data[i].power)];
}

RGraph.Clear(document.getElementById("cvs"));
RGraph.ObjectRegistry.Clear();
   
if (!window.__rgraph_scatter__)
{
  window.__rgraph_scatter__ = new RGraph.Scatter('cvs', window.point_ary);
  //... set a bunch of properties here
  window.__rgraph_scatter__.Draw();
}
else
{
  window.__rgraph_scatter__.data = window.point_ary;
  //... update min and max properties
  window.__rgraph_scatter__.Draw();
}

}
Posted by RGraph support on 31st July 2013
Hi there,

Try changing this line:

window.__rgraph_scatter__.data = window.point_ary;

To:

window.__rgraph_scatter__.data[0] = window.point_ary;

Because the Scatter chart can accept multiple datasets. The data variable should be a 3d array. Which you will be able to see if you use the p() function (an RGraph function) to print it.



Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site
Posted by Joakim Lindén on 31st July 2013
Thanks for your quick answer!

it didn't solve my problem completely, but it changed one thing. Before the change the scale of the vertical axis (I'm using automatic scaling) was correctly set for the initial load but changed to 0.0 -- 1.0 scale at the first reload. When I added [0] as suggested the scales didn't change upon reload, indicating to me that part of the data has entered correctly, but maybe not the x values. I investigated the window.__rgraph_scatter__.data as suggested (p-function) and found that there is some parsing/evaluation done in the constructor resulting in the following differences in the data struct:

from the constructor (i.e. the first time I do p(window.__rgraph_scatter__.data):
Object
(
  0 => Object
     (
      0 => Object
         (
          0 => 1375303957000
          1 => 437
          2 =>
         )
      1 => Object
         (
          0 => 1375303966000
          1 => 437
          2 =>
         )


and, when I update this manually:
Object
(
  0 => Object
     (
      0 => Object
         (
          0 => "2013/07/31 22:52:37"
          1 => 437
         )
      1 => Object
         (
          0 => "2013/07/31 22:52:46"
          1 => 437
         )


Comments:
1. The "2 => " element is not present at all, I assume it is defaulted to "nothing" in the constructor. what should I set it to, to get the same value? I've tried null or '' but it doesn't seem to be the same.

2. The "0 => " element is not evaluated, how should I convert it to a number the way the constructor does?


Posted by RGraph support on 1st August 2013
Hi there,

Your problem may be this line:

0 => "2013/07/31 22:52:46"

You seem to be setting the X value to a date string. This is fine when you're first creating the object but the conversion of the date to a number is done in the constructor. So subsequently setting the data directly bypasses this conversion.

Fortunately it's easy to convert to a number (just like what happens in the constructor):

var x = Date.parse("2013/07/31 22:52:46");

And then you can use the resulting number in place of the date string.




Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site
Posted by Joakim Lindén on 1st August 2013
Thanks, I just realized the code for the constructor is of course available, since it's open source. I found the Date.parse in there and indeed it solved my problem.

Thanks for your swift support!

I have another minor query regarding the labels on the graph.

It seems that the spacing of the labels is different if I compare a line plot with a scatter dito. In the former my leftmost and rightmost labels align with the left and right edge of the plot (respectively), whereas in the latter the whole label section is squeezed together so that the center label (i.e. 1:30 below) is the only correctly aligned label.

I've included the 'Set's I think could have a say in the layout of the labels.

Cheers, Joakim

window.__rgraph_scatter__.Set('chart.background.grid.autofit', true);
window.__rgraph_scatter__.Set('chart.background.grid.autofit.numvlines', 12);
window.__rgraph_scatter__.Set('chart.background.grid.autofit.align', true);
window.__rgraph_scatter__.Set('chart.gutter.left', 40);

window.__rgraph_scatter__.Set('chart.numxticks', 12);
window.__rgraph_scatter__.Set('chart.labels.position', edge');
window.__rgraph_scatter__.Set('labels', ['3m','o', '2:30','o','2m','o','1:30','o','1m','o','30s','o', 'Nu']);

Posted by RGraph support on 2nd August 2013
Hi there,

Because the Scatter chart labels do not correspond with a specific point - their positioning is slightly different to the Line. Each label could be considered as applying to a "section" instead of a specific point.

You can't change it - but what you could do is turn the X axis off and instead usea drawing API X axis which allows you to configure it.




Richard, RGraph Support

Help support RGraph - single site license only £99!
   www.rgraph.net/license#single-site

Add a reply

 




« Back to message list
RGraph on social media