Pie chart with jQuery

by

Flot

Limitations: lines, points, filled areas, bars, pie and combinations of these

From an interaction perspective, Flot by far will get you as close as possible to Flash graphing as you can get with jQuery. Whilst the graph output is pretty slick, and great looking, you can also interact with data points. What I mean by this is you can have the ability to hover over a data point and get visual feedback on the value of that point in the graph.

The trunk version of flot supports pie charts.

Flot Zoom capability.

On top of this, you also have the ability to select a chunk of the graph to get data back for a particular “zone”. As a secondary feature to this “zoning”, you can also select an area on a graph and zoom in to see the data points a little more closely. Very cool.

Sparklines

Limitations: Pie, Line, Bar, Combination

Sparklines is my favourite mini graphing tool out there. Really great for dashboard style graphs (think Google Analytics dashboard next time you login). Because they’re so tiny, they can be included in line (as in the example above). Another nice idea which can be used in all graphing plugins is the self-refresh capabilities. Their Mouse-Speed demo shows you the power of live charting at its best.

Query Chart 0.21

Limitations: Area, Line, Bar and combinations of these

jQuery Chart 0.21 isn’t the nicest looking charting plugin out there it has to be said. It’s pretty basic in functionality when it comes to the charts it can handle, however it can be flexible if you can put in some time and effort into it.

Adding values into a chart is relatively simple:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

Limitations: Bar, Line

jQchart is an odd one, they’ve built in animation transistions and drag/drop functionality into the chart, however it’s a little clunky – and seemingly pointless. It does generate nice looking charts if you get the CSS setup right, but there are better out there.

TufteGraph

Limitations: Bar and Stacked Bar

Tuftegraph sells itself as “pretty bar graphs that you would show your mother”. It comes close, Flot is prettier, but Tufte does lend itself to be very lightweight. Although with that comes restrictions – there are few options to choose from, so you get what you’re given. Check it out for a quick win bar chart.

More Related Contents:

  1. What’s the easiest way to call a function every 5 seconds in jQuery? [duplicate]
  2. Making custom right-click context menus for my web-app
  3. How to create a jQuery plugin with methods?
  4. JQuery to load Javascript file dynamically
  5. Using jQuery, Restricting File Size Before Uploading
  6. Get query string parameters url values with jQuery / Javascript (querystring)
  7. How do I drag multiple elements at once with JavaScript or jQuery?
  8. window.focus(), self.focus() not working in firefox
  9. Why is my ‘load’ event/function not beeing executed after switching to jQuery 3?
  10. I’d like to understand the jQuery plugin syntax
  11. Compress images on client side before uploading [closed]
  12. How to disable tooltip in the browser with jQuery?
  13. Is there a full working example for a jqGrid ColumnChooser? [closed]
  14. How well does jQuery support backward compatibility?
  15. How to individually target multiple dropdowns in CSS for Dropkick Plug-in
  16. Differences between document.ready and $function [duplicate]
  17. How to detect an audio has finished playing in a web page?
  18. Implementing jquery UI autocomplete to show suggestions when you type “@”
  19. What is the role of src and dist folders?
  20. Javascript, Razor and Escape characters. Like apostrophe
  21. Highcharts – Keep tooltip showing on click
  22. Google chart redraw/scale on window resize
  23. Jquery: Filter dropdown list as you type [closed]
  24. Alternative to eval() javascript [duplicate]
  25. Queue AJAX calls
  26. How to write a simple jQuery plugin [closed]
  27. google visualization-Click event
  28. What is the dollar sign in Javascript, if not jQuery
  29. How to convert HTML to JSON using PHP?
  30. Javascript change event on input element fires on only losing focus

Leave a Comment