Я боролся с API диаграммы Google. И я нашел этот блестящий пример на SO PHP MySQL Google Chart JSON – полный пример .
Однако мне было интересно, как я могу изменить цвет бара из синего цвета dafault. Я смущен тем, как использовать { role: 'style' } .
Вот мой код:
<?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>