How to use Google Apps Script Charts in your Web App

Using Google Charts in your Web Application

    Today's hack will be a short tutorial on how to use Google Apps Script Charts in your web application.

It's kind of a continuation of my last installment on how to use images directly from your Google Drive. Many of the same lessons you learned there, are used here with the exception of a couple of things. So Google Apps Script has all the tools you need to generate your own Charts. This is a very underrated tool set which allows you to graphically display your information. This is core to being a programmer, and ultimately the job of any programmer; to display information in a readable manner to the user. Today's code is short and sweet, but it does touch all of the web developer layers HTML, CSS, and JavaScript. So let's begin.

First lets create an HTML output, but we will be using Google Apps Script template because we will be adding the image dynamically as it's generated. We assume we are using Charts because we are going to be using information from a source that will be dynamic. Otherwise generate one image, and don't use a repeated function.

1. function doGet(){
2. var w = HtmlService.createTemplateFromFile('index');
3. w.myChart = myChart();
4. return w.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
5. }

Now lets create the Chart we will be inserting into our Web Application. For this example I am just using one of the examples listed from the Google Apps Script Charts API. Once that's done we only need to convert the chart data into an png and return it's bytes as Base64 encoded to be used in our image element. Your return statement will be "return Utilities.base64Encode(chart.getAs('image/png').getBytes());".

1. function myChart(){
2. var sampleData = Charts.newDataTable()
3. .addColumn(Charts.ColumnType.STRING, "Month")
4. .addColumn(Charts.ColumnType.NUMBER, "Dining")
5. .addColumn(Charts.ColumnType.NUMBER, "Total")
6. .addRow(["Jan", 60, 520])
7. .addRow(["Feb", 50, 430])
8. .addRow(["Mar", 53, 440])
9. .addRow(["Apr", 70, 410])
10. .addRow(["May", 80, 390])
11. .addRow(["Jun", 60, 500])
12. .build();
14. var chart = Charts.newAreaChart()
15. .setTitle('Yearly Spending')
16. .setXAxisTitle('Month')
17. .setYAxisTitle('Spending (USD)')
18. .setDimensions(600, 500)
19. .setStacked()
20. .setColors(['red', 'green'])
21. .setDataTable(sampleData)
22. .build();
23. return Utilities.base64Encode(chart.getAs('image/png').getBytes());
24. }

Finally, lets write our bit of HTML that when ran through Google Apps Script template, the Base64 encoding of our image will be dynamically loaded in. Once rendered by users browser it will be a image all the same. Create a new HTML file called "index", and lets add the following code.

**codehere**

1. <div>
2. <img heigh="300px" src="data:image/png;base64,&lt;?=myChart ?&gt;">
3. </div>

Now hit the cloud icon, and save your initial version and you can now publish your new Chart!

    I hope this helps! As always you can  find my source here, and more on Google Apps Script Charts API here.