Make charts online using the Google Chart API製作圖表在線使用API的谷歌圖

Posted on December 1, 2008 at 5:34 am發布12月1日，在2008年上午5時34分

The Google Chart API is a web service that you can connect to quickly generate charts for your blogs or websites. Since it is a web service, you will not have to install anything in your web server. All you need is a basic understanding on how it works.在谷歌圖的API是一個網上服務，您可以連接到快速生成的圖表您的博客或網站。既然是網絡服務，您將無法安裝任何東西在您的Web服務器。所有你需要的是一個基本的了解如何它的作品。

Here is an actual example of a下面是一個實際例子 chart created using Google Chart API創建圖表使用API的谷歌圖 : ：

You can see that the chart was generated using a simple URL parameter manipulation:您可以看到圖表是使用生成一個簡單的URL參數操縱：

There are at least 3 parameters ( cht, chd and chl ) to set to be able to generate a chart. Below are the steps to make those parameters:目前至少有3個參數（ 中華電信，冠心病和葉綠素 ）設置能夠生成一個圖表。下面是步驟，以使這些參數：

Step 1: Define the Chart Type: cht 第1步：定義圖表類型：中華電信

First you will need to define what type of chart you want. A listing of all available chart types are located here:首先你需要確定什麼類型的圖表你想要的。列出所有可用的圖表類型是這裡找到： http://code.google.com/apis/chart/types.html

In the example that we will create, we will use cht=p3 which is a pie chart. To make other types of charts like bar or line charts, just browse the types of charts and put in the corresponding cht parameter value.在例如，我們將建立，我們將使用紅隧= p3這是一個餅圖。為了使其他類型的圖表像酒吧或線圖表上，剛剛瀏覽的各類圖表，並在相應的中華電信參數值。

Step 2: Define the parameter for data and labels: chd and chl 第2步：定義參數數據和標籤：冠心病和葉綠素

For example, we want to chart the distribution of each of the four brands below:舉例來說，我們希望為分佈的四個品牌如下：

BrandX=40 BrandX = 40
BrandY=30白蘭地= 30
BrandZ=20 BrandZ = 20
BrandA=10 BrandA = 10

The data (chd) parameter will be: chd=t:40,30,20,10該數據（ CHD ）的參數是： 冠心病=噸： 40,30,20,10

Note: In the example I chose to use Text Encoding. To use other types of encoding click on the link below:注：例如，我選擇使用文字編碼。若要使用其他類型的編碼點擊下面的鏈接： http://code.google.com/apis/chart/formats.html

The label parameter (chl) is chl=BrandX,BrandY,BrandZ,BrandA標籤參數（葉綠素）是葉綠素= BrandX ，白蘭地， BrandZ ， BrandA

The label parameter values are comma delimited and should have the same number of values as the data parameter.標籤的參數值是逗號分隔，並應具有相同數目的價值觀作為數據參數。

Step 3: Define the size of the chart in pixel 第3步：定義大小的圖表像素

The format is a simple chs=<width in pixels>x<height in pixels> , so if we want to have a 250X100 chart, we put it like this: chs=250X100格式是一個簡單的chs=<width in pixels>x<height in pixels> ，所以如果我們希望有一個250X100圖表，我們把這樣的： 社區衛生服務= 250X100

Step 4: Put the parameters together 第4步：把參數一起

Append the parameters to the main URL:附加的參數主要網址： http://chart.apis.google.com/chart? http://chart.apis.google.com/chart ？

+ parameter from step 1 + “&” + parameter from step 2 + “&” parameter from step 3 +參數步驟1 + “ ＆ ” +參數步驟2 + “及”參數從第3步

Note that the order of parameters in web services is not important as long as you separate them with the ampersand character “&”. See example below:請注意，命令中的參數網絡服務並不重要，只要你將它們分開的字元“ ＆ ” 。見以下例子：

http://chart.apis.google.com/chart?cht=p3&chd=t:40,30,20,10&chs=250×100&chl=BrandX|BrandY|BrandZ|BrandA http://chart.apis.google.com/chart?cht=p3&chd=t:40 ， 30,20,10和社區衛生服務= 250 × 100 = ＆葉綠素BrandX |白蘭地| BrandZ | BrandA

It is clear that users can easily create dynamic charts using Google Chart API. This is ideal for users who don’t want to buy complex charting solutions for their web projects.很顯然，用戶可以輕鬆地創建動態圖表使用谷歌圖的API 。這是用戶的理想選擇誰不想購買複雜的圖表解決方案，其網絡項目。

Ben Carigtan shows you how it’s done.本Carigtan告訴您如何它的工作要做。

Enjoyed this post?得到這個職位？ Subscribe to Online Tech Tips via訂閱在線應用技巧通過 RSS Feed RSS供稿 or via或通過 Email電子郵件 and receive free daily productivity tips.並獲得免費日報的生產力秘訣。

» Filed Under »文章屬於 Google Software/Tips谷歌軟件/秘訣