Google chart API practical Web Application

Source: Internet
Author: User
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.