Question

I’m working on an open Source CMS based on CodeIgniter and I’m trying to integrate a chart system with the API of Google Analytics.

I’ve successfully retrieved the informations from Google Analytics (like visits, page views and so on) and it gives me an Array:

Array
(
    [] => Array
        (
            [ga:visits] => 800
            [ga:pageviews] => 1200
        )
    [] => Array
        (
            [ga:visits] => 400
            [ga:pageviews] => 900
        )
) ... 

Then to use the informations I’ve made a foreach loop

foreach ($report as $value) {
            echo $value["ga:visits"];
            echo '-';
        }

I’ve all my statistics with this ‘echo’ and it appears like this 1200-300-450- and so on. great until now.

Well, now I use the Charts API from Google to make a chart and I have this piece of code :

// Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);


      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table. I NEED TO PLACE MY RETRIEVED INFORMATIONS FROM THE FOREACH LOOP HERE :
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Month');
      data.addColumn('number', 'visits');
      data.addRows(8);
      data.setValue(0, 0, 'Day 1');
      data.setValue(0, 1, 1000);
      data.setValue(1, 0, 'Day 2');
      data.setValue(1, 1, 70);
      data.setValue(2, 0, 'Day 3');
      data.setValue(2, 1, 860);
      data.setValue(3, 0, 'Day 4');
      data.setValue(3, 1, 1030);

      // Set chart options
      var options = {
 'title':'test',
'width':1200,
'height':600,
'legend' : 'bottom',
'series' : {0:{color: 'black', pointSize : 12, visibleInLegend: true}},
'backgroundColor' : '#FFFFFF',
                };

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    } 

I just want to use my retrieved informations from the foreach loop in the ‘data.setValue(…, …, …);’ of this JS function.

Answer 1

If I were you, I would not simple echo ga:visits, but form up an array:

<script type='text/javascript'>
    var ga_data = [
    <?php
        $str = "";
        foreach ($report as $value)
            $str.="{$value["ga:visits"]},";
        $str = rtrim($str,",");
    echo $str;
    ?>
    ];
</script>

Note:

• trailing , is removed. Chrome and FF just skip it, while IE8 decide that there are one more array element. So [1,2,] is [1,2] for Chrome and FF, but [1,2,undefined] for IE.
• I have placed it in a separate script tag. It’s a good idea when it comes to PHP errors – they are not valid javascript code so they fail the whole script block they are in. So, placing PHP’s output into separate script block will not crash other JS scripts in case of PHP errors/warnings, misformed JS code, etc.

Now, in your script you do just the following

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'visits');
data.addRows(ga_data.length*2);
for (i=9; i<ga_data.length; i++){
    data.setValue(i, 0, 'Day '+(i+1));
    data.setValue(i, 1, ga_data[i]);
}

I think it should do it.