Google Charts Tooltip

0 down vote favorite

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> javascript  google-visualization share | edit edited Nov 12 '13 at 8:31 asked  Nov 11 '13 at 20:36 gag 81 1 10

add a comment

1 Answer

active oldest votes

up vote 2 down vote accepted

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); share | edit edited Jul 2 at 17:42 answered  Nov 11 '13 at 21:59 asgallant 13.2k 2 10 26

Ok, asgallant, thanks for your answer, I think it should be correct, but I do not manage to use it in my code. I edited my question with the code and if I put everything like this, it shows me nothing. Do you see where the problem is? –   gag  Nov 12 '13 at 8:33 Your DataTable only has two columns of data, so calling formatter.format(data, 2); won't do anything. Columns are zero-indexed, so the "Label" column in 0 and the "Value" column is 1. Useformatter.format(data, 1); as I posted in my answer. –   asgallant  Nov 12 '13 at 18:11 Thanks, I tried with both but it did not work for another reason, your answer is right. –   gag  Nov 12 '13 at 18:35 Correct the pattern: #,###.00 to pattern: '#,###.00' and this will work well. –   PMay 1903  Jul 2 at 17:39  Thanks for catching the typo; I fixed the answer. –   asgallant  Jul 2 at 17:43