[ACCEPTED]-Pie chart with jQuery-google-visualization

Accepted answer
Score: 99


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

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

The trunk version of 36 flot supports pie charts.

Flot Zoom capability.

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


Limitations: Pie, Line, Bar, Combination

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

Query Chart 0.21

Limitations: Area, Line, Bar and combinations of these

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

Adding values into a 14 chart is relatively simple:


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


Limitations: Bar, Line

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


Limitations: Bar and Stacked Bar

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

Score: 48

jqPlot looks pretty good and it is open source.

Here's 2 a link to the most impressive and up-to-date 1 jqPlot examples.

Score: 5

Tons of great suggestions here, just going 6 to throw ZingChart onto the stack for good measure. We 5 recently released a jQuery wrapper for the library that 4 makes it even easier to build and customize 3 charts. The CDN links are in the demo below.

I'm 2 on the ZingChart team and we're here to 1 answer any questions any of you might have!

  "data": {
    "type": "pie",
    "legend": {},
    "series": [{
      "values": [5]
    }, {
      "values": [10]
    }, {
      "values": [15]
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>

<div id="pie-chart"></div>
Score: 4

A few others that have not been mentioned:

For 8 mini pies, lines and bars, Peity is brilliant, simple, tiny, fast, uses 7 really elegant markup.

I'm not sure of it's 6 relationship with Flot (given its name), but 5 Flotr2 is pretty good, certainly does better pies 4 than Flot.

Bluff produces nice-looking line graphs, but 3 I had a bit of trouble with its pies.

Not 2 what I was after, but another commercial 1 product (much like Highcharts) is TeeChart.

Score: 4

Chart.js is quite useful, supporting numerous other 2 types of charts as well.

It can be used both 1 with jQuery and without.

Score: 3

There is a new player in the field, offering 10 advanced Navigation Charts that are using 9 Canvas for super-smooth animations and performance:


Example 8 of charts:

interactive pie chart

Documentation: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

What is cool about 7 this lib:

  • Others slice can be expanded
  • Pie offers drill down for hierarchical structures (see example)
  • write your own data source controller easily, or provide simple json file
  • export high res images out of box
  • full touch support, works smoothly on iPad, iPhone, android, etc.

enter image description here

Charts are free for non-commercial 6 use, commercial licenses and technical support 5 available as well.

Also interactive Time 4 charts and Net Charts are there for you 3 to use. enter image description here

enter image description here

Charts come with extensive API and 2 Settings, so you can control every aspect 1 of the charts.

Score: 0

Check TeeChart for Javascript

  • Free for non-commercial use.

  • Includes plugins 3 for jQuery, Node.js, WordPress, Drupal, Joomla, Microsoft 2 TypeScript, etc...

  • Interactive demos here and 1 here.

  • Some screenshots of some of the demos:

TeeChart Javascript - Bars

TeeChart Javascript - Pie

TeeChart Javascript - Points

More Related questions