Last active
May 22, 2023 14:23
-
-
Save bpwebs/f128300c753a762d1591981c878c5c96 to your computer and use it in GitHub Desktop.
Visualize Google Sheets Data in HTML Charts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function doGet() { | |
| return HtmlService.createHtmlOutputFromFile("Index"); | |
| } | |
| function getChartData(){ | |
| const ss = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data"); | |
| const data = ss.getDataRange().getValues(); | |
| return data; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!--REF: https://developers.google.com/chart/interactive/docs/quick_start--> | |
| <html> | |
| <head> | |
| <base target="_top"> | |
| <script src="https://www.gstatic.com/charts/loader.js"></script> | |
| <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(drawChart); | |
| function drawChart() { | |
| google.script.run.withSuccessHandler(displayChart).getChartData(); | |
| } | |
| function displayChart(data) { | |
| var chartData = google.visualization.arrayToDataTable(data); | |
| // Set chart options | |
| var options = { | |
| title: 'Sales Data Visualization', | |
| is3D: true | |
| // Additional chart options | |
| }; | |
| // Instantiate and draw our chart, passing in some options. | |
| var chart = new google.visualization.PieChart(document.getElementById('pie_chart')); | |
| chart.draw(chartData, options); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <!--Div that will hold the pie chart--> | |
| <div id="pie_chart" style="width: 50%; height: 400px;"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment