Graphs & Charts Subtitle goes here...
Flot Charts
Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.
Simple Chart
Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.
| Flash | |
| HTML5 |
Using Other Symbols
For other point types, you can define a callback function to draw the symbol. Some common symbols are available in the symbol plugin.
| Firefox | |
| Chrome |
Tracking With Crosshair
You can add crosshairs that'll track the mouse position, either on both axes or as here on only one.
Real Time Updates
You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.
Bar Chart
With the categories plugin you can plot categories/textual data easily.
Pie Chart
Labels can be hidden if the slice is less than a given percentage of the pie.
| Series 1 | |
| Series 2 | |
| Series 3 | |
| Series 4 | |
| Series 5 |
11%
32%
25%
29%
Line Chart
A line graph is a type of chart which displays information as a series of data points connected by straight line segments.
Area Chart
Area charts are used to represent cumulated totals using numbers or percentages (stacked area charts in this case) over time.
Bar Chart
A bar chart or bar graph is a chart with rectangular bars with lengths proportional to the values that they represent.
Stacked Chart
The stacked charts are used when data sets have to be broken down into their constituents.
Donut Chart
A donut chart, or doughnut chart, functions precisely like a pie chart. The only difference is that the center is blank.
Donut Chart
A donut chart, or doughnut chart, functions precisely like a pie chart. The only difference is that the center is blank.
Sparkline Charts
jQuery Sparkline generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
