[visualization-api] NOOB: Help wanted to clean up code and solve an error...

Thu, 28 Feb 2019 07:17:45 -0800 

I am trying to build a graph based on information from a Google Sheets 
file. In a previous question some people helped me get this going, but it 
now combines building a graph manually and from Sheets. I am not sure where 
I can separate the two, so I would like to clean up the code to just build 
the graph based on the Google Sheets info.

Besides that, I have created a new Sheets file, linked that to the code as 
I did before, but now it gives a data type error: "All series on a given 
axis must be of the same data type" which I would love to solve, but as I 
don't understand how the source now is built up to work, I cannot solve 
this puzzle.

Who can help me out? I'm sure it is probably simple, but I am just missing 
it...

This is the test page: http://businessfabriek.com/scores/testscore.html

This is the type of Google 
Sheet: 
https://docs.google.com/spreadsheets/d/1KiC1q5_CM7SsAwVXNw7t-kvXMhhZXyWa3LMU8_kMwCc/edit?usp=sharing

This is the code used: 


<html>
  <head>
            <meta http-equiv="refresh" content="300" />

<!--Load the AJAX API-->
<script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js";></script>

<p><img src="https://www.dockwize.nl/templates/elloro/img/logo.svg"; 
width="100"></p>

<script>

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['corechart']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(function() {
  // drawChart();
  drawGID();
});

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {

  // Create the data table.
  var data = google.visualization.arrayToDataTable([
    ['Genre', 'Bonus', 'Organisatie', 'Lean Canvas', 'Visuele presentatie', 
'Marktpotentieel',
      'Persbericht', 'Landingspagina', 'Product specificatie', 'Pitch 
video', 'Pitch', {
        role: 'annotation'
      }
    ],
    ['Team 1', 0, 10, 24, 20, 32, 18, 5, 18, 5, 10, ''],
    ['Team 2', 0, 16, 22, 23, 30, 16, 16, 9, 9, 10, ''],
    ['Team 3', 0, 16, 22, 23, 30, 16, 9, 16, 9, 10, ''],
    ['Team 4', 10, 16, 16, 9, 22, 23, 30, 16, 9, 10, ''],
    ['Team 5', 20, 16, 22, 23, 16, 9, 30, 16, 9, 10, ''],
    ['Team 6', 0, 16, 22, 23, 30, 16, 9, 16, 9, 10, ''],
    ['Team 7', 0, 28, 19, 29, 16, 9, 30, 12, 13, 10, '']
  ]);



  // Set chart options
  var options = {
    width: 1000,
    height: 500,
    legend: {
      position: 'top',
      maxLines: 3
    },
    bar: {
      groupWidth: '75%'
    },
    isStacked: true,
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new 
google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

var dt = new Date();
document.getElementById("datetime").innerHTML = (("0" + (dt.getMonth() + 
1)).slice(-2)) + "/" + (("0" + dt.getDate()).slice(-2)) + "/" + 
(dt.getFullYear()) + " " + (("0" + dt.getHours() + 1).slice(-2)) + ":" + 
(("0" + dt.getMinutes() + 1).slice(-2));


function drawGID() {
  var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 
OFFSET 8');

  var query = new google.visualization.Query(
    
'https://docs.google.com/spreadsheets/d/1KiC1q5_CM7SsAwVXNw7t-kvXMhhZXyWa3LMU8_kMwCc/edit?usp=sharing'
 
+ queryString);
  query.send(handleQueryResponse);
}

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

  var data = response.getDataTable();
  var chart = new 
google.visualization.ColumnChart(document.getElementById('chart2_div'));
    var options2 = {
    width: 1000,
    height: 500,
    legend: {
      position: 'top',
      maxLines: 3
    },
    bar: {
      groupWidth: '75%'
    },
    isStacked: true,
  };
  chart.draw(data, options2);
}
</script>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
<div id="chart2_div"></div>

Laatste keer ververst:<span id="date"></span>
<script>
document.getElementById("date").innerHTML = Date();
</script>


  </body>
</html>



-- 
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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/0b7dd0b5-3c3c-469b-b60d-b709181b203a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to