pie chart in javascript?

Question

I want to create a pie chart using a set of data retrieved from database.

I found FLot and Graphael and both are quite good, but I didn't find any beginner tutorials.

How can I start adding pie charts in my code?

Are there any beginner tutorials?

Answer 1

Try bluff charts.

Example for pie chart:-

function pieChartExample(){
  //Create pie chart
  var bluffGraph = new Bluff.Pie('bluffExample', 400);
  //Use keynote theme. Several other themes can be used
  bluffGraph.theme_keynote();
  bluffGraph.title = 'Pass Vs Fail';

  bluffGraph.data('Pass',75,'green');
  bluffGraph.data('Fail',25,'red');

  bluffGraph.draw();
}

Answer 2

I personally think that out of all the Javascript graphing libraries, Flot actually lives up to its goal of being "Attractive Javascript plotting."

Here are a number of examples which should get you started creating pie charts in Flot.

Creating a pie chart with Flot is as easy as

$.plot($("#default"), data,
{
        series: {
            pie: { 
                show: true
            }
        }
});

Make sure to include JQuery and Flot properly in the header of your document. If you need help formatting the data set to be plotted and selecting options of how the chart will be drawn, reference the Flot API Documentation, which is clear and contains many examples.

As far as retrieving data from the database, you can do that through AJAX. Here is an example of retrieving data through AJAX using JQuery and plotting the data with Flot, which works as follows:

$.ajax({
        url: dataurl,
        method: 'GET',
        dataType: 'json',
        success: onDataReceived
});

Look at the JQuery AJAX documentation if you need more help.

Answer 3

There are a few nice recommendations in the answers of this question.

You mentioned that you can't find documentation for gRaphael, but RaphaelJs actually has some documentation, which is what gRaphael is based on.