Viewing Thread:
"How to create a chart on your web site, using the Google Charts API"

[B][U]How to create a chart on your web site, using the Google Charts API[/U][/B]

Charts come in all sorts of shapes and sizes! From pie charts, bar charts, or line charts, the aim of the chart is to give a visual representation of some statistical numeric data - or, in English - comparing numbers, and seeing which number is the highest, the lowest, or simply average.

Charts have existed for at least a year, possibly more, and are used at school, at work, on the net, in a book, maybe even on the moon, and it's no surprise, as they can be used to highlight certain information in a far more attractive manor than simply writing the figures out.

Creating a chart can be pretty basic if you know how to use image software, and can be displayed in a PowerPoint presentation, or on a web site with the simple <img> element, but if you're not confident at using image software, or are, but know your charts will always be updating, and don't want to create a new one every week, day, or even hour, you can outsource the chart creation process to a little known American company, called Google.

While this isn’t only aimed at advanced users, it’ll mostly cater to people who know about HTML and images on the Internet. If that isn’t you, you may find this a little fast paced at first.

Google Charts API

The Google Charts API is designed to produce a variety of chart types for you, resulting in an image file that is included in your web page (although, you can also save the image for other uses). The image file is in PNG format, which many web browsers support, and is called using the HTML <img> element, using the src attribute to provide settings within what is called a "query string". The "query string" means that you add the settings to the end of the web address of the image, in this case, the Google Charts API, so that the chart can be dynamically created on Google's servers, and return to your web page as a regular PNG image, and shown to your users.

Please note than in the example code below, there are breaks in the code because of Freeola’s character limit. If you copy and paste any of the examples before sure to remove the [U]<<break>>[/U].

Calling an Image file

The basic code structure for creating a chat via Google is to insert an image within your web site, and assigning settings within the web address location of the chart. As a basic example, you'd use the <img> HTML element to call the chart API web address, like so:

<img src="[B]http://chart.apis.google.com/chart? [/B]">

... and assigning your chart settings after the question mark, in the form of a setting name, followed by a setting value.

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] [B]chart setting go here[/B]">

Each setting is separated by an ampersand character (&), and so if you had three settings to include, the web address within your <img> element would look like:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] settinga=1[B]&[/B]settingb=2[B]& [U]<<break>>[/U] [/B]settingc=3">

The chart settings include the type of chart you want, the width and height of the chart image (in pixels), and the data you want to show. Other settings are available to make your chart more daring, but the size, type and data are all required to make a chart appear.

Chart Types

Google offer many types of chart, including bar, line, and pie charts. To pick which chart you wish to use, you'll need first add the cht setting, and add the pre-defined Google value for the chart you want. A pie chart is called using either a value of p or p3 (3D pie chart), while a line chart is called using lc (or ls for axis lines) and a bar chart with either bvs for a vertical or bhs for a horizontal chart.

The code for calling a chart with the included cht setting starts of like this:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] [B]cht=[/B] chart-type">

... and in place of "chart-type", we would place the value for the type of chat we want. If we wanted to create a 3D pie chart, we would use the code:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=[B]p3[/B]">

... or if we wanted a line graph, we'd use the code:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=[B]lc[/B]">

Of course, different charts are designed for different visual representations. A pie chart is good if you want to compare how one thing may be bigger than the other, while a line chart is handy to show how things have changed for the same thing over the span of a week.

We could use a pie chart to compare how Freeola’s services are visited by users, to see if Cheats, Chart or Walkthroughs are the most popular, while we might use a line graph to show the number of people who visited Freeola over a seven day period, to see which days were the busiest.

So before, moving forward, you should give some thought as to how you’d like your numbers to be seen in chart form, although, with the Google Charts API, it is relatively simple to change chart types later one.

Chart Width and Height

Google require that you include a width and height in your chart settings, so that it may create a chart that fits in, so that you aren’t left with a pie chart that is stretched to look like an egg. The width and height settings are all in pixels, and are included with the setting chs, which the two values separated by an x. If we wanted a chart that was 300 pixels wide, and 100 pixels tall, we would include this setting in the followed way:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] [B]chs=300x100[/B]">

… and included with our chart type, say, a 3D pie chart, our code would start to look like:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] [B]cht=p3[/B] &[B]chs=300x100[/B]">

The Numbers & Data

Of course, as with any chart, we need to include the numbers that draw the chart. This will be different for the type of chart you create, but the numbers will be added with the setting chd. What is different about this setting is that after the equals sign, you’ll need to add the letter t, followed by a colon (:) character, before adding your numbers, and the numbers must be separated by a comma (,).

If, for example, we had three values that show how many people used Freeola’s chat, cheats, and walkthrough pages in a day, and wanted to make them in to a 3D pie chart, the settings would be set out as follows:

[B]chd=t:[/B]50,35,15

… where 50 is the percentage of people who looked at the chat pages, 35 is the percentage of people who looked at the cheats pages, and 15 is the percentage who looked at the walkthrough pages.

When added with a width, height, and chart type setting, which we’ll take from our above examples, we’d be left with a long piece of code that looked like this:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=p3&chs=300x100& [B]chd=t:50,35,15[/B]">

and this is what you would see

Adding Labels to your Chart

Of course, the above example is fine in some cases, but on it’s own, the chart doesn’t allow you to easily see which section represents which piece of data. To work around that, Google also includes the ability to add labels to each piece of the chart. For our example, we’d probably like a label for each segment, and that is done with the chl setting. Each label will be separated by the pipe character (|), and should appear in the same order as the numbers that each piece of data that is represented. For example, our values above were 50, 35 and 15, which were for the chat, cheats and walkthrough sections respectively, and so our labels must follow this order as well.

The label setting on its own would look something like this:

chl=Chat|Cheats|Walkthroughs

… and added to our previous example, would give us a very long piece of code, which looks like:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=p3&chs=300x100&chd=t:50,35,15& [U]<<break>>[/U] [B]chl=Chat|Cheats|Walkthroughs[/B]">

Try it once more!

Multiple Labels

If you’ve instead picked to used a different chart, maybe a line chart, you would most likely want to have labels along the top and side of the chart to make a better visual result. You can do this by using the chxl setting in place of chl, and provide multiple labels along your chart.

We’ll start with a chart that has no labels, such as this one, created with the code:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B] [U]<<break>>[/U] &chs=400x150

The chart plots 7 items, lets say hits for Freeola over 7 days, but looking that the chart, we can’t know that without any labels. To add a label, we’ll use the chxl to hold the label data. But first, we must add the setting chxt to let Google how we want the order of our labels to go. Because we want to start with the X-axis (along the bottom) and then the Y-axis (along the left side), we will need to include the setting chxt=x,y, like so:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B] [U]<<break>>[/U] &chs=400x150[B]chxt=x,y[/B]

This will be followed by the chxl setting, which will break down our labels in to two groups. This is done by place the number zero (0) before our first set of labels, and the number 1 before the second set. Each number must be followed by a colon (:) and each set of labels must have a pipe (|) before it.

We’ll start with just the setting name, which looks like:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B] [U]<<break>>[/U] &chs=400x150chxt=x,y&[B]chxl=[/B]

After the equals sign (=) we need our first set of labels, the days of the week. Each day will be separated by a pipe, but before those days, we need the number zero, and a pipe character:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B]& [U]<<break>>[/U] amp;chs=400x150chxt=x,y&chxl=[B]0:|[/B]

… followed by the days of the week:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B] [U]<<break>>[/U] &chs=400x150chxt=x,y&chxl=0:|[B] Monday|Tuesday| [U]<<break>>[/U] Wednesday|Thursday| [U]<<break>>[/U] Friday|Saturday|Sunday[/B]

Then, another pipe, and then the second set of labels, for the side, which will be a standard block of 20’s up to 100. This needs to be preceded by the number 1, with a colon, so the Google Charts API knows it’s not part of the previous bottom label:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B] [U]<<break>>[/U] &chs=400x150chxt=x,y&chxl=0:|[B] Monday|Tuesday| [U]<<break>>[/U] Wednesday|Thursday|Friday|Saturday|Sunday| [U]<<break>>[/U] 1:|0|20|40|60|80|100 [/B]

I know, quite complicated at first, but look at the end result.

Get Charting!

Hopefully, with the knowledge that the Google Charts API exists, and this basic introduction, you can decide if making use of the service is something you'd like to try out.

I’ve added some example charts, along with the code used to generate them, so that you can see what is possible with a little tweet to the settings. Can you guess what %20 is used for??

You can get more information about using the Google Charts API from the Google Charts API online documentation

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

Excellent post cjh,

Graphs have always been far too complex to generate using the software packages available - especially when they need to be dynamically supplied with data from MySQL tables.

My little doggie brain is already churning away trying to work out how to generate the URL on the fly - shouldn't be too difficult though - and if anyone is interested I'll post the results on here.


JTD

[B][U]How to create a chart on your web site, using the Google Charts API[/U][/B]

Charts come in all sorts of shapes and sizes! From pie charts, bar charts, or line charts, the aim of the chart is to give a visual representation of some statistical numeric data - or, in English - comparing numbers, and seeing which number is the highest, the lowest, or simply average.

Charts have existed for at least a year, possibly more, and are used at school, at work, on the net, in a book, maybe even on the moon, and it's no surprise, as they can be used to highlight certain information in a far more attractive manor than simply writing the figures out.

Creating a chart can be pretty basic if you know how to use image software, and can be displayed in a PowerPoint presentation, or on a web site with the simple <img> element, but if you're not confident at using image software, or are, but know your charts will always be updating, and don't want to create a new one every week, day, or even hour, you can outsource the chart creation process to a little known American company, called Google.

While this isn’t only aimed at advanced users, it’ll mostly cater to people who know about HTML and images on the Internet. If that isn’t you, you may find this a little fast paced at first.

Google Charts API

The Google Charts API is designed to produce a variety of chart types for you, resulting in an image file that is included in your web page (although, you can also save the image for other uses). The image file is in PNG format, which many web browsers support, and is called using the HTML <img> element, using the src attribute to provide settings within what is called a "query string". The "query string" means that you add the settings to the end of the web address of the image, in this case, the Google Charts API, so that the chart can be dynamically created on Google's servers, and return to your web page as a regular PNG image, and shown to your users.

Please note than in the example code below, there are breaks in the code because of Freeola’s character limit. If you copy and paste any of the examples before sure to remove the [U]<<break>>[/U].

Calling an Image file

The basic code structure for creating a chat via Google is to insert an image within your web site, and assigning settings within the web address location of the chart. As a basic example, you'd use the <img> HTML element to call the chart API web address, like so:

<img src="[B]http://chart.apis.google.com/chart? [/B]">

... and assigning your chart settings after the question mark, in the form of a setting name, followed by a setting value.

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] [B]chart setting go here[/B]">

Each setting is separated by an ampersand character (&), and so if you had three settings to include, the web address within your <img> element would look like:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] settinga=1[B]&[/B]settingb=2[B]& [U]<<break>>[/U] [/B]settingc=3">

The chart settings include the type of chart you want, the width and height of the chart image (in pixels), and the data you want to show. Other settings are available to make your chart more daring, but the size, type and data are all required to make a chart appear.

Chart Types

Google offer many types of chart, including bar, line, and pie charts. To pick which chart you wish to use, you'll need first add the cht setting, and add the pre-defined Google value for the chart you want. A pie chart is called using either a value of p or p3 (3D pie chart), while a line chart is called using lc (or ls for axis lines) and a bar chart with either bvs for a vertical or bhs for a horizontal chart.

The code for calling a chart with the included cht setting starts of like this:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] [B]cht=[/B] chart-type">

... and in place of "chart-type", we would place the value for the type of chat we want. If we wanted to create a 3D pie chart, we would use the code:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=[B]p3[/B]">

... or if we wanted a line graph, we'd use the code:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=[B]lc[/B]">

Of course, different charts are designed for different visual representations. A pie chart is good if you want to compare how one thing may be bigger than the other, while a line chart is handy to show how things have changed for the same thing over the span of a week.

We could use a pie chart to compare how Freeola’s services are visited by users, to see if Cheats, Chart or Walkthroughs are the most popular, while we might use a line graph to show the number of people who visited Freeola over a seven day period, to see which days were the busiest.

So before, moving forward, you should give some thought as to how you’d like your numbers to be seen in chart form, although, with the Google Charts API, it is relatively simple to change chart types later one.

Chart Width and Height

Google require that you include a width and height in your chart settings, so that it may create a chart that fits in, so that you aren’t left with a pie chart that is stretched to look like an egg. The width and height settings are all in pixels, and are included with the setting chs, which the two values separated by an x. If we wanted a chart that was 300 pixels wide, and 100 pixels tall, we would include this setting in the followed way:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] [B]chs=300x100[/B]">

… and included with our chart type, say, a 3D pie chart, our code would start to look like:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] [B]cht=p3[/B] &[B]chs=300x100[/B]">

The Numbers & Data

Of course, as with any chart, we need to include the numbers that draw the chart. This will be different for the type of chart you create, but the numbers will be added with the setting chd. What is different about this setting is that after the equals sign, you’ll need to add the letter t, followed by a colon (:) character, before adding your numbers, and the numbers must be separated by a comma (,).

If, for example, we had three values that show how many people used Freeola’s chat, cheats, and walkthrough pages in a day, and wanted to make them in to a 3D pie chart, the settings would be set out as follows:

[B]chd=t:[/B]50,35,15

… where 50 is the percentage of people who looked at the chat pages, 35 is the percentage of people who looked at the cheats pages, and 15 is the percentage who looked at the walkthrough pages.

When added with a width, height, and chart type setting, which we’ll take from our above examples, we’d be left with a long piece of code that looked like this:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=p3&chs=300x100& [B]chd=t:50,35,15[/B]">

and this is what you would see

Adding Labels to your Chart

Of course, the above example is fine in some cases, but on it’s own, the chart doesn’t allow you to easily see which section represents which piece of data. To work around that, Google also includes the ability to add labels to each piece of the chart. For our example, we’d probably like a label for each segment, and that is done with the chl setting. Each label will be separated by the pipe character (|), and should appear in the same order as the numbers that each piece of data that is represented. For example, our values above were 50, 35 and 15, which were for the chat, cheats and walkthrough sections respectively, and so our labels must follow this order as well.

The label setting on its own would look something like this:

chl=Chat|Cheats|Walkthroughs

… and added to our previous example, would give us a very long piece of code, which looks like:

<img src="http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=p3&chs=300x100&chd=t:50,35,15& [U]<<break>>[/U] [B]chl=Chat|Cheats|Walkthroughs[/B]">

Try it once more!

Multiple Labels

If you’ve instead picked to used a different chart, maybe a line chart, you would most likely want to have labels along the top and side of the chart to make a better visual result. You can do this by using the chxl setting in place of chl, and provide multiple labels along your chart.

We’ll start with a chart that has no labels, such as this one, created with the code:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B] [U]<<break>>[/U] &chs=400x150

The chart plots 7 items, lets say hits for Freeola over 7 days, but looking that the chart, we can’t know that without any labels. To add a label, we’ll use the chxl to hold the label data. But first, we must add the setting chxt to let Google how we want the order of our labels to go. Because we want to start with the X-axis (along the bottom) and then the Y-axis (along the left side), we will need to include the setting chxt=x,y, like so:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B] [U]<<break>>[/U] &chs=400x150[B]chxt=x,y[/B]

This will be followed by the chxl setting, which will break down our labels in to two groups. This is done by place the number zero (0) before our first set of labels, and the number 1 before the second set. Each number must be followed by a colon (:) and each set of labels must have a pipe (|) before it.

We’ll start with just the setting name, which looks like:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B] [U]<<break>>[/U] &chs=400x150chxt=x,y&[B]chxl=[/B]

After the equals sign (=) we need our first set of labels, the days of the week. Each day will be separated by a pipe, but before those days, we need the number zero, and a pipe character:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B]& [U]<<break>>[/U] amp;chs=400x150chxt=x,y&chxl=[B]0:|[/B]

… followed by the days of the week:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B] [U]<<break>>[/U] &chs=400x150chxt=x,y&chxl=0:|[B] Monday|Tuesday| [U]<<break>>[/U] Wednesday|Thursday| [U]<<break>>[/U] Friday|Saturday|Sunday[/B]

Then, another pipe, and then the second set of labels, for the side, which will be a standard block of 20’s up to 100. This needs to be preceded by the number 1, with a colon, so the Google Charts API knows it’s not part of the previous bottom label:

http://chart.apis.google.com/chart? [U]<<break>>[/U] cht=lc&chd=t:[B]93,82,89,94,97,26,38[/B] [U]<<break>>[/U] &chs=400x150chxt=x,y&chxl=0:|[B] Monday|Tuesday| [U]<<break>>[/U] Wednesday|Thursday|Friday|Saturday|Sunday| [U]<<break>>[/U] 1:|0|20|40|60|80|100 [/B]

I know, quite complicated at first, but look at the end result.

Get Charting!

Hopefully, with the knowledge that the Google Charts API exists, and this basic introduction, you can decide if making use of the service is something you'd like to try out.

I’ve added some example charts, along with the code used to generate them, so that you can see what is possible with a little tweet to the settings. Can you guess what %20 is used for??

You can get more information about using the Google Charts API from the Google Charts API online documentation

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.