Modify column colors in Google Column Chart without arrayToDataTable()

Question

I parsed our data from a Google Fusion Table so I can't utilize arrayToDataTable() (I think) to individually change the columns' colors (among other properties). Anybody know how to select columns and then modify their properties (including hide them as well). Thanks.

Here is the code for bringing in the Fusion table data and drawing the chart:

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

 google.setOnLoadCallback(drawVisualization);

 var data;
 var chart;
 var views = {};

 var options = {
     titlePosition: 'none',
     backgroundColor: '#E5E3DF',
     tooltip: {
         isHtml: true
     },
     legend: {
         position: 'none'
     },
     vAxis: {
         title: "Avg. Confidence Level",
         format: 'decimal',
         minValue: 0
     },
     hAxis: {
         title: "Master Level Universities"
     },
     height: 500
 };

 function drawVisualization() {
     chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

     var query = "SELECT ShortName, Thesis FROM 1BslkTKgWIr0jwxR8odybI2fvvLSKnfSE8MylFzDi";
     var queryText = encodeURIComponent(query);
     var opts = {
         sendMethod: 'auto'
     };
     var gvizQuery = new google.visualization.Query(
         'http://www.google.com/fusiontables/gvizdata?tq=', opts);

     gvizQuery.setQuery(query);


     gvizQuery.send(function (e) {

         data = e.getDataTable();
         data = new google.visualization.DataView(data);
         data.setColumnProperty(0, "ShortName", 'color: #e5e4e2'); //maybe this is how I modify column, but it spits out error.

         chart.draw(data, options);
     });
 }

Answer 1

See the documentation for coloring columns

To set the bar colors, create a column with the "role" style:

data.addColumn({type: "string", role: "style" });

Then set it to your desired values:

data.setCell(0,2,'red');
data.setCell(1,2,'purple');
data.setCell(2,2,'green');
data.setCell(3,2,'yellow');

code snippet:

 google.load('visualization', '1', { packages: ['corechart', 'bar'] }); google.setOnLoadCallback(drawVisualization); var data; var chart; var views = {}; var options = { titlePosition: 'none', backgroundColor: '#E5E3DF', tooltip: { isHtml: true }, legend: { position: 'none' }, vAxis: { title: "Avg. Confidence Level", format: 'decimal', minValue: 0 }, hAxis: { title: "Master Level Universities" }, height: 500 }; function drawVisualization() { chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); var query = "SELECT ShortName, Thesis FROM 1BslkTKgWIr0jwxR8odybI2fvvLSKnfSE8MylFzDi"; var queryText = encodeURIComponent(query); var opts = { sendMethod: 'auto' }; var gvizQuery = new google.visualization.Query( 'http://www.google.com/fusiontables/gvizdata?tq=', opts); gvizQuery.setQuery(query); gvizQuery.send(function(e) { data = e.getDataTable(); data.addColumn({ type: "string", role: "style" }); //maybe this is how I modify column, but it spits out error. data.setCell(0, 2, 'red'); data.setCell(1, 2, 'purple'); data.setCell(2, 2, 'green'); data.setCell(3, 2, 'yellow'); var dataView = new google.visualization.DataView(data); chart.draw(dataView, options); }); } 

 html, body, #chart_div { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://www.google.com/jsapi"></script> <div id="chart_div"></div>