Change Google Chart bar colors when data table input is from JSON data from server

google-visualization, javascript, json, mysql, php

Solution

You need to do a couple of things. First, your column creation is wrong; this:

$table['cols'] = array(
    array('label' => 'Tahun', 'type' => 'string'),
    array('label' => 'Jumlah Persatuan', 'type' => 'number')
    ({type: 'string', role: 'style'})
);

should be like this:

$table['cols'] = array(
    array('label' => 'Tahun', 'type' => 'string'),
    array('label' => 'Jumlah Persatuan', 'type' => 'number'),
    array('type' => 'string', 'p' => array('role' => 'style'))
);

Then, when you are creating the rows of data, you need to add a cell for the style:

while($r = mysql_fetch_assoc($query)) {
    $temp = array();
    $temp[] = array('v' => (string) $r['Tahun']); 
    $temp[] = array('v' => (int) $r['Jumlah']); 
    $temp[] = array('v' => <insert style here>); 
    $rows[] = array('c' => $temp);
}

Problem

I have been struggling with google chart API. And I found this brilliant example on SO PHP MySQL Google Chart JSON - Complete Example . However I was wondering how could I change the bar color from the dafault blue color. I am confused on how should I use the `{ role: 'style' }` function. Here is my code : ``` <?php $con=mysql_connect("localhost","username","pass") or die("Failed to connect with database"); mysql_select_db("rosac", $con); $query = mysql_query(" SELECT TarikhLulusTahun AS Tahun, COUNT(*) AS Jumlah FROM association GROUP BY TarikhLulusTahun"); $rows = array(); $table = array(); $table['cols'] = array( array('label' => 'Tahun', 'type' => 'string'), array('label' => 'Jumlah Persatuan', 'type' => 'number') ({type: 'string', role: 'style'}) ); $rows = array(); while($r = mysql_fetch_assoc($query)) { $temp = array(); $temp[] = array('v' => (string) $r['Tahun']); $temp[] = array('v' => (int) $r['Jumlah']); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table); //echo $jsonTable; ?> <html> <head> <!--Load the Ajax API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); function drawChart() { // Create our data table out of JSON data loaded from server. var data = new google.visualization.DataTable(<?=$jsonTable?>); var options = { title: 'Jumlah Persatuan Berdaftar Mengikut Tahun', is3D: 'true', width: 1000, height: 1000, hAxis: {title: 'Tahun', titleTextStyle: {color: 'red'}}, vAxis: {title: 'Jumlah Persatuan', titleTextStyle: {color: 'blue'}} }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <!--this is the div that will hold the pie chart--> <div id="chart_div"></div> </body> </html> ```

Original source

Related problems