I have an Array $array
and want to create an html5 chart using the values of that array. For that purpose I use chart.js
The code I use looks like this (Unfortunately, I need to output the Javascript via PHP):
$chart = '
<script>
var data = {
labels: ['."$array[0]".', '."$array[1]".', "..."],
datasets: [
{
label: "My Chart",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
</script>';
print_r($chart);
That works fine so far, but the array gets updated with time to time and so should the chart. I figured out I would need a loop to do that but am not quite sure how to run the loop in the Javascript code. This doesnt work:
labels: ['.for ($i = 0, $i < count($array), $i++) {echo "$array[$i].','"}.'];
Create a function to return the array printed. Actually in your code you can remove the echo.
Please be advised this is a quick hack and shouldn't be used. You should be using some templating function
function displayMe($ar){
$res = '';
for ($i = 0, $i < count($array)-1, $i++){
$res .= '"'.$array[i].'",';
}
return $res . '"'.$array[count($array)-1] . '"';
}
$chart = '
<script>
var data = {
labels: ['. displayMe($array).'],
datasets: [
{
label: "My Chart",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
</script>';
print_r($chart);
This isn't a complete solution, but it should help you out.
Use the templating abilities of PHP to make your life easier:
<?php
// your code blah blah blah
// initialize $array, etc
?>
<script>
var data = {
labels: [
<?php
for ($i = 0, $i < count($array), $i++) {
echo $array[$i] . ",
";
}
?>
],
datasets: [
{
label: "My Chart",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
</script>
<?php
// continuation of your php code
// blah di blah bla
?>
This should work, I can't check it out now though. Instead of "unrolling" the array by yourself you could try like so:
$chart = '
<script>
var data = {
labels: '.json_encode($array).',
datasets: [
{
label: "My Chart",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}
]
};
</script>';
echo $chart;
basically json_encode
encodes the php array into a javascript object, just what you need!
Also, print_r
is not needed (print recursively), just use echo
(or print
)