Change Google Chart Bar Colors When Data Table Input Is From Json Data From Server

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

Solution 1:

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);
}

Solution 2:

$table = array();
    $table['cols'] = array(
        array('id' => "", 'label' => 'Category', 'pattern' => "", 'type' => 'string'),
        array('id' => "", 'label' => 'Budgeted', 'pattern' => "", 'type' => 'number'),
        array('type' => 'string', 'p' => array('role' => 'style'))
    );

    $rows = array();
    while($r = mysql_fetch_assoc($result_chart)) {

        $temp = array();
        $temp[] = array('v' => (string) $r['Groups']); 
        $temp[] = array('v' => (int) $r['Amount']); 
        $temp[] = array('v' => 'color: #0000cf; stroke-color: #cf001d');
            $rows[] = array('c' => $temp);
    }

    $table['rows'] = $rows;
    $jsonTable = json_encode($table);

Close PHP section, then

<scripttype="text/javascript"src="https://www.google.com/jsapi"></script><scripttype="text/javascript">

    google.load('visualization', '1', {'packages':['corechart']});

    google.setOnLoadCallback(drawChart);

    functiondrawChart() {
        var data = new google.visualization.DataTable(<?phpecho$jsonTable; ?>);

        var options = {
        width: 980,
        height: 500,
        backgroundColor: '#F6F6F6'
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

        chart.draw(data, options);
    }       
    </script>

Solution 3:

PRIVACY BY DESIGN

Both other answers are useful (UPVOTED both). Nevertheless, I'll toss my hat in the ring for illustrative purposes. Below I simulate a somewhat safer application, using client side AJAX to consume data from restful JSON on a server. This has the advantage of not exposing database structure or credentials (supposing that the RESTful server is separate from the one the final page runs on).

I show 2 alternatives (slightly different declarations), which both work for simple bar color (color and color2). In your final code, use whichever one suits you best.

Serverside RESTful php

$graphData = array(
    'colors' => array(
    'cols' => array(
        array('type' => 'string', 'label' => 'Tahun'),
        array('type' => 'number', 'label' => 'Jumlah'),
        array('type' => 'string', 'p' => array('role' => 'style'))
    ),  
    'rows' => array()
    ),
    'colors2' => array(
    'cols' => array(
        array('type' => 'string', 'label' => 'Tahun'),
        array('type' => 'number', 'label' => 'Jumlah'),
        array('type' => 'string', 'role' => 'style')
    ),
    'rows' => array()
    )
);
[...]
$sql="SELECT  `Tahun`, `Jumlah`, `Color` FROM [...] ";
$result = mysqli_query($conn, $sql) or trigger_error(mysqli_error($conn));
while($row = mysqli_fetch_array($result)){
    $graphData['colors']['rows'][] = array('c' => array(
        array('v' => $row['Tahun']),
        array('v' => (int)$row['Jumlah']),
        array('v' => $row['Color'])
    ));
    $graphData['colors2']['rows'][] = array('c' => array(
        array('v' => $row['Tahun']),
        array('v' => (int)$row['Jumlah']),
        array('v' => $row['Color'])
    ));
}
// $row['Color'] is formatted as "color: #FF0000"echo json_encode($graphData);

Client side browser JavaScript

var jsonDataAjax = $.ajax({
    url: "http://yourdomain.com/yourRestfulJson.php",
    dataType: "json",
    async: false
    }).responseText;
var jsonData = eval("(" + jsonDataAjax + ")");

var jsonColors = new google.visualization.DataTable(jsonData.colors);
var jsonColors2 = new google.visualization.DataTable(jsonData.colors2);

var viewColors = new google.visualization.DataView(jsonColors);
viewColors.setColumns([0, 1,
           { calc: "stringify",
             sourceColumn: 1,
             type: "string",
             role: "annotation" },
           2]);   
                    
var viewColors2 = new google.visualization.DataView(jsonColors2);
viewColors2.setColumns([0, 1,
           { calc: "stringify",
             sourceColumn: 1,
             type: "string",
             role: "annotation" },
           2, {type: 'string', role: 'style'}]);        

var options = {
    title: "ColumnChart Color Testing Graph",
    width: 1200,
    height: 400,
    bar: {groupWidth: "95%"},
    legend: { position: "none" },
};

var chart1 = new google.visualization.ColumnChart(document.getElementById('bar1_div'));
var chart2 = new google.visualization.ColumnChart(document.getElementById('bar2_div'));

chart1.draw(viewColors, options);
chart2.draw(viewColors2, options);