How to Create a Chart using Google API?

Google chart API is allows the developer to create graphs simply by using an URL with correct parameters. It is quite easy to generate a chart.

All Chart URLs have the following format:

https://chart.googleapis.com/chart?cht=<chart_type>&chd=<chart_data>&chs=<chart_size>&...additional_parameters...


Parameter values:

1. cht ( Chart Type ): Its nothing but a chart type that you want, and put in the corresponding code which can be found from Google’s Developer’s Guide.

Syntax:	  cht=<chart_type>
Example:  cht=p3

The chart type: here, a 3D pie chart.

2. chs ( Chart Size ) : The size of the graph in pixels chs=<width>x<height>.

Syntax:	  chs=<width>x<height>
Example:  chs=450x200

The chart size (width x height), in pixels.

3. chd ( Chart Data ) : For pie charts you need to make sure that the sum of your data points is 100 – ie. calculate the percentages and use the percentages as your data points.

Read: How To Create Custom Function Using SOAP API

Syntax:   chd = t:s,e,r,i,e,s,1|s,e,r,i,e,s,2|...  ( or )
		s:series1,series2,... ( or )
        	e:series1,series2,...
Example:  chd=t:23,33,15,23,16

The chart data.

4. chco ( Chart Color ) : It’s used to specify the color of the chart.

Syntax:	  chco=<series_1_element_n>,<series_2>,...,<series_m>
Example:  chco=80C65A,224499,FF0000

You can specify the colors of a specific series, or all elements of a series, using the chco parameter.

5. chl ( Chart Labels ) : It is optional. It used to specifies the labels for your data. It’s makes sense on your chart.

Also Read: How to Build REST API Using PHP

Syntax:	  chl=<label>|...
Example:  chl=C|Java|PHP|ASP|Javascript

1. Pie Chart:

Pie Chart

In this example we have set the image src like below parameter.

http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:23,33,15,23,16& chco=80C65A,224499,FF0000& chl=C|Java|PHP|ASP|Javascript

2. Horizontal Bar Chart

Bar Chart

In this example we have set the image src like below parameter.

http://chart.apis.google.com/chart?cht=bhg&chs=450x200&chd=t:73,83,55,66&chxt=x,y&chxl=1:|C|Java|PHP|ASP&chxr=0,0,100&chds=0,100&chco=4D89F9&chbh=35,0,15&chg=8.33,0,5,5

Additional Parameter values:

1. chxt ( Chart Axis Type ) : It’s specifies the different axis that will be displayed on the chart. There are 4 types (x,y,t,b) and can be repeated (eg. you can have 2 x-axes). These axes are referenced by their index numer (that is the order you have specified them in). Counting starts at 0. So in the example, x-axis is #0, and y-axis is #1.

Syntax:	  chxt=<axis_1>,...
Example:  chxt=x,y

You can specify exactly which axes your chart should show using the chxt parameter. Default axis lines do not show numbers; you must specify an axis in the chxt parameter to show numbers.

2. chxl ( Chart Axis Label ) : It’s specifies the label you want for the axis/axes.

Syntax:	  chxl=<axis_index>:|<label_1>|...
Example:  chxl=1:|C|Java|PHP|ASP

You can specify custom labels for each copy of each axis, using the chxl parameter.

3. chxr ( Chart Axis Range ) : It’s specifies the start/end range of the axis. The first number specifies the axis, second and third number specifies the start and end of the range respectively.

Syntax:	  chxr=<axis_index>,<start_val>,<end_val>,<opt_step>
Example:  chxr=0,0,100

4. chds ( Chart Data Scale ) : It’s used to set the minimum / maximum range of your scale.

Syntax:	  chds=<series_1_min>,  <series_1_max>,...
Example:  chds=0,100

This will not affect the bar size or the axis labels, but only the data marker value.

5. chbh ( Chart Bar Size ) : It’s used to specify the spacing between the bar. First number is required. Second and third number is optional.

Syntax:   chbh=<bar_width_or_scale>,  <space_between_bars>, <space_between_groups>
Example:  chbh=35,0,15

6. chg ( Chart Grid lines ) : It’s used to draw a line behind the bar.

Syntax:	  chg=<x_axis_step_size>, <y_axis_step_size>, <opt_dash_length>, <opt_space_length>, <x_offset>, <y_offset>
Example:  chg=8.33,0,5,5

3. Vertical Bar Chart

Bar Chart

In this example we have set the image src like below parameter.

http://chart.apis.google.com/chart?cht=bvg&chs=450x300&chd=t:20,35,10&chxr=1,0,40&chds=0,40&chco=FF0000|FFA000|00FF00&chbh=65,0,35&chxt=x,y,x&chxl=0:|PHP|Javascript|Ajax|2:||My Knowledge Level||&chxs=2,000000,12&chtt=My+Knowledge+Based+Chart&chts=000000,20,20&chg=0,25,5,5

Additional Parameter values:

1. chxs ( Chart Axis Style ) : It allows you to apply a style to your axis. you can use the chxs and chxtc parameters to specify color, size, alignment, and other properties of both custom and numeric axis labels.

Syntax:   chxs=<axis_index>  <opt_format_string>,  <opt_label_color>,  <opt_font_size>,  <opt_alignment>,  <opt_axis_or_tick>,<opt_tick_color>,  <opt_axis_color>|...
Example:  chxs=2,000000,12

2. chtt ( Chart Title ) : It’s specifies the title of the graph. Like other labels, if you want a space in your title use the ‘+’ character wherever you need a space.

Syntax:	  chtt=<chart_title>
Example:  chtt=My+Knowledge+Based+Chart

3. chts ( Chart Title Style ) : It’s specifies the font colour and size of the title. It is quite similar to chxs.

Syntax:   chts=<color>,<font_size>,<opt_alignment>
Example:  chts=000000,20,20

4. Line Chart

Line Chart

In this example we have set the image src like below parameter.

http://chart.apis.google.com/chart?cht=lc&chs=450x300&chd=t:7,18,11,26,22,11,14&chxr=1,0,30&chds=0,30&chco=4d89f9&chxt=x,y&chxl=0:|Mon|Tue|Wed|Thu|Fri|Sat|Sun&chls=3,1,0&chm=d,4d89f9,0,0,12,0|d,4d89f9,0,1,12,0|d,4d89f9,0,2,12,0|d,4d89f9,0,3,12,0|d,4d89f9,0,4,12,0|d,4d89f9,0,5,12,0|d,4d89f9,0,6,12,0&chg=0,6.67,5,5

Additional Parameter values:

1. chls ( Chart Line Style ) : It specifies what the line will look like. The numbers are (in order) how thick the line will be, size of line segment and size of blank segment. So if you want a solid line (as per example) you will want the last value to be 0.

Syntax:   chls=<line_1_thickness>, <opt_dash_length>, <opt_space_length>
Example:  chls=3,1,0

2. chm ( Chart Markers ) : It specifies what the markers will be for each data point. Setting the markers is quite ugly – you need to specify the marker for each data point you have.

Syntax:	  chm=D, <color>, <series_index>, <which_points>, <width>, <opt_z_order>
Example:  chm=d,4d89f9,0,0,12,0

I believe whoever read this article would’ve gained significant insight over creating a chart using URL with specific parameters.

Realated Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">