I am assuming that you want to use the grouped data in the PieChart. If
so, then you need to make a few changes to make this work. First, you need
to change the PieChart's columns: since you won't be referencing the core
DataTable, those column references are meaningless; it will instead draw
data from a grouped DataTable which will be created later. You might want
to use columns like this:
view: {
columns: [{
type: 'string',
label: 'Reference and Alt Combination',
calc: function (dt, row) {
return dt.getValue(row, 0) + ', ' + dt.getValue(row, 1);
}
}, 2]
}
Next, after creating the table, you need to add a 'ready' event handler
that grabs the data used by the table and groups it, then draws the pie
using that data:
var table = new google.visualization.ChartWrapper({
// table initialization
});
google.visualization.events.addListener(table, 'ready', function () {
var tempData = table.getDataTable();
var group = google.visualization.data.group(tempData, [3, 4], [{
column: 0, // doesn't matter what you pick here, but it should be
different than the columns you are grouping by
type: 'number',
aggregation: google.visualization.data.count
}]);
logChart.setDataTable(group);
logChart.draw();
});
Then you need to remove references to the PieChart from the binding:
dashboard.bind([platformPicker,altPicker], [table]).bind(platformPicker,
altPicker);
That should take care of it.
As an aside, you shouldn't be loading the charts inside a document ready
function like this. In the worst case scenario, the document could finish
loading after the visualization API finishes loading, and you would set the
API's load callback too late; the charts would not draw at all. Just move
the API code outside the $(document).ready(function (){...}); code block.
On Saturday, July 20, 2013 11:59:34 PM UTC-4, Ragini Pandey wrote:
>
> Hi,
>
> I an trying to create a piechart but only the label shows but the chart is
> not displayed. Here is the link.
> http://medeolinx.com/BASP/vcf-details-visualize.php
>
> Here is the code-
> <script type="text/javascript">
> google.load('visualization', '1.0', {'packages':['controls']});
> $(document).ready(function (){
> // Set a callback to run when the Google Visualization API is
> loaded.
> //alert("loaded");
> google.setOnLoadCallback(visualizebase);
>
> var vcffilename='vcf1';
> function visualizebase() {
> var jsonDataResult = $.ajax({
> url:"getvcfvisualizeData.php",
> data:{vcffilename:vcffilename,
> visualtype:'base'},
> dataType: "text",
> async: false,
> success: (
> function(data) {
>
> //alert(data);
> alert("loaded");
> var tData =
> google.visualization.arrayToDataTable(eval(data));
> // Create a dashboard.
> var dashboard = new
> google.visualization.Dashboard(document.getElementById('dashboard_div'));
> // Define a category picker for the 'Go Name'
> column.
> var platformPicker = new
> google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'platformPicker_div',
> 'options': {
> 'filterColumnLabel': 'Reference',
> 'ui': {
> //'allowTyping': true,
> 'allowMultiple': true,
> //'sortValues':true,
> 'labelStacking':'vertical',
> 'state': {'selectedValues': ['A',
> 'C']},
> 'selectedValuesLayout': 'belowStacked'
> }
> }
>
> });
>
> var altPicker = new
> google.visualization.ControlWrapper({
> 'controlType': 'CategoryFilter',
> 'containerId': 'altPicker_div',
> 'options': {
> 'filterColumnLabel': 'Alt',
> 'ui': {
> 'allowMultiple': true,
> 'labelStacking':'vertical',
> 'selectedValuesLayout': 'belowStacked'
> }
> }
>
> });
>
>
> var logChart = new
> google.visualization.ChartWrapper({
> 'chartType': 'PieChart',
> 'containerId': 'chart_div',
> 'options': {
> 'width': 550,
> 'height': 300,
> 'title': 'Ref and Alt',
> 'pieSliceText': 'value',
> 'legend': 'right'
> },
> 'view': {'columns': [3,4]}
> });
>
>
> var result = google.visualization.data.group(
> tData,
> [3,4],
> [{'column': 3, 'aggregation':
> google.visualization.data.count, 'type': 'number'}]
> );
>
> var table = new
> google.visualization.ChartWrapper({
> 'chartType': 'Table',
> 'containerId': 'table_div',
> 'options': {
> 'page': 'enable',
> 'pageSize': 20,
> 'pagingSymbols': {prev: 'prev', next:
> 'next'},
> 'pagingButtonsConfiguration': 'auto',
> 'showRowNumber':true
> }
> });
>
>
>
> //dashboard.bind(platformPicker,
> table).bind(platformPicker, altPicker).bind(altPicker, table);
> dashboard.bind([platformPicker,altPicker],
> [logChart,table]).bind(platformPicker, altPicker);
>
> dashboard.draw(tData);
>
> })
> });
> }
>
> });
> </script>
>
> Please help.
> I also needed help with grouping the 3,4 columns together to get the
> counts and show in some kind of chart
>
>
> Thanks
> Ragini
>
--
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.
