Create a Google Column Chart


November 12, 2018 3 minutes google chart

html part

<div class="col-lg-6 pull-left grpahinformation">
  <div id="restaurant_rating"></div>
</div>

calling setOnLoadCallback function with callback parameter

google.charts.setOnLoadCallback(restaurant_rating);

define callback

function restaurant_rating() {
    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string' , 'Topping');
    data.addColumn('number' , 'Count');
    data.addColumn({ type: 'string', role: 'style' });
    var colors=['salmon', 'teal', 'brown', 'cadetblue', 'burlywood'];
    data.addRows([<?php if(isset($ratings)){
      foreach($ratings as $rating){ ?>
    ['Rating <?= $rating->rating ?>' , <?= $rating->c ?>, colors.shift()] ,
      <?php }
      }?>
    ]);
    var options = {
        'title' : 'Restaurant Rating' ,
        'width' : '100%',
        'height' : 400,
        vAxis: {
          minValue: 0,
        },

    };
    var chart = new google.visualization.ColumnChart(document.getElementById('restaurant_rating'));
    chart.draw(data , options);
}

for 3 column topping, count, style we are passing 3 value in addRows method. for colors of the column we take a colors variable and give a color to each row using array shift constructor functions

rating array which is coming from laravel controller

Array
(
    [0] => stdClass Object
        (
            [c] => 18
            [rating] => 1
        )

    [1] => stdClass Object
        (
            [c] => 21
            [rating] => 2
        )

    [2] => stdClass Object
        (
            [c] => 21
            [rating] => 3
        )

    [3] => stdClass Object
        (
            [c] => 18
            [rating] => 4
        )

    [4] => stdClass Object
        (
            [c] => 18
            [rating] => 5
        )

)

for pie chart we don’t need 3rd column (style column where I add color)

var chart = new google.visualization.PieChart(document.getElementById('restaurant_rating'));

See Also