Six jquery chart Web Application Extensions

Source: Internet
Author: User

As jquery, mootools, prototype, and other well-known JavaScript frameworks become more and more powerful, browsers support the CSS attributes of the latest version, except for flash applications on pages, chart applications become more and more widely used. This article provides you with six practical jquery chart plug-ins, which outline their respective functions and advantages.

1.Flot


In terms of interactivity, the effects of flot charts implemented by jquery and those implemented by Flash are very similar. The chart output is smooth and smooth, with a focus on visual effects. You can also use it with data points data nodes. When you move the cursor to a data node, you will get feedback about the value description of the corresponding node.


As shown in, you can also select a part of the graph table to obtain data in these special regions. You can also zoom in on data nodes.

Advantages: A combination of lines, nodes, area fills, bar charts, and the above functions.

2.Sparklines


Sparklines is my favorite micro-chart implementation tool. It truly implements a visual chart style (you will know what it looks like when you log on to your Google Analytics ). Another good function is to help implement self-refresh in all chart plug-ins.

Advantages: Combination of wedge, lines, bar charts, and the above functions.

3.Google charts plugin


Google charts plugin is a very simple way to apply Google charts APIs to web programs through the jquery plug-in. This API is also very easy to use. Simple jquery call is allowed to set the parameters you need:
. ATTR (<span> 'src' </span>, API. make (<span> <strong >{</strong> </span> data: [[<span> 153 </span>, <span> 60 </span>, <span> 52 </span>], [<span> 113 </span>, <span> 70 </span>, <span> 60 </span>], [<span> 120 </span>, <span> 80 </span>, <span> 40 </span>] <strong >}</strong> ))

Advantages: Column chart, overlapping column chart, line, wedge, 3D wedge.

4.Jquery chart


Jquery chart does not seem to be a very nice chart plug-in. It also implements basic functions, but its usage is very flexible and easy to use.

Instance (add value to chart)
. Chartadd ({"label": "leads", "type": "line", "color": "#008800", "values": ["100 ", "124", "222", "44", "123", "23", "99"]})

Advantages: A combination of blocks, lines, bar charts, and the above functions.

5.Jqchart


Jqchart supports drag and drop actions and animation conversion in charts. If your CSS application is good enough, you can achieve good chart appearance. Compared with other plug-ins, The jqchart implementation function seems to be a bit single.

Advantages: Bar chart and line

6.Tuftegraph


The bar chart generated by tuftegraph is exquisite and can be stacked. Compared with flot, tuftegraph can also reduce the pressure and make it lighter.

Advantages: Column chart, overlapping column chart.

The chart effects achieved through jquery in the above 6 versions have their own advantages and limitations. You can select and use them based on your project requirements. Our principle is: simple, practical, and compatible.

 

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.