Column 3 is "Reference" and column 4 is "Alt", both of which are string
columns. The PieChart expects a string column and a number column, so how
would you like to create those? If you want to chart a count of each pair
of reference and alt, this is how you would do it:
google.load('visualization', '1.0', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(visualizebase);
function visualizebase() {
var vcffilename='vcf1';
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: [{
type: 'string',
label: 'Reference and Alt Combination',
calc: function (dt, row) {
return dt.getValue(row, 0) + ', ' +
dt.getValue(row, 1);
}
}, 2]
}
});
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
}
});
google.visualization.events.addListener(table, 'ready',
function () {
var tempData = table.getDataTable();
var group = google.visualization.data.group(tempData, [3,
4], [{
column: 0,
type: 'number',
aggregation: google.visualization.data.count
}]);
logChart.setDataTable(group);
logChart.draw();
});
dashboard.bind([platformPicker,altPicker],
[table]).bind(platformPicker, altPicker);
dashboard.draw(tData);
}
});
}
On Sunday, July 21, 2013 9:31:43 AM UTC-4, Ragini Pandey wrote:
>
> It's not working. I am not an expert so may be I am using it a wrong way.
> :( Will it be possible for you to incorporate your suggestions in the
> script block I send you and attach here maybe.
>
> My second question is I thought I can draw a simple piechart on columns 3
> and 4. Is it not possible? Why am I not seeing any errors and neither the
> graph.
>
> "Just move the API code outside the $(document).ready(function (){...}); code
> "
> Which line I need to move I am not sure. Please let me know
>
> Ragini
>
>
>
> On Saturday, 20 July 2013 23:59:34 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.
