by +Cesar Anton
Google Chart's are pretty cool! they help you easily add charts to your web pages/apps with a very professional and clean output, even better, when they make updates to the Charts, the improvements get's applied to your page or app automatically and most of the time with no or very little modifications to your code.
There's also the Google Chart's Playground that will help you to easily code and test your charts, and it's full of very useful examples. If you haven't tried already, I suggest you to check it out when you get a chance.
But hand-writing static data for your charts it's not what you are looking for in most cases, luckily the guys at the Google Charts team provided many ways to import your data, on this article I will focus on what I believe it's the most powerful/flexible feature of Google docs which is Spreadsheets. With a capacity of 400,000 cells it's more than adequate for most small/medium size DB needs and it's pretty fast if used properly! With the added benefit that you can see, share and edit the DB itself directly from the spreadsheet, it's like a 1,000 times more natural for any normal human than reading it from raw code and/or having to make query's to get some data like with SQL or even Google Cloud Storage (which it's usually CSV data).
First we need to see our data, let's imagine we have a few Salesman and we record the every sale in a spreadsheet saving the salesman's name, the amount he/she sold and the date.
It's a best-practice to start the function that will parse the response with an error handler, this could be easily done using an if-clause like this.
Now we have to build the filter, assuming we want to change the order to |Date|Salesman|Sale|. This is a very simple way to plan the filter by analysing our Spreadsheet's headers:
To do this filter, first we name the variable, then we call the Visualization's API data class to group and rearrange our data, this method requires the name of the variable containing the original data (in this case data), then we write the number of the columns in the order we want to show/group, finally we want to sum the last column (Sales) to show the total sale of each salesman, each day.
It's ready to draw! for this kind of data a Tabla Chart it's the most suitable one. (We'll discuss how to take the most out of a Date|Object|Sum piece of data parsing it to properly display inside a Line Chart) but first we need to add the $ prefix to the Sales column, here's how to do it:
Note: Use the column number of the filtered data table (chartFilter).
But just plain numbers inside a Table Chart it's boring right? to get that you can just use an iframe to display the data and save yourself all the trouble... But a Table Chart can do so much more, let's just scratch the surface by embedding some HTML formatting to the cells to give it a little bit more flavor, let's embed a Bar Format to make your Table more meaningful for the user.
Well, it's time to put it all together, let's get a look at it!
To see it in action (and check the complete HTML), click on the following image:
Also, if you like the contents of this article there is a public folder with all the documents, pictures and the example page in the following link:
Feel free to post your ideas, suggestions, requests, etc at the bottom of this article.