how to create a bar chart with php data variables

Question

I am creating a bar chart using chart.js however the values i want in the bar chart is a php array, one array for the values and one array for the labels. How do i add these arays to the bar chart. Currently I have this for the data for the bar chart:

ar barData = {
labels : ["January","February","March","April","May","June"],
datasets : [
    {
        fillColor : "#48A497",
        strokeColor : "#48A4D1",
        data : [456,479,324,569,702,600]
    }

]

}

I tried to do the following, but it still did not work:

<script type="text/javascript">
   var chartLabels= <?php echo $chartLabels; ?>
   var chartValues= <?php echo $chartValues; ?>
</script>

I would like to replace the 'labels' with a php array, as well as the 'data'

Please use the search. There are many questions like this one here: [Convert php array to Javascript](http://stackoverflow.com/q/5618925/367456) — hakre, Apr 28 '14 at 00:05

score 1 · Accepted Answer · answered Apr 28 '14 at 00:17

1

If $chartLabels or $chartValues are arrays, then you cannot echo them. You can just implode array as a js string and put it as a value for data like this:

var barData = {
  labels : ["January","February","March","April","May","June"],
  datasets : [
      {
          fillColor : "#48A497",
          strokeColor : "#48A4D1",
          data : <?php echo '['.implode(", ", $data).']'?>
      }
  ]
}

where $data is a normal php array.

answered Apr 28 '14 at 00:17

Aram

361
3
10

and can I do the same for the 'Lables' section? I tried it but it doesn't seem to be working :/ the data one works though ! :) – user3506938 Apr 28 '14 at 09:38
1

figured it out in the end -- , Thanx! – user3506938 Apr 28 '14 at 10:11

score 0 · Answer 2 · answered Apr 28 '14 at 00:06

<script type="text/javascript">
   var chartLabels= <?php echo $chartLabels; ?>
   var chartValues= <?php echo $chartValues; ?>
</script>

Strange, that this code is not working. Do you use all of your javascript in ready handler? Also, note, that this variables should be declared and values assigned before you get data and draw data.

Another approach to achieve what you want:

You can use ajax request there. Before you draw graph you will send ajax request and get json response from the php server. It will contain all labels and all values, linked to labels. Now, all what you need it to parse this json and build graph.

Read about getJSON or parseJSON java script functions.

Your php script will just generate 2 arrays, then merging them into 1 big array and encoding them.

$values = array();
// get values
$labels = array();
// get labels
$result = array($values, $labels);
echo json_enocde($result);

Simple :)

Hope this will help you.

sorry what do you mean by ready handler? also is this the correct way of using the array : "labels :'chartLabels'," and "data : 'chartValues'" — user3506938, Apr 28 '14 at 00:10
There is future in js, which says js code to run only then page loaded. Google it. I don't understand, what you asked about arrays. Use values array name for values and labels array name for labels. — Sharikov Vladislav, Apr 28 '14 at 00:23

how to create a bar chart with php data variables

2 Answers2