Gchart: full introduction to jquery components based on google chart APIs: 1. Getting Started

Document directory

• First, explain the title of this interface.
• Let's first look at what gchart can do.
• Preparations for using gchart
• Okay. Let's make a small example.

GchartIs based onGoogle chart API. Gchart allows you to easily generate powerful charts and reports. Gchart based on the google chart interface is simple, convenient, powerful, adequate, and easy to use. Gchart: jquery-based google chart interface component raiders series of articles will take you into the gchart report World.

First, explain the title of this logging port, google chart API

Google chart API is an api provided by google to generate various charts. According to your needs, Google chart API returns a PNG Image to respond to a URL. The Google chart API 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.

The above is a copy of the Google chart API official website. In line with the Chinese listening habits, google chart API is a special interface that fills in your desired report requirements, he can give you a PNG image, which is the report you want!

XX component based on jquery

To put it bluntly, a buddy wrote a JavaScript component, but he was a little lazy. He didn't want to get an element and wanted document. getElementById, so he used jquery, a basic JavaScript library. He does not have to worry about the browser compatibility and other messy JavaScript problems, but focuses on the component logic he wants to implement. Of course, there are other advantages of using jquery. In short, if you want to use this buddy's JavaScript component, you should first introduce jquery, the basic JavaScript library.

Gchart

As mentioned above, a buddy wants to write a JavaScript component. The function of this component is to call google's chart API to generate various charts more easily and easily.

In short, gchart is used in front of jquery by others, followed by google chart APIS by others. In total, this guy is pulling the skin.

However, you should not look down on this guy who pulls leather strip. It can be simple, simple, and decadent. It is also a talent. This series of gchart: jquery-based google chart interface component full strategy is to interpret this "pizhige.

Let's first look at what gchart can do.

Below are some images to illustrate what gchart can do --

Line chart generated by gchart

Bar Chart generated by gchart

2D pie chart generated by gchart

3D pie chart generated by gchart

Radar generated by gchart

Map chart generated by gchart

Gchart can also generate charts that look messy and appear to be unavailable under normal circumstances --

Scatter chart generated by gchart

Dimensions generated by gchart

Speed dashboard chart generated by gchart

Two-dimensional Barcode generated by gchart

Well, basically all charts you can think of can be generated using gchart. En ~ It seems inappropriate to say that gchart is generated. To be accurate, it should be: Use gchart to generate google chart APIs. In fact, they are still generated by google chart APIs.

Preparations for using gchart

With the title of the opening mouth, we can get a general idea of what gchart needs.

• Google chart API. There is no need to worry about this. This is already done by gchart. It is automatically linked to the google chart api server for calling. So we don't have to do anything. Of course, make sure that you can use the gchart computer to access the Internet.
• Jquery. js. Let alone this. All the streets are full. You just need to find one. 1.2.3 or later.
• Gchart script library. Don't worry. Here I will download: jquery. gchart. js (51 k, this is not compressed and encrypted), jquery. gchart. pack. js (14 k, which is compressed and packaged ).

Okay. Let's make a small example.

As you can see, gchart seems to be a huge thing. That's why I wrote a series of articles, not an article. When the article is too long, you will not like reading it very much. Therefore, this article only lists a small example and will not explain it too much. For more details, will be placed in the next article.

<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"> <meta name = "Keywords" content = "YES! B/S !, Web standards, Yang Zhengyi, blog Park, instance code "> <meta name =" Description "content =" this is a simple YES! B/S! Article Example page, blog from Yang Zhengyi, http://justinyoung.cnblogs.com/"> <br/> <style type =" text/css "> # basicGChart {width: pixel PX; height: 300px }</style> <p> <br/> A simple gchart example <p>Tip: you can modify the code in the text box before running it.

URL for this example: http://downloads.cnblogs.com/justinyoung/gchart/articleexample001.html. Package the following content:

Gchart example 001

For the generated charts, see:

A simple gchart example

This article is just an introduction. The detailed explanation and description will be continued in the next article, so stay tuned.