Google chart API practical Web Application

The Google chart API returns a PNG Image to respond to a URL. You can generate multiple types of images, including line charts, bar charts, and pie charts. You can specify attributes for each image type, such as size, color, and label. By embedding a URL in the label, you can include chart API images on the webpage. When a Web page is displayed in a browser, the chart API displays the image on the web page.

Last week, the customer asked me to create a mass evaluation module, which was very urgent to be completed within 1-2 days, including statistics on various situations, and should be beautiful. After receiving the task, I thought about how to make chart statistics? There are also a lot of JS flash in my mind. The library for generating statistical charts using CSS is also the Google chart API. I tried to compare, run the environment, and make it easy to use. I chose Google chart API, but I also encountered many problems.

Solution:

1. 1. Chinese parameters are not displayed or garbled
   My is ASP, the page code must be UTF-8, charset = UTF-8 of HTML, remove <% @ Language = "VBScript" codePage = "936" %> in ASP.
2. 2. Different colors of the bar chart
   After carefully reading the Google chart API documentation, I can find it by adding chco = ff0000 | FFFF00 | 00ff00 | 00ffff | 0000ff | ff00ff. Each color is a pillar.
3. 3. Adjust the dynamic height of the bar chart
   The default height is 100, that is, when the number is 100, it is reached. If all the items are greater than 100,
   So the price parameter: chbh = 200,200 is the highest height. However, this number cannot be determined. It depends on the actual project. My value = maximum number of projects + average number of projects, and average number of projects.
4. 4. Other problems
   See the Google chart API documentation for solutions.

 

 

In practical application, I used a pie chart and a column chart. I didn't study any other charts. Below is the project:

 

 
The rating page, followed by the customer's own pink.

Pie Chart: http://chart.apis.google.com/chart? CHT = P3 & CHD = T: 17,3, 2 & CHS = 500x200 & chlorophyll = satisfied (17) | basically satisfied (3) | unsatisfied (2)

Bar Chart: http://chart.apis.google.com/chart? CHT = BVS & CHD = T: 6.57142857142857, 2, 3, 3, 2 & chds = 0, 500 & CHS = 200 X & chdl = answers (4) | service attitude (2) | loan time limit (2) | service process (3) | banking service (2) | service provided by the Guarantee Company (3) | overall evaluation (2) & chco = ff0000 | FFFF00 | 00ff00 | 00ffff | 0000ff | ff00ff | 0c70aa & chbh = 40

The above address can be directly copied to the browser for viewing.