google chart 使用攻略(demo)

转载 2012年03月21日 16:48:18

How to use Google Charts API with 6 examples

Few months ago I had a good look into Google Charts API and it was great! If you are not aware, Google Charts API basically allows you to create pretty graphs simply by using an URL with correct parameters specified. It is fairly flexible, with many things you can change and customise - which is where it becomes bit complicated. It is quite easy to generate a chart, but it wasn't as easy to generate the exact chart I needed. So below are 6 examples charts with explanations and tips that will hopefully help you understand Google Charts better.

A few notes before I start

  1. The data/labels for all the graphs here have no meaning at all - just examples that I have come up with.
  2. I'll explain each parameter probably only once (since they are generally the same across all graphs). If something is different or special I'll explain it again.
  3. If you have any other tips/hints please share :)

Tip 0 (yes a tip before examples!)
Use this tutorial with Google's own Developer's Guide. Google's guide is quite good, but just confusing at times. I won't be going through every little bit since Google's guide outlines a fair bit, especially the technical syntax.

Example 1: Pie Chart

There are 3 parameters that ALL charts MUST have, and they are cht, chs, chd.

  1. Chart Type (cht): Specifies the type of graph you have (pie, vertical bar etc)
  2. Chart Size (chs): Specifies the pixel dimensions of your graph (width*height)
  3. Chart Data (chd): The data that you want to display in your chart

1. Chart Type (cht) is quite straight forward - select the chart type you want, and put in the corresponding code which can be found from Google'sDeveloper's Guide.

2. Chart Size (chs) is a tad more complicated but not much more (just needs a bit of trial and error). You specify the size of your graph in pixels:chs=<width>x<height>. Other than the maximum limit, the hardest thing is how big to make your graph? My tips are:

Tip 1: Give a rough estimate, generate the graph then press 'ctrl+a'. This will highlight the graph boundary so now you can adjust the size accordingly.
Tip 2: For pie charts, a rule of thumb is: w=2.5h for 3D charts and w=2h for 2D charts.

3. Chart Data (chd) is probably the most complicated as each chart has a slightly different syntax for data (see below examples and Google'sDeveloper's Guide). 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.

Now onto the optional parameters - ones that allow you to customise the look of your chart and make the look pretty:)

Chart Colour (chco) uses the Hex representation (RRGGBB) to specify the colour of your chart. What colour you pick is really up to you. For pie charts you can just put in one colour and all the segments will be shades of that colour. Or you can put in more and the segments will be a gradient from the first colour listed to the last colour listed.

Tip 3: If you have a fair few segments in your pie chart, I find listing 3 colours works well. It creates a relatively nice gradient and makes it easier to distinguish between the segments.

Chart Labels (chl) specifies the labels for your data. It is optional, but you probably want to include them, so your chart will makes sense! With pie chart, it makes sense that the number of segments you have is the number of labels. So if you had 6 bits of data, you'll have 6 labels. However, unlike chd where values are comma separated, pie chart labels are separated by a vertical bar '|'.

Tip 4: If you want a space in your labels use '+' where you needed spaces. eg. Puff+Pastry

Example 2: Horizontal Bar Chart

Chart Axis Type (chxt) specifies the different axis that will be displayed on the chart. There are4 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.

Chart Axis Label (chxl) specifies the label you want for the axis/axes. Thesyntax is generally quite straightforward with the axis number coming first followed by a colon':' and then the label names. There is just one small 'exception' (bug?) that I have discovered. For horizontal charts you need to "flip" the axis label and the data you provide. So if your data is chd=t:1,2,3,4 your axis label will have to bechxl=1:|Four|Three|Two|One. Again, this only happens for horizontal charts and I'm not quite sure why.

Note (not quite a tip): Just to re-iterate, for horizontal charts you need to "flip" (or reverse) the axis labels and data you provide for them to match. So the first label will match the last data, second label match the second last data etc. Note in the example, Python is the first label, but it has value 80 - the last data point.(Strangely enough, this doesn't happen for vertical charts)

Chart Axis Range (chxr) 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. In most cases, you will probably want your range to be slightly more than your maximum data value. (eg. in the above the maximum value is 115, so I have set the range to be between 0 and 120)

Chart Data Scale (chds) specifies how your data will be scaled. My general rule of thumb is unless you want to do some special scaling (eg. compare percentages of the values instead of showing the actual value) you will scale according to your range. Whatever you have set the min/max of your range (chxr) will be the min/max of your scale (chds).

In order to display your chart correctly, you will need to use both, Chart Axis Range (chxr)and Chart Data Scale (chds). By default the range and scale is 0,100 - but chances are you won't always want your axis to have a maximum of 100. Without correctly specifying these two parameters, your chart will still appear, but it will essentially be incorrect.

Tip 5: chxr and chds will generally be a pair and have the same values. The min/max specified inchxr will also be the min/max for chds.
Tip 6: If you want to display the data percentage-wise, the chxr and chds will differ. chxr will have range 0-100, andchds will be 0-max data point. For the example above, if the graph were to show the percentages of each bar the 4th line will be replaced with:chxr=0,0,100&chds=0,115&

Chart Bar Size (chbh) specifies the width of the bar and also the spacing between bars (and groups of bars). The first number (mandatory) specifies the width of the bar. The second and third are optional and they specify the spacing between bars in a group and between groups. In this example, the bars have width of 35, and each group (separated by commas inchd) is separated by width 15. As each group only has one data point, changing the middle value will make no difference (to have more than one data point for each group, you need to use vertical bars '|' - see examples below).

Chart Grid lines (chg) draws the lines behind the bars, making it easier to read the chart. Although optional, I think these really are the icing on the cake for the charts. Thesyntax chg=<verticalGridLines>,<horizontalGridLines>,<lineSize>,<gapSize> itself is easy, but getting the grid lines to draw correctly is harder. Of the four values, the last two are optional and determine what the line will look like when drawn. It really depends on personal preference and the type of chart drawn, but I find using 5 for each gives a nice dashed line. The first values is for vertical grid lines and the second is for horizontal grid lines.

Getting the grid lines to draw at the intervals you want (eg. every 10 units) is the tricky bit. Google by default assumes your axis range is 0-100 which isn't always the case, so some basic maths is needed. IF your axis was 0-100, then to have vertical grid lines every 10 units is simple: chg=10,0,5,5. But in the example the range is 0-120 so the grid lines will display incorrectly if you simply put in chg=10,0,5,5. To get the lines to show correctly for range 0-120, you need to 'scale' the grid line value. Luckily it is quite simple: 100/120*10 which gives you 8.333..., thereforechg=8.33,0,5,5. The formula is basically 100/MaxRange*IntervalAmount. Also, if the result is not a whole number, give the value to two decimal places, otherwise the grid lines will be slightly off.

Tip 7: To calculate the value to correctly draw your grid lines, use the formula:100/MaxRange*IntervalAmount. eg. Your graph has range 0-80, and you want an horizontal grid lines every 5 units: 100/80*5=6.25, therefore you will have: chg=0,6.25,5,5
Tip 8: If the value calculated from the formula is not a whole number, go to two decimal places for more accurate grid lines. (You can go to three or more decimal places, but I find two is generally enough)

Example 3: Vertical Bar Chart

Chart Colour (chco) is quite straight forward. Note that for this example, I have used the vertical bar '|' to separate the three hex colours in order to get different coloured bars. If I had used a comma ',' then all the bars will be red (the first colour).

Chart Axis Style (chxs) allows you to apply a style to your axis.chxt and chxl (explained in Example 2) specify which axis you want, and their labels whilechxs lets you specify the font colour and size for a particular axis. In this examplechxs=2,000000,12 has set axis #2 to be black with font size of 12. Note: If you look carefully you'll see something "strange" in thechxl for axis #2 (Task Priority axis). The empty '||' on either side of the label is so the label will be centred.

Tip 9: If you want a second x-axis for say an axis label you can centre the label by having empty labels '||' left and right of your actual label. The number of empty labels will depend on the number of categories in your main x-axis, and how long your axis label is. In this example, the axis label is quite short and there is a total of 3 categories (High, Medium, Low) so i have put one empty label on each side of 'Task Priority'

Chart Title (chtt) 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.

Chart Title Style (chts) specifies the font colour and size of the title. It is quite similar tochxs.

Example 4: Stacked Vertical Bar Chart

Chart Data (chd) as explained in Example 1 specifies the data in your chart. However, note how the data for this slightly more complicated graph is written - it is separated using both commas and vertical bars. Each group separated by a vertical bar represents one series: the first group is Large, then Medium, then Small.

Chart Legend (chdl) specifies the legend for the chart. It is separated by vertical bars and corresponds directly to the way the data is represented.

Note that even though the largest individual data value is 55 (the 2nd value of group 2), the range/scale is put as 120 because the largest SUM of corresponding data values is 115 (sum of the 2nd values).

Tip 10: If you have a stacked chart, the range/scale will be the maximum of the sum of the corresponding values of each group. That is, compare the sum of all the first values in each group with the sum of the second, third values etc.

Example 5: Vertical Bar Chart

Data-wise, this chart is identical to Example 4a - the only difference is it is not a stacked chart (bvs), but just a standard vertical chart (bvg). The only changes are in thechxr, chds and chbh parameters to make the chart display nicely. Note how the range/scale is now 0-60, since it is no longer a stacked chart so the maximum value is 55.

Example 6: Line Chart

Chart Line Style (chls) 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. Note, the line style is just the line - it does not draw the markers, that is specified inchm (see below).

Chart Markers (chm) 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. Luckily, thesyntax is relatively easy - the shape/type of marker, colour, data group, data point, priority. In this example there is only one data group (so the 3rd value are all zeroes) and you can see that the 4th value of eachchm group goes up by 1 as it specifies the particular data point. The size is set to 12 to make the markers nice and big. Priority specifies how the markers are drawn - below or above the line and other markers.

Wow, so that finally concludes this tutorial which turned out much longer than I had imagined! Hopefully I've made sense, explained things well and helped you get a better understanding of how to use Google Charts API to get the charts you want/need. If you have any questions please feel free to ask, or if you have some tips please share them:)

使用google charts实现各种动态统计图

今天无意中发现一个好用的工具:Google Charts以往想把数据用直观的统计图(饼图,条形图等)表现出来,我所知道的就...
  • bbj07
  • bbj07
  • 2010年04月19日 12:45
  • 6696

Google Charts -- Timelines 使用说明

概述 时间轴是一种描述一组数据随时间变化的图标。如果你在管理一个软件项目,想要标明谁在什么时候做什么任务,或者你在组织一场会议需要定会议室,时间轴是一个合理的图形化选择。一种出名的时间轴就是--甘特...
  • jessica_0715
  • jessica_0715
  • 2016年07月25日 10:07
  • 1304


  • 2013年02月18日 17:36
  • 274KB
  • 下载

Google在线Chart API共享使用

今天在浏览Google更多产品时,发现了这个在线Chart图表统计API,感觉挺不错的! 它支持:圆饼、曲线、折线、柱状、散点、地质图、树映射、Table、组合图、阴阳烛图等... 见下图: ...
  • W3031213101
  • W3031213101
  • 2011年08月05日 09:43
  • 14654

Google的Google Chart Tools使用

图形是我们最经常看见和使用的东西。但要自己写代码实现一个图形还不是那么简单。 比如Excel的图形,PDF中的图形,网页上的图形。方式很多,实现方法也不一样。 看看google的网页上面显示的图形...
  • zmx729618
  • zmx729618
  • 2016年07月12日 15:03
  • 973

大数据可视化Google Chart实现

本程序调用Weka API及libsvm工具包,对基金数据库进行数据预处理,然后将处理好的数据通过Chart.js 框架来实现数据的可视化,接下来要说明实现流程。完整版源码下载数据读取连接数据库Cla...
  • pangjiuzala
  • pangjiuzala
  • 2016年01月04日 19:37
  • 2561

Google Chart API学习(一)

圆饼示例: // Load the Visualization API and the piechart package. google...
  • zkn_CS_DN_2013
  • zkn_CS_DN_2013
  • 2015年10月09日 11:11
  • 1276

【Google Chart Tools: Infographics】谷歌图表工具:信息图表 我们可以使用在线的谷歌api对网页网址进行二维码的生成   一下是我...
  • eadio
  • eadio
  • 2014年05月09日 15:12
  • 3528

Android chart、图表、条形图、饼图 pie chart 等的实现及点击事件、监听器的实现 click ,achartengine

关键词:android,achartengine,pie chart,click,点击,监听器  最近需要在自己的android应用上实现统计图的功能,后来定为要实现饼图(扇形图),网上虽然有很...
  • ZHOU452840622
  • ZHOU452840622
  • 2015年05月18日 11:53
  • 2296

chart 图例点击事件

$.ajax({ type : 'POST', url : ' ', data : { "t0" : t0, "t1" : t1 }, success : function(data) { var...
  • zxf1242652895
  • zxf1242652895
  • 2017年03月07日 08:56
  • 897
您举报文章:google chart 使用攻略(demo)