How to change Google Charts number format for controllers?

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>