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

There’s a format for specifying both the raw value and formatted value for a cell: when loading the value into the chart, rather than, e.g. addRow(['2012-08-31, 4]); it would be addRow(['2012-08-31', {v: 4, f: '$4.00'}]); More examples of that syntax are sprinkled through the docs but I couldn’t find a good place to link to it. It shouldn’t be too hard to change the method by which the $data object from your example is generated to include that formatting, but there are other formatting options too.

If you’d rather define that formatting in the JS for whatever reason, you can use a NumberFormatter.