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.

How to add images in your Google Apps Script Web Application

Today's hack, how to add images into your google apps script website without using a hosting solution. This is a fairly advanced topic, and does require the use of a little *nix command line to get it done. It also covers some HTML, and CSS subjects which hopefully you are familiar with since you are using Google Apps Script to make your website.  You will also need to know your way around Google Drive, and Google Apps script. As always you can visit the Google App Script +Google Community as they are always a helpful bunch.

If you've been tinkering with Google Apps Script for web development for any amount of time I'm sure you have ran across the problem of how to use images in your website without having to host the images on a separate server, and url link them in your CSS. I have come up with two solutions for this problem, both will be outlined. The first, which is pretty straight forward, and can be easily accomplished using Google Draw. The second is a little more complicated, and requires the use of a little linux command line magic to get it done.  So lets get started!

Lets open a fresh project, and write the framework we need to create a barebones Webpage.  We will need to create 3 files for this, and we will be using a bit of template magic to make it happen as well.

• Just for sanity purposes. code.gs, index.html, and logo.html. 
  
• Now using Google Draw, lets create our logo we plan on using in our website. For this example, a simple smiley face will do.
  

• Now you want to download the image to your computer as a SVG.
  
• Once that is done, open the SVG file with your favorite text editor and copy everything but the first line, which will will look like this. **Avoid copying the line that says "<?xml version="1.0" standalone="yes"?>" **
  

• Now lets paste that into your logo.html. 
  
• Finally lets write the include which using the template language will add that to the div you are wanting your image in. 
  
• Finally lets write the include which using the template language will add that to the div you are wanting your image in.
  
• You can apply a style to your SVG tag to adjust the height, and width you want with your image the same as any HTML element.
  
•  Once published, you will see your created logo!
  

Great, we've now used a SVG for a logo. But for better resolution backgrounds and better quality pictures. I like to use PNG's. But you can't just use PNG files, first you need to convert them into base64, and then strip them of white space. For this we will need a little linux command line magic. So lets begin. 

• You want to avoid using files larger than 2mb's in this process as it will slow your application delivery down considerably. So find a PNG you wish to use, and download the file. 
  

• Now to the command line magic. Run the following command at the console " cat **NAME OF FILE**.png | base64 > temp.base64 && tr -d '\n' < temp.base64 >> image.base64 && rm temp.base64  " in the same directory as your PNG file replacing the text where is says **NAME OF FILE** with the name of the png, and you should now see a file called image.base64. 
  
• Now simply upload image.base64 into your Google Drive.

• Now lets write the CSS to include this file as a background image. 
  

Great! Now we have used both PNG's, and SVG's in our Google Apps Script Web Applications! I hope this helps! You can always view the full source here.