How do I use values that are in a PHP array in a Scatter chart?

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 in the test area:

[REMOVED]

You'll need to view-source of course.

Richard

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