Google visualization - set color

Question

In my application I want to show the bar chart as below if the "Actual" value is greater than 'Planned" then the Actual bar should be red color and if less than 'Planned" then it should be in 'green' color I have used the below code

stringBuilder.Append(@"<script type=*text/javascript*> google.load( *visualization*, *1*, {packages:[*corechart*]});
                                                google.setOnLoadCallback(drawChart);
                                                function drawChart() {
                                                var data = new google.visualization.DataTable();
                                                data.addColumn('string', 'ResourceName');
                                                data.addColumn('number', 'Planned');
                                                data.addColumn('number', 'Actual');


                            data.addRows(" + dataTable.Rows.Count + ");");

                    for (int i = 0; i <= dataTable.Rows.Count - 1; i++)
                    {
                        stringBuilder.Append("data.setValue( " + i + "," + 0 + "," + "'" + dataTable.Rows[i]["ResourceName"].ToString() + "');");
                        stringBuilder.Append("data.setValue(" + i + "," + 1 + "," + dataTable.Rows[i]["Planned"].ToString() + ") ;");
                        stringBuilder.Append("data.setValue(" + i + "," + 2 + "," + dataTable.Rows[i]["Actual"].ToString() + ") ;");

                        if (Convert.ToDecimal(dataTable.Rows[i]["Planned"]) > Convert.ToDecimal(dataTable.Rows[i]["Actual"]))
                        { color = "green"; }
                        else
                        { color = "red"; }
                    }

                    stringBuilder.Append(" var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));");
                    stringBuilder.Append(" chart.draw(data, {width: 660, height: 500, title: 'Resource-Performance Graph',");
                    stringBuilder.Append("legend: {position: 'right',alignment: 'start',textStyle: {fontSize: 12}},");
                    stringBuilder.Append("hAxis: {title: 'Resource', titleTextStyle: {color: 'green'},slantedText:true},width:'645',colors: ['DeepSkyBlue','"+color+"'],");

                    stringBuilder.Append("vAxis:{title: 'Effort (Hr)',titleTextStyle: {color: 'green'}}");

                    stringBuilder.Append("}); }");
                    stringBuilder.Append("</script>");

how can I set the color for each bar?

WhiteHat WhiteHat · Accepted Answer · 2016-03-08T12:56:48

I would recommend using a Style data role...

var data = new google.visualization.DataTable();
data.addColumn('string', 'ResourceName');
data.addColumn('number', 'Planned');
data.addColumn('number', 'Actual');

// add style column
data.addColumn({type: 'string', role: 'style'});

// add style color
if (Convert.ToDecimal(dataTable.Rows[i]["Planned"]) > Convert.ToDecimal(dataTable.Rows[i]["Actual"])) {
  stringBuilder.Append("data.setValue(" + i + "," + 3 + ",'color: green;') ;");
} else {
  stringBuilder.Append("data.setValue(" + i + "," + 3 + ",'color: red;') ;");
}

Google visualization - set color

1 Answers