Using a variable for date/time Scatter chart


« 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 dan on 30th December 2013
I am trying to take an array from a php file that is JSON encoded via ajax. I am getting success when I put it into the javascript, but when I try to use the variable in the rgraph function, the values are being duplicated. Why are the values being duplicated, and how can I prevent that?

<?php //uuu.php
...
$json_ds1631_0 = array( 'scatter' => "$senscatter_string");
//header('Content-type: application/json');
$json=json_encode($json_ds1631_0);
//json_encode($senscatter_string);
echo $json;
//echo $senscatter_string
?>



<script>
  $.ajax({
         url: "fbs.cfbtechnologies.com/uuu.php\",
         dataType: "json", //the return type data is jsonn
         success: function(data){ // <--- (data) is in json format
                 senscatter = data.scatter;
                 senscatter.toString(); //I've tried with and without this
                 document.write(senscatter);//I get correct array from php file
        
        
       },
       async: false //I have to wait for the data so it will display on graph
      
     })

...

drawScatter();
 
  function drawScatter(){
   //document.write(senscatter);//this is printing duplicate values when not commented out
   var scatter = new RGraph.Scatter('level', senscatter);
                                              
          // Set the start value to be the beginning of the day. If they're omitted time values default to 00:00:00
         scatter.Set('chart.xmin', '2013/12/23 00:00');

          // Set the end value to the end of the year
         scatter.Set('chart.xmax', '2013/12/24 23:59');
   scatter.Set('chart.ymax', 186);
                 scatter.Set('chart.ymin', -100);
 
   scatter.Set('chart.labels', ['2013/12/23 00:00', ' ', ' ', ' ', '2013/12/23 23:59', ' ', ' ', ' ', '2013/12/24 23:59']);
         scatter.Set('chart.line', true);
         scatter.Set('chart.line.colors', ['gray']);
         scatter.Set('chart.tickmarks', 'circle');
   scatter.Set('chart.title', 'Tank Level History');
   scatter.Set('chart.gutter.right', (.20*canvas.width));
   //RGraph.Effects.jQuery.Expand(scatter, {bounce: true});
         scatter.Draw();
...
</script>
Posted by RGraph support on 30th December 2013
Hi there,

Instead of using document.write() you can use the RGraph p() function that alerts your data and shows you the structure of it.

Since your data is in duplicate before you create the chart - you can go thru it and get rid of the dupes (a for loop for example).

Check the array just before you call the drawScatter function to see what it contains then.

I wouldn't have thought either that you have to call the drawScatter function manually - you could do that from your ajax success function.



Richard, RGraph Support
www.rgraph.net
Please link to the RGraph website
Posted by dan on 30th December 2013
I used the p() function just before I called drawScatter and everything is fine with the structure. When i call p() inside drawScatter it displays the message twice.

Apparently, the data is not in duplicate before the chart creation, the data is being displayed twice during the chart creation. This is what I thought was happening, but why would that be?

Also, If I place the call to drawScatter inside the ajax success function it can't do anything because it hasn't got the values from the php file, hence the async: false;.

Posted by RGraph support on 30th December 2013
Hi there,

The success function is called when the ajax call completes - that might be if the async value is true though. So you can just draw the chart inside that function.

The jQuery $.get() function does this too IIRC as well as the RGraph.AJAX.getJSON() function:

www.rgraph.net/docs/ajax-functions.html





Richard, RGraph Support
www.rgraph.net
Please link to the RGraph website
Posted by Dan on 30th December 2013
Thanks, I'll give the RGraph.AJAX.getJSON() function a go.
Posted by Dan on 31st December 2013
I've been reading that eval( is risky/unsafe to use, is that the case in RGraph.AJAX.getJSON()? I had a hard time getting your example to work, not sure how to access the data in the html file...
Posted by RGraph support on 31st December 2013
Hi there,

Normally, avoiding eval(str) is recommended because it operates in the global scope and for RGraph3 I'm looking at switching to:

var json = new Function('return ' + str);

...for that reason. eval() is used quite commonly though - the security issues arise, IIRC, because eval() operates in the global context. and so could potentially overwrite global variables. The getJSON eval line looks like this:

var json = eval('(' + this.responseText + ')');

So make sure that your server outputs a JS object (like this: {myKey: 'mystring'} and you'll (probably) be OK.


Richard
www.rgraph.net
Please link to the RGraph website. Thanks!
Posted by dan on 31st December 2013
Ok, well my JSON from my php looks like this when I visit the url:

{"scatter":"[\n[\\'2013\/12\/24 10:39:01\\', 0], ... ', 0]]"}

and I got the ajax to work with your suggestion of placing the rGraph function inside the success callback and then using eval:

  $.ajax({
       url: "uuu.php",
       dataType: "json",
       success: function(data){
         var canvas = document.getElementById('level'),
      context = canvas.getContext('2d');
   canvas.width = window.innerWidth;
   canvas.height = 300;
   senscatter = eval(data.scatter);
  
   var scatter = new RGraph.Scatter('level', senscatter);
                 
     // p(senscatter);
          // Set the start value to be the beginning of the day. If they're omitted time values default to 00:00:00
         scatter.Set('chart.xmin', '2013/12/24 00:00:00');

          // Set the end value to the end of the year
         scatter.Set('chart.xmax', '2013/12/24 23:59:59');
   scatter.Set('chart.ymax', 186);
   scatter.Set('chart.ymin', -186);
 
   scatter.Set('chart.labels', ['2013/12/24 00:00:00', ' ', ' ', ' ', '2013/12/24 12:00:00', ' ', ' ', ' ', '2013/12/24 23:59:59']);
         scatter.Set('chart.line', true);
         scatter.Set('chart.line.colors', ['gray']);
         scatter.Set('chart.tickmarks', 'circle');
   scatter.Set('chart.title', 'Tank Level History');
   scatter.Set('chart.gutter.right', (.20*canvas.width));
   //RGraph.Effects.jQuery.Expand(scatter, {bounce: true});
         scatter.Draw();

I plan on having a lot more arrays and variables coming from that php file and others into this file as well as others. Should I not worry so much about eval( if I am using it in this fashion? (btw my domain is going to be https/SSL)
Posted by RGraph support on 31st December 2013
Hi there,

Not really. Just ensure that your uuu.php script sends valid JSON and you'll be fine.



Richard, RGraph Support
www.rgraph.net
Please link to the RGraph website

Add a reply

 




« Back to message list
RGraph on social media