CODEWITHSUNDEEP
javascriptgoogle-visualization
gag
gag

Reputation: 325

Google Charts Tooltip

I am using a Google Pie Chart in my website to show some data of company expenses. The chart gives me nice tooltips as I hover over the slices. It says for example 27% and gives the number of expense as 522552225.00 for example. What I would like to do is to get the number formatted as it is hard to read when the number is large. I would like to have this instead 522,552,225.00.

The problem is that the number comes from database.

Is there a solution to this?

Thanks!

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

        var formatter = new google.visualization.NumberFormat({pattern:'#,###.00'});
        // format column 1 of DataTable "data"
        formatter.format(data, 2);

        var options = {"width":<?php echo $params->get('width')?>,
                       "height":<?php echo $params->get('height')?>, 
                       "tooltip": {"trigger": '<?php echo $params->get('tooltip')?>' },
                    };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }

</script>

Upvotes: 1

Views: 2942

Answers (1)

asgallant
asgallant

Reputation: 26340

Use a NumberFormatter on the appropriate DataTable column:

var formatter = new google.visualization.NumberFormat({pattern: '#,###.00'});
// format column 1 of DataTable "data"
formatter.format(data, 1);

Upvotes: 4

Related Questions