Data download toolbar to reference fusion table pie chart

100 views
Skip to first unread message

es

unread,
Jun 8, 2012, 1:26:35 PM6/8/12
to google-visua...@googlegroups.com
Hi,
I found a data download tool from here https://developers.google.com/chart/interactive/docs/gallery/toolbar that I'd like to encorporate in my web.  It enables users to download the dataset displaying on the map and pie chart.  I can't seem to get it to retrieve data from my fusion table and am not sure what I'm doing incorrectly. This is my fusion table: https://www.google.com/fusiontables/DataSource?docid=1EBnmpo78yOktZvEmYNJ8L-W0vwYzIWxtxsky7HM  In a different section of my code, when I reference my fusion table to display a pie chart, I include the"FROM  id number", as follows:
 
var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=');
   query.setQuery("SELECT Site, BCw, BCdep, Nup, Nimm, ANClimit, BCup " + "FROM 3235688  WHERE Site = '" + Site + "'");
query.send(function (response) {
        var baseData = response.getDataTable();
        var data = new google.visualization.DataTable();
        data.addColumn('string', baseData.getColumnLabel(0));
        data.addColumn('number', 'Value');
        for (var i = 1; i < baseData.getNumberOfColumns(); i++) {
            data.addRow([baseData.getColumnLabel(i), baseData.getValue(0, i)]);
        }
       
        google.visualization.drawChart({
            containerId: "visualization",
            dataTable: data,
            chartType: "PieChart",
            options: {
                title: Site,
    colors: ['#0000CC', '#3399FF','#66CC00', '#FFFF00', '#FF9933', '#FF0033',],
    legendTextStyle: {color:'#666666', fontSize: '11'},
    titleTextStyle: {color: '#006600',fontSize: '12'},    
    titlePosition: 'out',
    legend:'left',
    is3D:true,
                height: 150,
                width: 350,
    backgroundColor: 'none',
    tooltip: {textStyle: {color: 'black'}, showColorCode: true},
    pieSliceText: 'percentage',
    pieSliceTextStyle: {color: 'white', fontSize: '11'},
    chartArea: {top:'30', left:'5', height:"80%", width:"70%"}
    
            }
 
I don't really want to include a second pie chart (which is in the example); I'd just like it to reference the above pie I'm already using.  Please see the code below for the toolbar that I am trying to use.  Perhaps I'm missing the "FROM id number"?
 
 

function draw() {
drawToolbar();
}   
function queryCallback(response) {
 visualization.draw(response.getDataTable(),
            {is3D: true});
 }   
 function drawToolbar() {
  var components = [
        {type: 'igoogle', datasource: 'http://www.google.com/fusiontables/gvizdata?tq=',
        gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
        userprefs: {'3d': 1}},
        {type: 'html', datasource: 'http://www.google.com/fusiontables/gvizdata?tq='},
        {type: 'csv', datasource: 'http://www.google.com/fusiontables/gvizdata?tq='},
        {type: 'htmlcode', datasource: 'http://www.google.com/fusiontables/gvizdata?tq=',
        gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
        userprefs: {'3d': 1},
        style: 'width: 800px; height: 700px; border: 3px solid purple;'}
        ];
  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
  }; 
  google.setOnLoadCallback(draw);
//above this line ends the download data tool
 
Reply all
Reply to author
Forward
0 new messages