You are trying to use the chart object chartDiff to compute diffData before
you create the chart object - you need to calculate the diff after creating
the chart:
var chartDiff = new
google.visualization.PieChart(document.getElementById('pie_diff'));
var diffData = chartDiff.computeDiff(prod_total, prod_bd);
chartDiff.draw(diffData, options4);
Even if you do that, however, your script will bomb on that line because
prod_total and prod_bd have different numbers of rows, so you cannot
compute the diff between them. Both DataTables used to create a diff must
have the same number of rows. Also, with PieCharts, the slices are
labelled according to the labels in the new data set (the second DataTable
passed to the #computeDiff method, prod_bd in your case), even if they are
different from the old table; so if you added two rows of data to prod_totalto
make it the same as
prod_bd, the label of the first slice would be "Pull Request", not
"Production - Total".
On Thursday, January 23, 2014 4:44:46 PM UTC-5, Brandon H. wrote:
>
> i am trying to create a very simple diff pie chart but for some reason the
> following code is not working for me. if i comment out 'var diffData ='
> line, i see one chart. if i uncomment the line, the code blows up and shows
> nothing. any idea why?
>
> <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 piechart package.
>>
>> google.load('visualization', '1.1', {'packages':['corechart']});
>>
>>
>>> // Set a callback to run when the Google Visualization API is loaded.
>>
>> google.setOnLoadCallback(drawChart);
>>
>>
>>> // Callback that creates and populates a data table,
>>
>> // instantiates the pie chart, passes in the data and
>>
>> // draws it.
>>
>> function drawChart() {
>>
>>
>>> // Create the data table.
>>
>> var batch_data = google.visualization.arrayToDataTable([
>>
>> ['Task', 'Migration'],
>>
>> ['Active - Production', 352],
>>
>> ['Active - Test', 45],
>>
>> ['Other - Non-Active', 673]
>>
>> ]);
>>
>> // Create the data table.
>>
>> var prod_total = google.visualization.arrayToDataTable([
>>
>> ['Task', 'Migration'],
>>
>> ['Production - Total', 397]
>>
>> ]);
>>
>>
>>> var prod_bd = google.visualization.arrayToDataTable([
>>
>> ['Task', 'Migration'],
>>
>> ['Pull Request', 173],
>>
>> ['Push Request', 113],
>>
>> ['Other Request', 66]
>>
>> ]);
>>
>>
>>> var data3 = google.visualization.arrayToDataTable([
>>
>> ['Task', 'Migration'],
>>
>> ['Production - Migration', 471],
>>
>> ['Test/Other - Non-Migration', 599]
>>
>> ]);
>>
>>
>>> // Set chart options
>>
>> var options = {
>>
>> title: 'Active Batch Files | 2009 - Present',
>>
>> titleTextStyle: {fontSize: 26},
>>
>> width: 700,
>>
>> height: 600,
>>
>> tooltip: {trigger: 'none'},
>>
>> pieSliceText: 'value',
>>
>> legend: {alignment: 'center', position: 'bottom'},
>>
>> is3D: true,
>>
>> };
>>
>> // Set chart options
>>
>> var options2 = {'title':'How Much Pizza You Ate Last Night',
>>
>> 'width':400,
>>
>> 'height':300};
>>
>> // Set chart options
>>
>> var options3 = {'title':'Line chart',
>>
>> 'width':400,
>>
>> 'height':300};
>>
>> var options4 = { pieSliceText: 'none' };
>>
>>
>>> var diffData = chartDiff.computeDiff(prod_total, prod_bd);
>>
>> // Instantiate and draw our chart, passing in some options.
>>
>> var chart = new
>>> google.visualization.PieChart(document.getElementById('pie1'));
>>
>> chart.draw(batch_data, options);
>>
>> var chart2 = new
>>> google.visualization.PieChart(document.getElementById('pie2'));
>>
>> chart2.draw(prod_bd, options2);
>>
>> var chartDiff = new
>>> google.visualization.PieChart(document.getElementById('pie_diff'));
>>
>> chartDiff.draw(diffData, options4);
>>
>> }
>>
>> </script>
>>
>> </head>
>>
>>
>>> <body>
>>
>> <!--Divs that will hold the charts-->
>>
>> <table>
>>
>> <tr>
>>
>> <td style="width: 50%;">
>>
>> <div id="pie1"></div>
>>
>> </td>
>>
>> <td style="width: 50%;">
>>
>> <div id="pie_diff"></div>
>>
>> </td>
>>
>> </tr>
>>
>> </table>
>>
>> </body>
>>
>> </html>
>>
>>
--
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/groups/opt_out.
