Friday, July 13, 2012

Google Image Chart API - Compare data by Line chart

This API is very useful to generate graphs/charts without any API libraries or JavaScript. It provides the chart as images just by creating a URL. Using any language such as PHP, Java, .Net, Ruby, JavaScript, Apex, Visual force, Sales force, etc.. we can generate dynamic charts. 

For example:

The corresponding URL :


         I have generated this chart for comparing two months Google analytic data. I have integrated this chart to Sales force CRM using Apex language and Visual force UI along with the Google Analyics API.

Set the chart properties

   Chart size : chs=<width>x<height> Eg: chs=500x270
   Chart type : cht=<type>    Eg:cht=lc    (for line chart)

Set the chart data

   "chd" is the parameter used to send the chart data with the following format. The data series are separated by pipe character: "|" . The null values or empty values are represented by "_".


Eg:- chd=t:33,44,24,8,38,27,23,29,32,35,16,36,33,30,27,17,12,8,36,17,20,24,18,22,13,22,31,26,36,27,18|


Set the chart axis properties

   Visible Axes : chxt= <axis_1>,...,<axis_n> Eg: chxt=x,y
   Axis Range   : chxr= <axis_index>,<start_val>,<end_val>,<opt_step> |...| <axis_index>,<start_val>,<end_val>,<opt_step>
                         Eg: chxr=0,01,31,7|1,0,50,10
   Axis Labels  : chxl=<axis_index>:|<label_1>|...|<label_n>    |...|  <axis_index>:|<label_1>|...|<label_n>
                     Eg: chxl=0:|1-Apr+%28Mar%29|8-Apr+%28Mar%29|15-Apr+%28Mar%29|22-Apr+%28Mar%29|29-Apr+%28Mar%29

   Axis Label Styles : chxs= <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
                           Eg: 0,000000,12,0,lt,000000|1,000000,12,0,lt,000000

Dynamic axis label position

     For x-axis, the default labels positions are 0 to 100. In my chart, need to show the days of a month. I have to show only 7 days apart.  so I set

       chxr=0,01,31,7 (0:x-axis, 01:fist_day, 31:last_day, 7: steps).

    For y-axis,  the default labels positions are 0 to 100. But we have to plot dynamic values. So I have find the y-min & y-max from both set of data and used a fixed step 10
    ie chxr=1,0,50,10 (1:y-axis, 0:y-min, 31:y-max, 10: steps)

  Combining both chxr=0,01,31,7|1,0,50,10

Dynamic axis scaling

    The y-axis data may vary dynamically. We have y-axis based on the plotted value, so use y-min & y-max from both set of data.
    ie, chds=0,50 (y-min, y-max)

Dynamic grid line position
   we have to position the grid lines on the axis labels that we are labelled dynamically. For both x & y axis, there are default 100 grid line step sizes. Then we can to set the grid positions using the parameter "chg".

   chg= <x_axis_step_size>,<y_axis_step_size>,<opt_dash_length>,<opt_space_length>,<opt_x_offset>,<opt_y_offset>

  so we have to calculate the x_axis_step_size & y_axis_step_size dynamically.

  We can use the (100 * axis_steps) / (axis_ max_value - axis_ min_value) to find out the gidline step size.

  Hence for x-axis & y -axis ,
     x_axis_step_size =(100 * x_steps) / (x_max - x_min) = (100 * 7) / (31 - 1) = 23.33
     y_axis_step_size = (100 * y_steps) / (y_max - y_min) = (100 * 10) / (50 - 0) = 20

  ie, chg=23.33, 20

Apex code to set up chart axis

Integer yMax, yMin, yDiv = 10;
decimal ySteps, xSteps;        
if(math.mod(maxValue,yDiv) != 0){
    yMax = ((maxValue/yDiv)+1)*yDiv;
    yMax = maxValue;

if(math.mod(minValue,yDiv)!= 0){
    yMin = ((minValue/yDiv))*yDiv;
    yMin = minValue;
string str = '0,01,'+monthEnd+',7%7C1,'+yMin+','+yMax+','+yDiv; //0,01,31,7|1,0,20,5
chartObj.changeParam('cht' ,'lc');
xSteps = decimal.valueOf(100*7)/decimal.valueOf(monthEnd-1); // 100*7/(31-1) = 23.33
if(yMax <= 0){
    yMax = 10;
ySteps = (decimal.valueOf(1000)/(decimal.valueOf(yMax) - decimal.valueOf(yMin)));
str = xSteps.setScale(2)+','+ySteps.setScale(2);
chartObj.changeParam('chxl','0:%7C1-'+currMonthName+'+%28'+prevMonthName+'%29'+'%7C8-'+currMonthName+'+%28'+prevMonthName+'%29'+'%7C15-'+currMonthName+'+%28'+prevMonthName+'%29'+'%7C22-'+currMonthName+'+%28'+prevMonthName+'%29'+'%7C29-'+currMonthName+'+%28'+prevMonthName+'%29');// 0:|01|08|15|22|29|31st


NB: These posts are for my future references 

No comments:

Post a Comment