Google column chart random colors for dynamic data

Question

I am trying to figure out a way to generate google column chart with each column in different/random color. Here are the details of the way I am generating charts:

Client/Javascript:

Using google.visualization.ChartWrapper to draw chart. Here is the code snippet:

var wrapper = new google.visualization.ChartWrapper({
    chartType : chartType,
    dataSourceUrl : url, 
    containerId : 'chartDiv',
    options : chartOptions
});

Data is fetched from a rest service(url param above) written in java.

Here are few things i have tried so far but no luck:

Tried to add few random colors in javascript code under options array:

chartOptions = {
            title : name,
            is3D : true,
           colors: ['red','yellow', 'blue'],
           }

This only painted all the columns in red color.

Server Side/ Java

Tried to add a com.google.visualization.datasource.datatable.Datatable custom style property in the data sent back from java code:

data.setCustomProperty("style", "color: darkred"); // thought to add randomely genrated colors if it worked

but this caused no effect on the chart color and it displayed all columns in default blue.

Samples given on official documentation is with static data and not able to find the right way to do it.

Answer 1

You could customize these colors with the style role , for example:

var data = google.visualization.arrayToDataTable([
     ['Element', 'Density', { role: 'style' }],
     ['Copper', 8.94, '#b87333'],            // RGB value
     ['Silver', 10.49, 'silver'],            // English color name
     ['Gold', 19.30, 'gold'],
     ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
  ]);

Working example

 google.load('visualization', '1'); // Don't need to specify chart libraries! google.setOnLoadCallback(drawVisualization); function drawVisualization() { getChartData(function(data){ var wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: data, options: { 'title': 'Density of Precious Metals, in g/cm^3', }, containerId: 'vis_div' }); wrapper.draw(); }); } function getChartData(complete) { $.getJSON('https://gist.githubusercontent.com/vgrem/f5b04c1c55b15ad1167f/raw/d04d79c1d4d0e9f3463f23d779d23fcdab89adff/density.json', function (json) { var dataTable = new google.visualization.DataTable(json); complete(dataTable); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="vis_div" style="width: 600px; height: 400px;"></div> 

JSON data file: density.json

Answer 2

Thanks to Vadim for sharing the json response, which actually helped me to do it in java:

Apart from my usual columns, i added one more to DataTable, like this:

ColumnDescription color = new ColumnDescription("", ValueType.TEXT, "");
color.setCustomProperty("role", "style");
data.addColumn(color);

And when adding rows to the DataTable, i have added random color:

data.addRowFromValues( dataEntry, datatypeCountMap.get(dataEntry), getRandomColor());

Finally got a column chart with single series but each column in different color.

Note: I was using the same logic for LineChart but it does not look great with different colors.