Google Chart( Bar chart ) to CiviContribution Section to Display Monthly and Yearly contribution

The Google Chart API is so simple yet so powerful that can give you some amazing features:

• Create charts simply by using URL with some parameters

• Inserting the chart is as simple as you would be inserting an image

• The chart is created on the fly dynamically

• No need of server side coding

• No need of JavaScript to code or view your chart

• Any resolution of the chart with only a change in URL parameters

• Manipulating the parameters of the URL would change the chart

• A variety of styles to choose as per your tastes.

Lets take a simple case study for our chart. Suppose you are showing Contribution to orgnization using monthly and yearly basis and instead of showing the data in tabular format you could show the data with some visual cues. Charts are the perfect way to do it.

So if I have to represent this data in the form of a chart then first of all I simply need to choose the chart type. Here i choose the Vertical Bar chart. So for drawing the chart we will have to build a URL with in this fashion:

• http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

Select the particular chart name, Here it is bvg. So the first parameter of the URL will be:

• cht=bvg

Now for the data, I will use the Text encoding technique. According to the technique data representation would be done as follows:

• chd=t:<chart data string>
For example:chd=t:25.00,250.00,10.00,175.00,500.00,125.00,50.00,50.00,70.00,150.00,200.00,55.00
(comma ',' separated values indicate the contribution of respective month in the chart)

We have to specify the resolution for the chart. Here height of 250px and the width of 440px. So the parameter would be,

• chs=440x250

Titles have to be given to the data representation. So, for each of the amount in the data we would have to give its equivalent number of pipe delimited titles as follows,

• chl=chl=Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec

Marker for each bar on the top, show the exact value of contribution, equivalent number of pipe delimited Marker as follows

• chm=t25.00,0000FF,0,0,10|t250.00,0000FF,0,1,10|t10.00,0000FF,0,2,10|......
description: chm=<marker type>,<color>,<data set index>,<data point>,<size>,<priority>|...

Axis Label: we represent it as Currency with Amount

• chxl=1:|0|USD-600
chxl=<axis index>:|<label 1>|<label n>|..

Finally we come to the coloring part. You can specify any color you require. The API automatically shades the other chart divisions if the appropriate number of colors are not provided. Here in this chart there are three 3 colors:

• chco=99C754|54C7C5|999999

Our chart is complete! You just have to combine the URL with the parameters and put in your browser’s address bar.
Google will do the rest of the stuff for you.

• http://chart.apis.google.com/chart? cht=bvg& chs=440x250& chd=t:25.00,250.00,10.00,175.00,500.00,125.00,50.00,50.00,70.00,150.00,200.00,55.00& chl=Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec& chtt=By%20Month%20-%202007& chco=99C754|54C7C5|999999& chxl=1:|0|USD-600& chxt=x,y& chds=0,600& chf=bg,s,fafafa& chm=t25.00,0000FF,0,0,10|t250.00,0000FF,0,1,10|t10.00,0000FF,0,2,10|t175.00,0000FF,0,3,10|t500.00,0000FF,0,4,10|t125.00,0000FF,0,5,10| t50.00,0000FF,0,6,10|t50.00,0000FF,0,7,10|t70.00,0000FF,0,8,10|t150.00,0000FF,0,9,10|t200.00,0000FF,0,10,10|t55.00,0000FF,0,11,10

  • 

    You are seeing the live representation of the chart above. Left side chart show the Month Contribution for Year(above discussion) and Rigth side show the Year wise Contribution You can include a Chart API image in a webpage by embedding a URL within an IMG tag. When the webpage is displayed in a browser the Chart API renders the image within the page.

    Comments