How to use decimal value in pie chart using google.visualization.DataTable()

3,083 views
Skip to first unread message

Vikas Sangal

unread,
May 31, 2014, 3:18:16 AM5/31/14
to google-visua...@googlegroups.com
Hello,

I am draw pie chart, i am using 
var data = new google.visualization.DataTable();
 data.addColumn('string', rowarr[0]);
data.addColumn('number', rowarr[1]);

but i have some values in decimal, so when i pass decimal value then graph does not draw.
i found to set the parameter  but not success.
var formatter= google.visualization.NumberFormat({fractionDigits:'2'});
 formatter.format(data, 1);

Please suggest me how to set formate for decimal values.

Andrew Gallant

unread,
May 31, 2014, 7:23:12 PM5/31/14
to google-visua...@googlegroups.com
Can you share a complete example that demonstrates the problem?  I have never seen decimal values cause a chart to fail to draw.

Derek Williams

unread,
Sep 6, 2014, 8:01:55 AM9/6/14
to google-visua...@googlegroups.com
I'm having the same issue. 
Here's my code:














<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the controls package.
      google.load('visualization', '1.0', {'packages':['controls']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawDashboard);

      // Callback that creates and populates a data table,
      // instantiates a dashboard, a range slider and a pie chart,
      // passes in the data and draws it.
      function drawDashboard() {

        // Create our data table.
        var data = new google.visualization.DataTable();
 
data.addColumn('datetime', 'Date');
data.addColumn('string', 'Description');
data.addColumn('string', 'Category');
         data.addColumn('number', 'Amount');
 
 
         
data.addRows([
 
 [new Date(2014, 6, 13),'CRATE AND BARREL #344', 'Merchandise',232.00],
 [new Date(2010, 4, 4),'HILTON HOTELS', 'Lodging', 252.99],
 [new Date(2010, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',56.23],
 [new Date(2010, 9, 6),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',24.50],
 [new Date(2010, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',18.00],
 [new Date(2010, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',645.67],
 
 
        ]);

       

        // Create a range slider, passing some options
        var dateRangeSlider = new google.visualization.ControlWrapper({
          'controlType': 'DateRangeFilter',
          'containerId': 'filter_div',
          'options': {
             'filterColumnLabel': 'Date',
'ui': { 'format': { 'pattern': 'yyyy' } },
          }
        });

        // Create a pie chart, passing some options
        var pieChart = new google.visualization.ChartWrapper({
          'chartType': 'PieChart',
          'containerId': 'chart_div',
          'options': {
            'width': 600,
            'height': 600,
'pieSliceText':'none'
           
          }
        });
// Create a table chart, passing some options
        var tableChart = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'table_div',
          'options': {
           
          }
        });
// use a "ready" event handler on the BarChart to aggregate the data for the PieCharts
    google.visualization.events.addListener(tableChart, 'ready', function () {
var dt = tableChart.getDataTable();
var catGroup = google.visualization.data.group(dt, [{
type:'string',
label:dt.getColumnLabel(2),
column: 2,
}],[{
type: 'number',
            label: dt.getColumnLabel(3),
            column: 3,
            aggregation: google.visualization.data.sum
}
]);
pieChart.setDataTable(catGroup);
 
        pieChart.draw();
});
// Create a dashboard.
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

        // Establish dependencies, declaring that 'filter' drives 'pieChart',
        // so that the pie chart will only display entries that are let through
        // given the chosen slider range.
        dashboard.bind(dateRangeSlider, [tableChart]);
var formatter = new google.visualization.NumberFormat(
 {prefix: '$',fractionDigits: 2});
 formatter.format(data,3); // Apply formatter to second column

        // Draw the dashboard.
        dashboard.draw(data);
 

      }
    </script>
  </head>

  <body>
    <!--Div that will hold the dashboard-->
    <div id="dashboard_div">
     <button onClick="changeRange1mo();">1 month</button>
      <button onClick="changeRange3mo();">3 months</button>
      <button onClick="changeRange6mo();">6 months</button>
      <button onClick="changeRange6mo();">12 months</button>
      <button onClick="changeRange24mo();">24 months</button>
      <button onClick="changeRange36mo();">36 months</button>
      <button onClick="changeRange48mo();">48 months</button>
      <button onClick="changeRangeYTD();">YTD</button>
    
    
      <!--Divs that will hold each control and chart-->
      <div id="filter_div"></div>
      
      
      <div id="chart_div"></div>
      <div id="table_div"></div>
     
    </div>
   
  </body>
</html>

Andrew Gallant

unread,
Sep 6, 2014, 6:47:36 PM9/6/14
to google-visua...@googlegroups.com
Works fine for me: http://jsfiddle.net/asgallant/zz3jov6p/

The only issue I see is that you have some errant commas at the end of your data array and in the grouping function:

data.addRows([
    [new Date(2014, 6, 13),'CRATE AND BARREL #344', 'Merchandise',232.00],
    [new Date(2010, 4, 4),'HILTON HOTELS', 'Lodging', 252.99],
    [new Date(2010, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',56.23],
    [new Date(2010, 9, 6),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',24.50],
    [new Date(2010, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',18.00],
    [new Date(2010, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',645.67], <-- this comma
]);

...

var catGroup = google.visualization.data.group(dt, [{
    type:'string',
    label:dt.getColumnLabel(2),
    column: 2, <-- this comma
}],[{
    type: 'number',
    label: dt.getColumnLabel(3),
    column: 3,
    aggregation: google.visualization.data.sum
}]);

These commas will cause older versions of IE to throw an error, but that's all I see here that is problematic.

Incidentally, since you are not doing any modifications to the data in column 2 when you group, you can reduce the grouping function to this:

var catGroup = google.visualization.data.group(dt, [2],[{
    type: 'number',
    label: dt.getColumnLabel(3),
    column: 3,
    aggregation: google.visualization.data.sum
}]);
Reply all
Reply to author
Forward
0 new messages