UiApp - Charts Vs. Visualization API

Question

This may seem like a lazy question but if i were to link all of the documentation I have read and the old SO posts I have trawled through this would rapidly turn into a very, very long post.

The simple question I have is 'how do I customise series colors/tooltips in a chart created using Charts Service displayed via UiApp embedded in a Google Site?'

I know that this is easily achievable using the Visualization API, but unless I've missed a key point it is not possible to use the Visualization API library with UiApp? Charts Service appears to have extremely limited functionality in comparison.

I have included an example of my chart creation code below:

...

var sampleData = Charts.newDataTable()
   .addColumn(Charts.ColumnType.STRING, "Subject")
   .addColumn(Charts.ColumnType.NUMBER, "Target")
   //.addColumn(Charts.ColumnType.STRING, {role: 'tooltip'})
   .addColumn(Charts.ColumnType.NUMBER, "Level")
   .addRow([subjectArray[0], 10, /*'custom tooltip',*/ 9])
   .addRow([subjectArray[1], 11, 9]) 
   .build();

var chart = Charts.newColumnChart()
   .setTitle('KS3 target vs. level')
   .setXAxisTitle('Subject')
   .setYAxisTitle('Grade')
   .setDimensions(1200, 500)
   .setDataTable(sampleData)
   .build();  

return UiApp.createApplication().add(chart);

Fred Fred · Accepted Answer · 2014-02-07T14:58:45

You're right that the Charts Service is a very limited subset of the Visualization API. If I understand your question correctly though, add .setColors(array_of_colors) before .build() on the chart.

array_of_colors should be an array of hexadecimal colors.

As an aside, .setOption allows you to set a lot of the properties available through the Visualization API (legend, title, axes, hAxis, vAxis, focusTarget, etc). I wish you could assign roles to DataTable columns, though.

UiApp - Charts Vs. Visualization API

1 Answers