How do I display PHP array in Google Chart

Question

I'd like to diplay my array in google stacked column chart. I generated the array looks like this.

array(n) { ["5pm"]=> int(4) ["6pm"]=> int(0),... } //Monday
array(n) { ["5pm"]=> int(5) ["6pm"]=> int(1),... } //Tuesday
...
array(n) { ["5pm"]=> int(4) ["6pm"]=> int(2),... } //Sunday

The number of entries in array needs to vary (depends on entries in database, but is the same for all days).

The JS from google charts needs to look like this

var data = google.visualization.arrayToDataTable([    
    ['Hours', '5pm', '6pm',...],
    ['Mon', 4, 0],
    ['Tue', 5, 1],
       ...
    ['Sun', 4, 2]
]);

Thanks for the help ;)

What's the problem you are facing? Also, what do u mean by number of entries in array needs to vary(but is the same for all days) ? — Suresh
– Suresh, Commented Apr 21, 2017 at 9:58
@mi6crazyheart - I think it means that all the days will have the same time period (5pm - 10pm, for example) but that time period can change depending on what is in the database. — ImClarky
– ImClarky, Commented Apr 21, 2017 at 10:13

Suresh · Accepted Answer · 2017-04-21 11:38:32Z

4

Heer is a sample code where I'm getting data from PHP & passing that to JavaScript for plotting the chart. One thing needs to check that all rows should have an equal number of elements.

So, according to your question, all "Time Periods" rows should have an equal number of elements else, it'll not work.

<?php
$chartData = array(
        array('Year', 'Sales', 'Expenses', 'Profit'),
        array('2014', 1000, 400, 200),
        array('2015', 1170, 460, 250),
        array('2016', 660, 1120, 300),
        array('2017', 1030, 540, 350)
    );
$chartDataInJson = json_encode($chartData);
?>

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable(<?php echo $chartDataInJson; ?>);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Hope it'll clear all of your doubt.

answered Apr 21, 2017 at 11:38

Suresh

5,99912 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vani Kalapciev Over a year ago

It was not exactly a doubt, but thanks...It helped me a lot to see how to do this right...Works fantastic

Zeke Over a year ago

It works like a charm. Great solution, thanks Suresh !

Collectives™ on Stack Overflow

How do I display PHP array in Google Chart

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related