Displaying currency in Google chart API

Question

I am using Google chart API to display a line chart, but I need the numbers to show as currency. On the chart itself, I have been able to get the numbers to display like currency, but when the mouse hovers over a point and the dialog box displays, the number is not displayed as specified.

        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart"]});
            google.setOnLoadCallback(drawChart);
            
            function drawChart() {
                
                var data = google.visualization.arrayToDataTable(<?php echo $data; ?>);

                
                var options = {
                    chartArea:{left:40,top:10},
                    pointSize: 6,
                    vAxis: {format:'$###,###,###.00'}, // Money format
                    legend: {position:'none'}



                };
                
                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, options);
                
            }
        </script>

As you can see from this image, the vertical column displayed on the left does use decimal points as specified using vAxis.format in the above code, but the dialog box does not show the decimals or the dollar sign (I added the dollar sign after the screen capture).

How can I get the number in the dialog box to display the same as the numbers in the left aligned vertical column?

I tried updating the PHP array I am using to populate the data into currency format there, but then the Google chart does not render since it is not a plain digit.

Answer 1

Try this:

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

Worked great for me. Found at: Comma Separated Data in Google Visualisation API