Just by passing your data to a URL string, the Google Chart API will load the chart image in your browser.
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World
In our sample URL, the text “http://chart.apis.google.com/chart” is the source address of our chart.
Then after the question mark (?) are the parameters and their corresponding values that you will provide in order to generate our chart. The parameters are separated by the ampersand (&). So the parameters based from our sample are:
- cht – specifies the chart type like bar, line, pie and others. In our sample, we are displaying a pie chart (p3). For other types of chart and their corresponding value, just click here.
- chd – specifies the data that will be plotted in our chart in x, y format. You can also customize the data format of your chart.
- chs – specifies the size of the chart image in width x height format. In our sample, the size of our chart image is 250x100.
- chl – specifies the labeling of our chart separated by pipe (|). The labels are displayed along the x-axis. To customize the labeling of each axes, use chxl instead.
Now that we have our URL string, it is now time to embed this in our web page. Just open your favorite html editor and paste the following html code:
<html> <head> <title>Sample Chart </title> </head> <body> <img src=”http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World ” alt=”Sample Chart”/> </body> </html>
There, we have just created our very simple chart.
Of course, if you want to add more customisation (e.g. legends, line markers and colors, visible axes, axis label styles, data scaling, data formatting, etc.) to your chart, just go to the Google Chart API site.
Comments
blog comments powered by Disqus