Google Charts - alle Zeilen abfragen, aber nur mit 2 davon zeichnen. Wie?

Question

Ich versuche, Daten aus einer Google-Tabelle zu verwenden, um ein Kreisdiagramm (das funktioniert) zu zeichnen. Und wenn der Benutzer auf ein Segment klickt, sollte es die Werte in verschiedenen Divs anzeigen. Dies funktioniert nicht, da ich nur Zeile A und D abfrage, wie Sie sehen können, da diese zum Erstellen des Kreisdiagramms verwendet werden. Nun, was ich erreichen möchte, ist:

Verwenden Sie nur 1 Abfrage und zeichnen Sie den Kuchen mit Zeile A und D und verwenden Sie die gleiche Datentabelle, um die Variablen zu füllen. Kannst du mir helfen? :)

google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawGID); 
    function drawGID() { 
    var populationPieQuery = encodeURIComponent('SELECT A, D LIMIT 10'); 
    /*var serverQuery = encodeURIComponent('SELECT A, C, E, G, H, I, J, K, L, M, N, O LIMIT 20');*/ 

    var queryPopulation = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/11zIoeZsSi8jPD993uzYYNyY1PaVd4rxIkP4IJ0mUH7U/gviz/tq?sheet=Sheet1&headers=1&tq=' + populationPieQuery); 
    /*var queryServer = new google.visualization.Query(
     'https://docs.google.com/spreadsheets/d/11zIoeZsSi8jPD993uzYYNyY1PaVd4rxIkP4IJ0mUH7U/gviz/tq?sheet=Sheet1&headers=1&tq=' + serverQuery);*/ 
    queryPopulation.send(populationPieQueryResponse); 
    /*queryServer.send(serverQueryResponse);*/ 
} 

function populationPieQueryResponse(populationResponse) { 
    if (populationResponse.isError()) { 
    alert('Error in query: ' + populationResponse.getMessage() + ' ' + populationResponse.getDetailedMessage()); 
    return; 
    } 

    // Listen for the 'select' event, and call my function selectHandler() when 
    // the user selects something on the chart. 


    var options = { 
    width: 700, height: 500, 
    legend: { position: 'right', alignment: 'center' }, 
    chartArea: {width: '70%', height: '70%'}, 
    backgroundColor: 'transparent', 
    pieStartAngle: 180, 
    }; 

    var populationData = populationResponse.getDataTable().getValue(); 
    /*var serverData = serverResponse.getDataTable();*/ 
    var chart = new google.visualization.PieChart(document.getElementById('population_chart')); 
    google.visualization.events.addListener(chart, 'select', selectHandler); 
    chart.draw(populationData, options); 
    // The select handler. Call the chart's getSelection() method 
    function selectHandler() { 
    var selectedItem = chart.getSelection()[0]; 
    if (selectedItem) { 
     console.log(serverData.getNumberOfColumns()); 
     var server = serverData.getValue(selectedItem.row, 0); 
     var ranking = serverData.getValue(selectedItem.row, 1); 
     var population = serverData.getValue(selectedItem.row, 2); 
     var scripting = serverData.getValue(selectedItem.row, 3); 
     var latency_eu = serverData.getValue(selectedItem.row, 4); 
     var latency_us = serverData.getValue(selectedItem.row, 5); 
     var staff = serverData.getValue(selectedItem.row, 6); 
     var community = serverData.getValue(selectedItem.row, 7); 
     var type = serverData.getValue(selectedItem.row, 8); 
     var rates = serverData.getValue(selectedItem.row, 9); 
     var style = serverData.getValue(selectedItem.row, 10); 
     var language = serverData.getValue(selectedItem.row, 11); 

     document.getElementById("server").innerHTML=server; 
     document.getElementById("ranking").innerHTML=ranking; 
     document.getElementById("population").innerHTML=population; 
     document.getElementById("scripting").innerHTML=scripting; 
     document.getElementById("latency_eu").innerHTML=latency_eu; 
     document.getElementById("latency_us").innerHTML=latency_us; 
     document.getElementById("staff").innerHTML=staff; 
     document.getElementById("community").innerHTML=community; 
     document.getElementById("type").innerHTML=type; 
     document.getElementById("rates").innerHTML=rates; 
     document.getElementById("style").innerHTML=style; 
     document.getElementById("language").innerHTML=language; 
    } 

    } 
} 

aktualisieren

google.charts.load('current', {'packages':['corechart']}); 
    google.charts.setOnLoadCallback(drawGID); 

    function drawGID() { 
      var queryString = encodeURIComponent('SELECT A, D, B, E, F, G, H, I, J, K, L, M, N, O'); 
      var query = new google.visualization.Query(
       'https://docs.google.com/spreadsheets/d/11zIoeZsSi8jPD993uzYYNyY1PaVd4rxIkP4IJ0mUH7U/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString); 
      query.send(handleQueryResponse); 
     } 

     function handleQueryResponse(response) { 
      if (response.isError()) { 
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
      return; 
      } 

      var options = { 
      width: 700, height: 500, 
      legend: { position: 'right', alignment: 'center' }, 
      chartArea: {width: '70%', height: '70%'}, 
      backgroundColor: 'transparent', 
      pieStartAngle: 180, 
      }; 

      var data = response.getDataTable().getValue(); 
     var populationView = new google.visualization.DataView(data); 
     populationView.setColumns([0,1]); 


     var chart = new google.visualization.PieChart(document.getElementById('population_chart')); 
     google.visualization.events.addListener(chart, 'select', selectHandler); 

      // The select handler. Call the chart's getSelection() method 
      function selectHandler() { 
      var selectedItem = chart.getSelection()[0]; 
      if (selectedItem) { 
       var server = data.getValue(selectedItem.row, 0); 
       var ranking = data.getValue(selectedItem.row, 1); 
       var population = data.getValue(selectedItem.row, 1); 
       /*var scripting = data.getValue(selectedItem.row, 4); 
       var latency_eu = data.getValue(selectedItem.row, 5); 
       var latency_us = data.getValue(selectedItem.row, 6); 
       var staff = data.getValue(selectedItem.row, 7); 
       var community = data.getValue(selectedItem.row, 8); 
       var type = data.getValue(selectedItem.row, 9); 
       var rates = data.getValue(selectedItem.row, 10); 
       var style = data.getValue(selectedItem.row, 11); 
       var language = data.getValue(selectedItem.row, 12);*/ 

       document.getElementById("server").innerHTML=server; 
       document.getElementById("ranking").innerHTML=ranking; 
       document.getElementById("population").innerHTML=population; 
       /*document.getElementById("scripting").innerHTML=scripting; 
       document.getElementById("latency_eu").innerHTML=latency_eu; 
       document.getElementById("latency_us").innerHTML=latency_us; 
       document.getElementById("staff").innerHTML=staff; 
       document.getElementById("community").innerHTML=community; 
       document.getElementById("type").innerHTML=type; 
       document.getElementById("rates").innerHTML=rates; 
       document.getElementById("style").innerHTML=style; 
       document.getElementById("language").innerHTML=language; */ 
      } 

      } 
      chart.draw(populationView, options); 
     } 

Answer 1

eine DataView verwenden, um die PieChart

das Sie alle Daten zurückkehren können zu ziehen passieren Sie brauchen, und immer noch nur zwei Spalten nach PieChart

geht davon aus, dass die Spalten A und D zuerst in 'SELECT A, D, ...'

sind

var populationData = populationResponse.getDataTable(); 

var populationView = new google.visualization.DataView(populationData); 
populationView.setColumns([0,1]); 


var chart = new google.visualization.PieChart(document.getElementById('population_chart')); 
google.visualization.events.addListener(chart, 'select', selectHandler); 
chart.draw(populationView, options);