Graph your Debt Snowball using Google Chart


in Chart,Web

Say your like me and would like to graph some of your stuff and share it with the InterWeb  like say your debt snowball, or your Slanket inventory, or your Sham-wow sales and don’t want to do any serious coding. The Google Chart API has got you covered.  Making a call to the API will return a PNG format image.  Let’s start off with a simple example cut and paste the following code into your browser’s address bar.  The complete details of the API are at Googles API Reference and includes a complete list of parameters and values.

Pie Chart Example

FiscalGeek PieChart,5&cht=p3&chl=FiscalGeek|Rulz

 It should give you pie chart goodness.  Let’s take a look at the details here.  Parameters are entered one after the other separated by &with the exception of the first parameter after the ?. 

Obviously a link to Googles chart API is required and then we start with the first attribute chs=300×100.  Simple enough this is specifying the size of the chart. 

The next entry &chd=t:95,5is specifying the data to the chart, default values need to be between 0 and 100 separated by commas.  We’ll cover in a bit how you can enter wider ranges of values.

The third parameter cht=p3 specifies that we want to see a pie chart, but could have just as easily picked a bar chart, a scatter plot, radar charts, maps and so on.

Finally the last parameter &chl=FiscalGeek|Rulzspecifies the text of the labels ordered in the same fashion as your data entry meaning the 95 value is applied to FiscalGeek and the 5 value applied to the Rulz label.  This is a relatively simple example, buckle up for our next example in which we’ll graph some larger values in a bar chart.

 Bar Chart Example

Let’s just get to it here’s the code and resulting graph and we will perform some reconstructive surgery on these parameters.FiscalGeek Debt Snowball

Break it down Now!

Parameter Detail
chs=225×180 Chartsize in this case 225×180 pixels
&chd=t:63536,55766,55114,53927,52822,51426,50676,50035,48515 This is the chart data with the actual data separated by commas in this case sense we are beyond the 0..100 value limit this needs to be paired with the next parameter &chds=0,65000 to provide increased data scaling
&chds=0,65000 We are specifically saying here that we want the data values to go from 0 to 65000 effectively defining the data range.
&cht=bvg In this case we’re setting the chart type to a vertical bar chart
&chxt=x,y We are specifying the axis that we want to appear on the chart specifically the X and Y axis
&chxr=1,0,65000,6500 Alright hold on to your hat we’re starting to get into it here.  We’re assigning an axis range of values here.  First we’re looking at axis index 1 which is the Y axis.  The indexes start at 0 and are based on the order in &chxt so by this case the X axis would be axis index 0.  Okay blaze on the second value is the start of the range, third is the top end and the last is the increments of the values.
&chxl=0:|1/15|2/2|2/18|3/5|3/25|4/7|4/17|5/4|5/18| Okay here we are specifying the date for each of the bars in the graph start with the Axis index remember it’s 0 for X then : and the values separated by |
&chf=c,lg,0,76A4FB,1,FFFFFF,0|bg,s,EFEFEF This parameter is specifying the Fill of the graph in this case we’re doing a gradient You can specify the hex values of the colors to modify your chart so the breakdown: c = Chart area fill, lg = linear gradiant, 0 = the angle of the gradient, 76A4FB = Blue on the right of the gradient, 1 = the offset, FFFFFF = White on the right of the graph, 0 = the offset and then finally we specify the colors of the background.
&chco=326F32 Here we are specifying the color of the bars in the chart
&chtt=FiscalGeek+Debt+SnowBall Specifying the Chart Title here separate words with spaces by using the + sign
&chbh=a,5,5 Finally we are specifying the size of the bars in this case we’re having them auto sized = a then a 5 pixel space between bars and lastly 5 pixel space between groups

That should be enough to get you started, there’s a fair amount of trial and error you need to go through to get your charts looking just right and displaying the way you’d expect but a very handy way to get your crap graphed..word. 

Important Note: if you are going to reference your chart in an html tag ala an img src tag then you’ll need to make the ampersand’s actually & so your parameter would look like: &cht=p3 rather than &ch=p3. Chart away……

Comments on this entry are closed.

Previous post:

Next post: