CODEWITHSUNDEEP
javascriptjquerygoogle-visualization
mymotherland
mymotherland

Reputation: 8228

How to dynamically generate chart from google chart

I am trying to implement chart from the following link http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html

Below is piece of code taken from phtml file,

$sale has the array like,

Array
(
    [0] => 19.92
    [1] => 159.15
    [2] => 374.96
    [3] => 319.5
    [4] => 237
)

$month has the array like,

Array
(
    [0] => 7
    [1] => 8
    [2] => 9
    [3] => 10
    [4] => 11
)

Below script will generate chart based on array value 

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        var sale_arr = <?php echo json_encode($sale); ?>;
        var month_arr = <?php echo json_encode($months); ?>;
        alert(month_arr)
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', 'Sales');
        //data.addColumn('number', 'Expenses');
        var result = '';
         for(var i=0; i<month_arr.length; i++) {
          result += '["'+month_arr[i]+'",' +sale_arr[i]+'],';
         }     
        alert(result);  
        data.addRows([
          result
        ]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'Order',
                          hAxis: {title: 'Year', titleTextStyle: {color: '#FF0000'}}
                         });
      }
    </script>

I need to form the values like 

data.addRows([
  ['4', 1000,
  ['5', 1170],
  ['6', 660],
  ['7', 1030]
]);

in my script result will generate ["7",19.92],["8",159.15],["9",374.96],["10",319.5],["11",237], .Also i added the result as 

    data.addRows([
      result
    ]);

This will make some error on script. What i done wrong this code. Kindly help me on this.

Upvotes: 0

Views: 2776

Answers (2)

Batuhan Tasdoven
Batuhan Tasdoven

Reputation: 798

I think given parameter to AddRows function should be an array, not string.

Also you should remove last comma in order to have a string that can be interpreted to an array.

data.addRows(
      eval('[' + result.substring(0, result.length - 1) + ']')
    )

But using eval is not the best way to do it. While you are creating your result data, you can create an array instead of string. Here the code:

var result = [];

for(var i=0; i<month_arr.length; i++) {
    result.push( [month_arr[i], sale_arr[i]] );
}    

data.addRows(result);

Upvotes: 0

Adam Merrifield
Adam Merrifield

Reputation: 10407

Your var result is giving you an extra comma telling the code there is another value when there really isn't 

var result = '';
for(var i=0; i<month_arr.length; i++) {
    result += '["'+month_arr[i]+'",' +sale_arr[i]+'],';
}     
result = result.substring(0, result.length - 1)
alert(result);

Upvotes: 1

Related Questions