Google Chart Number formatting

Question

I need to format my pie and column charts to show the $ and comma in currency format ($###,###) when you hover over the charts. Right now, it is displaying the number and percentage but the number as #####.## here is my code. Any help would be appreciated.

// Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      var formatter = new google.visualization.NumberFormat({
            prefix: '$'
        });
        formatter.format(data, 1);

        var options = {
            pieSliceText: 'value'
        };

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
     function drawChart() {

                    // REVENUE CHART - Create the data table.
        var data4 = new google.visualization.DataTable();
        data4.addColumn('string', 'Status');
        data4.addColumn('number', 'In Thousands');
        data4.addRows([
          ['Net tution & Fees', 213.818],
          ['Auxiliaries', 30.577],
          ['Government grants/contracts', 39.436],
          ['Private grants/gifts', 39.436],
          ['Investments', 10.083],
          ['Clinics', 14.353],
          ['Other', 5.337]
        ]);

                    // EXPENSES CHART - Create the data table.
        var data5 = new google.visualization.DataTable();
        data5.addColumn('string', 'Status');
        data5.addColumn('number', 'Amount');
        data5.addRows([
          ['Instruction', 133.868],
          ['Sponsored Progams', 34.940],
          ['Auxiliaries', 30.064],
          ['Academic Support', 25.529],
          ['Depreciation & amortization', 18.548],
          ['Student Services', 22.626],
          ['Plant operations & maintenance', 18.105],
          ['Fundraising', 13.258],
          ['Geneal Administration', 11.628],
          ['Interest', 6.846],
          ['Student Aid', 1.886],
        ]);

                    // ENDOWMENT CHART - Create the data table.
        var data6 = new google.visualization.DataTable();
        data6.addColumn('string', 'Status');
        data6.addColumn('number', 'In Millions');
        data6.addRows([
          ['2010', 178.7],
          ['2011', 211.693],
          ['2012', 199.3]
        ]);

        // Set REVENUE chart options
        var options4 = {
                        is3D: true,
                        fontName: 'Arial',
                        colors:['#AFD8F8', '#F6BD0F', '#8BBA00', '#FF8E46', '#008E8E', '#CCCCCC', '#D64646', '#8E468E'],
                        'title':'',
                       'width':550,
                       'height':250};              
        // Set EXPENSES chart options
        var options5 = {
                        is3D: true,
                        fontName: 'Arial',
                        colors:['#AFD8F8', '#F6BD0F', '#8BBA00', '#FF8E46', '#008E8E', '#CCCCCC', '#D64646', '#8E468E'],
                        'title':'',
                       'width':550,
                       'height':250};
        // Set ENDOWMENT chart options
        var options6 = {
                        is3D: true,
                        fontName: 'Arial',
                        colors:['#AFD8F8', '#F6BD0F', '#8BBA00', '#FF8E46', '#008E8E', '#CCCCCC', '#D64646', '#8E468E'],
                        'title':'',
                       'width':450,
                       'height':250};

        // Instantiate and draw our chart, passing in some options.
        var chart4 = new google.visualization.PieChart(document.getElementById('chart_div4'));
        chart4.draw(data4, options4);
        var chart5 = new google.visualization.PieChart(document.getElementById('chart_div5'));
        chart5.draw(data5, options5);
        var chart6 = new google.visualization.ColumnChart(document.getElementById('chart_div6'));
        chart6.draw(data6, options6);}

Reproval

Hi sorry... that did not seem to work... hmmm... i assume it has to be placed before drawChart but to no avail I could not get it to format. :-( – Reproval

I tested friday with a pie chart and it worked out for me. You can even change the pattern and just add the prefix as your solution and does work either. Do you want me to update my answer with my full code example? – Heidiheidie

That would be helpful! I'm assuming I may be inserting it into the wrong part of the js but not sure. A live example would help me big time! – Reproval

Works fine for one pie chart, but I have a ColumnChart and 3 other pie charts. Doesnt seem to work when I set all individual charts with formatter. Works fine with 1 though! – Reproval

Answer 1

You need to change:

   var formatter = new google.visualization.NumberFormat(
      {negativeColor: 'red', negativeParens: true, pattern: '$###,###'});
   formatter.format(data, 1);    

instead of:

  var formatter = new google.visualization.NumberFormat({
        prefix: '$'
    });

EDIT: Check out this live example

Heidiheidie

Nevermind... I added more charts by simply creating a completely different variable adding a var options to style it! Very useful post... Thanks for your help. – Reproval

Answer 2

NumberFormat is just for a simple formating. If you want more than just formatting, like you wanna put another text, an image, or even another chart on it, you should check out this amazing tip! The Google Tooltips. here

Nadanadab

Answer 3

add param language if you have using multi currency Exp:

if( currency == 'USD' )
    var local_currency = 'en'; // output on chart 1,256$
    var currency = '$';
{elseif currency == 'VND'}
    var local_currency = 'vi'; // output on chart 1.256đ
    var currency = 'đ';
{/if}

google.charts.load('current', {'packages': ['corechart', 'line'], 'language': local_currency});
google.charts.setOnLoadCallback(todayLineChartTotal);

function todayLineChartTotal(){
    var chartDivTotal = document.getElementById('line_top_x_total'), data = new google.visualization.DataTable();
    data.addColumn('date', 'date');
    data.addColumn('number', analytics_total_view );
    data.addRows([ [new Date(2023, 8, 15, 10, 45), 1256] ]);
    var chartwidth = $('#line_top_x_total').width();

    var lineChartOptions = {
        title: '',
        chartArea: {width:'86%', left:57, top:12, height:'75%'},
        legend: {position:'none'},
        dateFormat: 'YYYY/MM/DD',
        curveType: 'function',
        pointSize: 5,
        hAxis: {showTextEvery: 2, format: 'd/M/yyyy',},
        vAxis: { minValue: 0, viewWindow: { min: 0 }, format: "#,###"+currency,}
    }

    new google.visualization.LineChart(chartDivTotal).
    draw(data, lineChartOptions);
}

Zendavesta