[JS]: Google Charts database query vanuit Google Spreadsheet - Softwareontwikkeling

maandag 10 augustus 2015 22:12

Acties:

0 Henk 'm!

Topicstarter

Beste allemaal,

Ben me aan het verdiepen in de visualisaties van Google Charts en is eigenlijk ook de eerste keer dat ik met JS bezig ben. Dankzij de zeer uitgebreide handleiding van Google zelf en door uiteraard gebruik van een bepaalde zoekmachine

...

Inmiddels ben ik zover dat ik voorgekouwde JS kan lezen, begrijp wat er staat en dit naar mijn wensen redelijk kan aanpassen. Nu ben ik echter toch wat tegengekomen waarvan ik hoop dat iemand me een handje in de juiste richting kan helpen:

In dit spreadsheet (Testsheet) heb ik in het menu zelf een knop "Dashboard" aangemaakt die naar 3 grafieken verwijst, gebaseerd op data uit de sheet zelf. Dit lukt goed en kan inmiddels ook multipele datasets uit de sheet uitroepen en vertalen naar een Chart.

Ik ben aan het klooien geweest met de Geochart en die lukt inmiddels ook (optie 2). De code die ik daarbij gebruik is:

HTML:

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawGID);

      function drawGID() {
      var queryString = encodeURIComponent('SELECT E, F, G LIMIT 5');
      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1jzPF0FF2gP6-z_l0LsfooJP7gY6WOZfH-FoynPNiuu8/gviz/tq?gid=0&headers=1&tq=' + queryString);
      query.send(handleQueryResponse);
      }
      
      function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      var options = {
        region: 'NL',
        displayMode: 'markers',
        colorAxis: {colors: ['green', 'blue']}
        };

      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Echter als ik vervolgens op dezelfde de sheet aanspreek bij het gebruik van de Maps chart ipv geochart, laad hij het script wel, maar ik zie niets.

HTML:

<html>
  <head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script>
    google.load('visualization', '1', { 'packages': ['map'] });
    google.setOnLoadCallback(drawGID);

      function drawGID() {
      var queryString = encodeURIComponent('SELECT E, F, G LIMIT 4');
      var query = new google.visualization.Query(
          'https://docs.google.com/spreadsheets/d/1jzPF0FF2gP6-z_l0LsfooJP7gY6WOZfH-FoynPNiuu8/gviz/tq?gid=0&headers=1&tq=' + queryString);
      query.send(handleQueryResponse);
      }
      
      function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      }

      var data = response.getDataTable();
      var options = { showTip: true };

      var map = new google.visualization.Map(document.getElementById('chart_div'));

    map.draw(data, options);
  };
  </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Waarschijnlijk gaat er toch ergens iets mis met of het formaat van de data in de sheet of de manier waarop de data wordt gevoerd aan de chart (

Java:

1	var data = response.getDataTable();

.

Ik zou iemand zeer dankbaar zijn voor een setje in de goede richting.

Thanks!

dinsdag 11 augustus 2015 13:24

Acties:

0 Henk 'm!

reshi

Het ligt inderdaad aan de opmaak van je sheet, als je het voorbeeld van Google pakt:
var data = google.visualization.arrayToDataTable([
['Country', 'Population'],
['China', 'China: 1,363,800,000'],
['India', 'India: 1,242,620,000'],
['US', 'US: 317,842,000'],
['Indonesia', 'Indonesia: 247,424,598'],
['Brazil', 'Brazil: 201,032,714'],
['Pakistan', 'Pakistan: 186,134,000'],
['Nigeria', 'Nigeria: 173,615,000'],
['Bangladesh', 'Bangladesh: 152,518,015'],
['Russia', 'Russia: 146,019,512'],
['Japan', 'Japan: 127,120,000']
]);

En dat zet je in jou HTML werkt het wel.

dinsdag 11 augustus 2015 17:01

Acties:

0 Henk 'm!

Pabz

Topicstarter

Dat snap ik en dat ik me zelf ook gelukt, maar de essentie is natuurlijk dat de data uit mijn sheet wordt opgehaald. Op deze manier veranderd de chart mee als de data wijzigt.
Bij de andere charts werkt het namelijk wel.

[ Voor 11% gewijzigd door Pabz op 11-08-2015 17:02 ]

woensdag 12 augustus 2015 12:09

Acties:

0 Henk 'm!

reshi

Als je input (lees je sheet) niet klopt, dan gaat Google daar nooit wat mee doen. Je zal je data in je sheet dus moeten conformeren aan de standaard die Google verwacht voor het type kaart (api) wat je wilt gebruiken.

Als ik het goed zie verwacht Google dat kolom twee van het type STRING is, maar jou kolom is van het type NUMBER.