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 :
[http://chart.apis.google.com/chart?chds=0,50&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%7C17,35,47,36,31,38,16,10,34,33,37,25,16,11,8,20,32,23,32,19,18,22,29,35,22,39,26,15,18,18,_&chxs=0,000000,12,0,lt,000000%7C1,000000,12,0,lt,000000&chxt=x,y&chco=9BCE32,0098FF&chls=2%7C2.5&chg=23.33,20.00&chxr=0,01,31,7%7C1,0,50,10&chxl=0:%7C1-Apr+%28Mar%29%7C8-Apr+%28Mar%29%7C15-Apr+%28Mar%29%7C22-Apr+%28Mar%29%7C29-Apr+%28Mar%29&chm=d,9BCE32,0,-1,9.0%7Cd,0098FF,1,-1,9.0&chma=9,9,9,9&chs=500x270&cht=lc&]
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 "_".
chd=t:val,val,val|val,val,val...
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|
17,35,47,36,31,38,16,10,34,33,37,25,16,11,8,20,32,23,32,19,18,22,29,35,22,39,26,15,18,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>
|...|
<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 axisInteger yMax, yMin, yDiv = 10;
decimal ySteps, xSteps;
if(math.mod(maxValue,yDiv) != 0){
yMax = ((maxValue/yDiv)+1)*yDiv;
}else{
yMax = maxValue;
}
if(math.mod(minValue,yDiv)!= 0){
yMin = ((minValue/yDiv))*yDiv;
}else{
yMin = minValue;
}
string str = '0,01,'+monthEnd+',7%7C1,'+yMin+','+yMax+','+yDiv; //0,01,31,7|1,0,20,5
chartObj.changeParam('cht' ,'lc');
chartObj.changeParam('chxr',str);
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('chds',yMin+','+yMax);
chartObj.changeParam('chg',str);
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
References:
https://developers.google.com/chart/image/docs/chart_params#gcharts_grid_lines/docs/chart_params#gcharts_grid_lines
NB: These posts are for my future references