分类： 系统运维
2009-05-04 12:13:15
Effective data visualization allows users to easily understand and consume otherwise complex, boring information. Plotting your data can serve as a replacement to tabular data, and is also a great way to add practical graphics to your web page or application. There are a variety of ways you can plot data on-the-fly - but in this article we’ll focus on 10 excellent JavaScript solutions to graphing/charting data that allow you to process data client-side. You’ll also find a link to one of the demonstration pages of the script so that you can see it in action.
Flot is a data-plotting library developed by built on top of jQuery. It’s easy to use, yet feature-packed and elegant. It has a mouse-controlled zooming feature (click and drag over the target area) and some simple user interactivity features such the ability to determine the x and y coordinates of mouse clicks.
Demonstration:
Flotr, written by Bas Wenneker of , is a plotting solution inspired by Flot that uses the Prototype JS library and . It supports most modern browsers including Internet Explorer 6, and has many features of Flot including mouse tracking, selection, mouse-tracking features.
Demonstration:
fgCharting jQuery plugin is an accessible solution for charting data. It takes data in an HTML table and dynamically transforms the table into charts, allowing non-traditional browsers (i.e. - screen readers) access to the HTML table. Basic usage involves one line of code to initialize the plugin.
Demonstration:
PlotKit is a charts and graphs plotting solution written on top of . PlotKit a complete rewrite of a project called , improving on code structure and adding support for SVG format. The developers of PlotKit provides you with a to get you up and running in no time.
Demonstration:
The JavaScript Diagram Builder supports several types of chart and graph types including bars, dots, lines, and pie charts. The developer has provided a to help you check if particular objects/methods of the library are supported by your current browser.
Demonstration:
Emprise JavaScript Charts offers a free Personal License for their feature-packed charting/graphing script. Check out their of the different types of licenses to see which license is right for you.
Demonstration:
DynamicDrive offers a DHTML/CSS based solution for graphing pie charts. The implementation is straightforward, just include two scripts provided ( and ), define the values of each segment of your pie chart either inline or in an external JS file, and you’re set!
The Line Graph script is another DHTML solution from DynamicDrive that allows you display line graph data. The procedure for implementation is similar to the Pie Graph script.
If you need to graph 3-dimensional data, Canvas 3D Graph is worth checking out. Canvas 3D Graph is written with excanvas.js to support Internet Explorer.
The Dojo Charting Engine is a solution written on top of the JavaScript library. It is a feature-rich solution that includes trend methods for analyzing data on-the-fly, 3D visual bars, and animated hover-over effects. Note that the example test page linked on the project page doesn’t work, here’s the .
