Formatting using Prefix with Google Charts

Question

I am trying to dynamically create a graph based on the data in a table so my client will be able to update content without touching javascript.

/* ----- Single Bar Graph ------ */
        jQuery(".single-bar table").each(function() {
            var data = new google.visualization.DataTable();
            var thisTableID = jQuery(this).parent().attr('id');

            data.addColumn('string', 'country');
            data.addColumn('number', 'amount');
            jQuery(this).children("tbody").children("tr.data").each(function(){
                var country="";
                var amount="";
                country = jQuery(this).find("td.country").text();
                amount = parseFloat(jQuery(this).find("td.amount").html());
                data.addRow([country, amount]);
            });

            // Set chart options
            var xAxis = jQuery(this).find("td.xAxis").text();
            var options = {
                title: jQuery('.single-bar table th').html(),
                width: 750,
                height: 350,
                colors: ['#7dc2af', '#d5d7d2', '#ba8c0a', '#006f51', '#6dadbf', '#3b3b3b'],
                is3D: true,
                fontSize: 12,
                fontName: 'AllerLight',
                titleTextStyle: {fontSize: 15, color: '#006f51'},
                chartArea:{left:100,top:50,bottom:0},
                backgroundColor: 'transparent',
                hAxis: {title: xAxis,color:'#0f0'}
            };

            var chart = new google.visualization.BarChart(document.getElementById(thisTableID));
            // This isn't working
            var formatter = new google.visualization.NumberFormat({prefix: '$'});
            formatter.format(data, 1); // Apply formatter to second column
            chart.draw(data, options);
        });

So you'll see towards the end here I'm trying to add the dollar sign prefix to my 'amount' column, but it is not doing so. I have no errors in my console. I'd tried adding a prefix to column 0 as well just for kicks but that does not appear to be working either.

Much thanks in advance

Answer 1

"This isn't working" = the $-sign is only applied to the tooltips?

To format the hAxis also, define hAxis.format :

var options = {
  ..
  ..
  hAxis: { title: 'xAxis', color:'#0f0',
           format: '$#'  // <-- format
  }
};

Why?
You are formatting your data with NumberFormat, not the hAxis series of text, which is generated by the chart itself.

If the column need further formatting get inspired here http://icu-project.org/apiref/icu4c/classDecimalFormat.html