Create Charts in Web Apps using Google Apps Script on Google Sheets

[@CodeWithCurt]

Google Apps Script Code used in Video Below: function doGet(e) { return HtmlService.createHtmlOutputFromFile('WebAppChart'); } function getCases() { var ss= SpreadsheetApp.getActiveSpreadsheet(); var casesSheet = ss.getSheetByName("US COVID CASES"); var getLastRow = casesSheet.getLastRow(); return casesSheet.getRange(2, 1, getLastRow - 1, 2).getValues(); } function getPopulation() { var ss= SpreadsheetApp.getActiveSpreadsheet(); var populationSheet = ss.getSheetByName("CITY POPULATION"); var getLastRow = populationSheet.getLastRow(); return populationSheet.getRange(2, 1, getLastRow - 1, 4).getValues(); }

[@mo-leejaehyung3979]

Thank you for sharing!! It is work!!!

[@alfredgarrett6775]

Thank you soo much! I have been trying to make an example of this work with 7 other tutorials and all of them failed... Yours worked 1st time! Kudos!

[@ingridzabel566]

Thank you for this very clear explanation.

[@CodeWithCurt]

HTML, Javascript, jQuery, Chart.js Code used in Video Below: $( document ).ready(function() { getCases(); getCityPopulation(); }); function getCases() { google.script.run.withSuccessHandler(function(ar) { console.log(ar); var data = []; var label = []; ar.forEach(function(item, index) { data.push(item[1]); label.push(item[0]); }); var ctx = document.getElementById("lineChart").getContext("2d"); var lineChart = new Chart(ctx, { type: 'line', data: { labels: label, datasets: [{ label: 'Cases', fill: true, data: data, }] }, options: { maintainAspectRatio: false, elements: { line: { tension: 0.000001 } }, title: { display: true, text: 'COVID Cases US' }, scales: { xAxes: [{ display: true, }], yAxes: [{ display: true, }] } } }); }).getCases(); }; function getCityPopulation() { google.script.run.withSuccessHandler(function(ar) { console.log(ar); var data = []; var label = []; var color = []; ar.forEach(function(item, index) { data.push(item[2]); label.push(item[0]); color.push(item[3]); }); var ctx = document.getElementById("pieChart").getContext("2d"); var pieChart = new Chart(ctx, { type: 'pie', data: { labels: label, datasets: [{ //label: 'Cases', //fill: false, data: data, backgroundColor: color, }] }, options: { maintainAspectRatio: false, title: { display: true, text: 'CITY POPULATION' }, } }); }).getPopulation(); };

[@Rolroorlo]

Hey Kurt Im really interested in this, but for the polar or radar chart, the basic stuff I understand it, but I want to make a slightly more complex web app, so I cant fully pull it off just with this video, is there any chance I can contact you and "commission" this little project? its mostly for educational purposes for me

[@ahmedchouihi]

Thanks for the video , but Is there react version?

[@chetanborana5493]

Can able Convert to excel into web app with spreadsheet converter, easa software and xlsjuice ..But unable convert to google sheets into web app ..Pleases Help me for how to convert Google sheets into web app ....???

[@jaredaron5754]

pro trick : watch series at flixzone. Been using them for watching a lot of movies lately.

[@albertgannon4421]

@Jared Aron Definitely, I've been watching on flixzone for since december myself :)