Using the charts and dashboard

Hi, here's my next post on using the dashboard charts from Google in the design of a site.  They're a very easy-to-use feature and give you a great way of quickly displaying data in a user-friendly format.

Basics

So the basics of using dashboard charts are pretty nicely covered in this article which I would advise to read first https://developers.google.com/apps-script/articles/charts_dashboard.  They're pretty easily created and then rendered onto the screen and CSS can be applied to give them some extra formatting.

For the purpose of this article I'm going to show how I've implemented them and in particular how I generated a comparative chart from 2 separate queries as shown in this screen shot where I'm running a comparative set of data.

Querying and Preparing the Data

So for my instance what I've generated is some dynamic charts which are based of data from a big query database.  There are three types of charts:

• Pie chart for a straight summary of data
• Bar and line charts for a "timeline" based chart of data
• In addition bar and line charts can be used for comparative analysis between two data sets

First thing to do is query my big-query tables.  In the code I'll show I'll cover the example where I produce the comparative charts as that's the most interesting.  First, run the queries:

Interesting points to see from the code above.  First I declare two arrays - this is because the data I get back from the queries is absolute numbers and I have to do the conversion to percentages for the charts.  Also, the actual comparisons between the data sets will be from those arrays so performance is critical when you need to do subsequent data processing - and where you need performance arrays are the way to go.  Also, note the last piece of code checking if there's no data to display - if not we can then give the user a nice, friendly message.

The next bit of code is probably more difficult to make sense of but here is where I populate the array with the data from the query in percentages by keep a running total of all the values.  

So now that we have everything in the two arrays from our two queries we can really get the benefit of using arrays when we need to loop through and "join" the two sets of data based on date.  

So now we've done all the hard work we can populate our charts with the data.  Note that for the bar and line charts I pass in 3 columns of data so the charts can be shown alongside each other - you can add any number of columns in so could do even more comparisons if that's what you want.  Notice also in the last section of code I create a shorten URI using the built-in Google API so people can easily share the chart.

As always, to see this in action "for real" just check out www.socialsamplr.com

Until next time...
My next post may not be for a couple of weeks as I'm off to *hopefully* catch some trout up at lake Taupo next weekend so it'll have to wait until after that.  The next post will be on my experiences developing my own sentiment analysis engine using Google prediction.

Till then, all the best

cheers

Daniel