How to change Google Charts number format for controllers? - charts

Question

When implementing a dashboard using Google Charts we are able to change the format of displayed quantities in tables with google.visualization.NumberFormat().
However, we haven't been able to find a way to change number formats in controllers. We would like to accomplish what the image shows:
We looked in the documentation for Google Charts controllers, but we couldn't find anything helpful for this. Any help is appreciated. :)

Answer 1

The google API has a built in function for this.
options:{
ui:{
format:{
prefix:'$',
}
}
Did a small fiddle for it, link.
More info about configuration here and here.

Answer 2

You could specify ui.cssClass option to to assign the custom CSS class to the control:
programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Salary',
'ui': { 'cssClass': 'currencyfilter' }
}
});
and then specify rule for a thumb label:
.currencyfilter .google-visualization-controls-rangefilter-thumblabel:before {
color: brown;
content: '$';
}
Complete example
google.load('visualization', '1', { 'packages': ['corechart', 'controls'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('programmatic_dashboard_div'));
// We omit "var" so that programmaticSlider is visible to changeRange.
var programmaticSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'programmatic_control_div',
'options': {
'filterColumnLabel': 'Salary',
'ui': { 'labelStacking': 'vertical', 'cssClass': 'currencyfilter' }
}
});
var programmaticChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'programmatic_chart_div',
'options': {
'width': 300,
'height': 300,
'legend': 'none',
'chartArea': { 'left': 15, 'top': 15, 'right': 0, 'bottom': 0 },
'pieSliceText': 'value'
}
});
var data = google.visualization.arrayToDataTable([
['Name', 'Salary'],
['Mike', 10000],
['Jim', 8000],
['Alice', 12500],
['Bob', 7000]
]);
var formatter = new google.visualization.NumberFormat({ prefix: '$' });
formatter.format(data, 1);
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(data);
}
.currencyfilter .google-visualization-controls-rangefilter-thumblabel:before {
color: brown;
content: '$';
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
<table class="columns">
<tr>
<td>
<div id="programmatic_control_div" style="padding-left: 2em; min-width: 250px"></div>
</td>
<td>
<div id="programmatic_chart_div"></div>
</td>
</tr>
</table>
</div>