How do I use values that are in a PHP array in a Scatter chart?
« Back to message list
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 2016I 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>
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 2016I 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
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 2016The 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
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 2016Then 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
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 2016I 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>
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 2016After 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
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 2016Here 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!
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 2016There's an example in the test area:
[REMOVED]
You'll need to view-source of course.
Richard
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>
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