PHP array into a Scatter chart

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 Mark Carter on 21st May 2016
I am very new to RGraph.
I have an array in php called $arrData["Data"]. It has two variables, both numeric, and I want to plot these on a scatter plot.
This is the script that I am using, but I am sure it's incorrect. A chart appears but it is empty.
How do correct this so it will work please?

<script>
     window.onload = function ()
     {
         var data1 = <?php echo json_encode($arrData["Data"]) ?>;
        
         var scatter = new RGraph.Scatter({
             id: 'cvs',
             data: [data1],
             options: {
                 backgroundGridAutofitNumvlines: 12,
                 textAccessible: true
             }
         }).draw();
     };
</script>
Posted by Richard on 21st May 2016
Hi,

I think that all you need to do is specify an xmax option to set the maximum that the X axis will display. If you want to show a year this could be 365 for example, or if you want to show a week it could be 7. Something like this:

  var scatter = new RGraph.Scatter({
      id: 'cvs',
      data: [data1],
      options: {

          // Add a maximum for the X axis
          xmax: 365

          backgroundGridAutofitNumvlines: 12,
          textAccessible: true
      }
  }).draw();





Richard
Posted by Mark Carter on 23rd May 2016
Thanks for getting back to me Richard.

The x-axis is a variable in my array.

So, my array will look something like this:

"ld" = 0.3, 0.6, 1.2, 1.9
"rv" = -0.4, -0.0, 0.5, 0.9

Both "ld" and "rv" sets of values are in the php array called $arrData["Data"].

I would like "ld" to be the y-axis and "rv" to be the x-axis, with the 4 data points plotted accordingly.

Any help appreciated.

Mark
Posted by Richard on 23rd May 2016
Hi there,

Then you could do something like this:



<?php
     $arrData['Data'] = array(
         "ld" => array(0.3, 0.6, 1.2, 1.9),
         "rv" => array( -0.4, 0.0, 0.5, 0.9)
     );
    
     $data = json_encode($arrData['Data']);
?>


<script>
     src = <?php echo $data ?>;
     data = [];
    
     for (var i=0; i<src.ld.length; ++i) {
         data.push([src.ld[i], src.rv[i]]);
     }
</script>


You could then use the data array with your Scatter chart.





Richard
Posted by Mark Carter on 24th May 2016
Thanks for taking the time again Richard. However I still am unsure exactly how to use the data array with the scatter chart.

I have used your code above, and then what?

I have:

<?php
$data = json_encode($arrData['Data']);
?>
    
<script>
src = <?php echo $data ?>;
data = [];
for (var i=0; i<src.ld.length; ++i) {
data.push([src.ld[i], src.rv[i]]);
}

window.onload = function ()
{
var scatter = new RGraph.Scatter({
id: 'cvs',
data: $arrData['Data'];
options: {
        backgroundGridAutofitNumvlines: 12,
        textAccessible: true
        }
        }).draw();
     };
</script>
            
<canvas id="cvs" width="600" height="200">
     [No canvas support]
</canvas>
Posted by Richard on 24th May 2016
Hi,

After you do that code (that I posted) you could then use it to create your chart:




<script>
     var scatter = new RGraph.Scatter({
         id: 'cvs',

         // Here the label and the variable name
         // happen to be the same
         data: data,

         options: {
             backgroundGridAutofitNumvlines: 12,
             textAccessible: true
         }
     }).draw();
</script>


<canvas id="cvs" width="600" height="200">
      [No canvas support]
</canvas>







Richard
Posted by Mark Carter on 25th May 2016
OK - I tried exactly that - but no chart appears, just blank space.

Here is the <head> code:

<head>
<link rel="stylesheet" href="style.css">
<script src="RGraph/libraries/RGraph.common.core.js"></script>
<script src="RGraph/libraries/RGraph.scatter.js"></script>
<script src="RGraph/libraries/RGraph.common.dynamic.js"></script>
</head>

And here is the code that you have helped with:

<?php
$data = json_encode($arrData['Data']);
?>
    
<script>
      src = <?php echo $data ?>;
      data = [];
    
      for (var i=0; i<src.ld.length; ++i) {
          data.push([src.ld[i], src.rv[i]]);
      }
</script>

<script>
      var scatter = new RGraph.Scatter({
          id: 'cvs',

          // Here the label and the variable name
          // happen to be the same
          data: data,

          options: {
              backgroundGridAutofitNumvlines: 12,
              textAccessible: true
          }
      }).draw();
</script>
  
            
<canvas id="cvs" width="600" height="200">
     [No canvas support]
</canvas>


I wonder whether the problem is because of the array $arrData['Data'] and the way it is constructed?
When I echo $data after the line "$data = json_encode($arrData['Data']);", I get:

[{"ld":"0.35614","rv":0.24349555412625},{"ld":"0.84800","rv":-0.32906936661946},{"ld":"0.41143","rv":0.18244075177118},{"ld":"1.63227","rv":-0.17570669185289},{"ld":"0.84800","rv":0.052397407794944},{"ld":"1.07039","rv":-0.50674627736103},{"ld":"0.48543","rv":0.5835506153252},{"ld":"1.03562","rv":0.39591320240103},{"ld":"0.79077","rv":-0.015791029142252},{"ld":"0.58496","rv":-0.70114105329482}]

Your help will be appreciated - I'm sure it's something simple but I have tried so many things to fix it and still no luck!
Posted by Richard on 26th May 2016
Hi there,

There's an example here:

www.rgraph.net/tests/aa_data-structure.html

You'll need to view-source of course.





Richard

   Twitter: www.twitter.com/_rgraph
  Facebook: www.facebook.com/rgraph

PLEASE READ:

If RGraph has helped you please give your feedback - thanks! You can give your feedback or leave a testimonial by adding a forum post or clicking on the speech bubble icon at the very top right.

But most of all: Please link to the RGraph website! (get information by clicking on the chain icon at the top right of the page)
Posted by Mark Carter on 26th May 2016
Thanks again Richard.
Your example is helpful. However I still get a blank space where a chart should be.
I have compared the two source codes. My source code is below. It is identical to yours.
I think I will give up now, it's driving me crazy - but thanks again for all your efforts.
Mark

<script>
      src = [{"ld":"1.72247","rv":0.20719062725298},{"ld":"1.32193","rv":0.1137953478092},{"ld":"0.68706","rv":0.20198291835636},{"ld":"1.20163","rv":0.013502016096127},{"ld":"1.72247","rv":-0.1997614257191},{"ld":"1.58496","rv":-0.087827716068325},{"ld":"1.52105","rv":0.16947099911064},{"ld":"0.84800","rv":0.10918813124023},{"ld":"0.67807","rv":0.28076556904911},{"ld":"1.26303","rv":-0.010770803938336},{"ld":"0.68706","rv":0.11289331154612},{"ld":"1.03562","rv":0.35495988308629}];
      data = [];
    
         for (var i=0; i<src.length; i++) {
             data.push([
                 parseFloat(src[i].ld),
                 parseFloat(src[i].rv)
             ]);

         new RGraph.Scatter({
             id: 'cvs',
             data: data,
             options: {
                 xmax: 5,
                 scaleDecimals: 1,

                 xaxispos: 'center',
             }
         }).draw();
</script>

Add a reply




« Back to message list