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
}]);
On Saturday, September 6, 2014 8:01:55 AM UTC-4, Derek Williams wrote:
>
> 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>
>
>
>
>
>
>
> On Saturday, May 31, 2014 7:23:12 PM UTC-4, Andrew Gallant wrote:
>>
>> Can you share a complete example that demonstrates the problem? I have
>> never seen decimal values cause a chart to fail to draw.
>>
>> On Saturday, May 31, 2014 3:18:16 AM UTC-4, Vikas Sangal wrote:
>>>
>>> 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.
>>>
>>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
