Simple Piechart in HTML5 and Javascript


I created a little pie-chart component in Javascript for anyone who wants to spice up the HTML5 webs-site.

Basically the requirements are that you define the slices like this:

The slices object contains two arrays in it. The first array is a list of the percentages, and the second array contains the corresponding colors. Create the pie chart as a variable via Object.create, and call drawPieChart(..) method passing in the slices object, and a string which is the id of a canvas on your page.

There are two modes.

  • Standard Pie Chart – a basic pie chart with black outline.
  • Segment Pie Chart – the center is hollowed out giving it a slick looking feel. To use this mode just write piechart.segmentMode = true.

Here is the Piechart component code :

There is some basic maths involved in creating the pie chart. The most odd thing is that in HTML5 you do not define the angles from 360 degrees, but as a percent of 2 * PIE.

There is no legend in this component, but it would be pretty easy to create. Given a table element with id legend, we can write some code like this to show the colors in a table.

The complete code for the image at the top of the page is shown below. You may use it any way you wish. Just remember it will only work in a modern browser with HTML5 support suh as the latest browser from Chrome or Firefox.

Enjoy! Please leave a Comment!

Posted in JavaScript | Tagged , , | 6 Comments

6 Responses to Simple Piechart in HTML5 and Javascript

  1. ikram says:

    i need “ilz_test.css ” to try it

  2. Rester says:

    where in the code can you change the bars percentage.

    • felixzacat says:

      in the slices object, under percentages property.

      var slices = {
      “percentages”: [25,20,20,5,30],
      “colors”: [‘gray’, ‘green’, ‘blue’, ‘pink’, ‘orange’],
      “elements”: [‘banana’, ‘clock’, ‘beetroot’, ‘planet’, ‘ball’]

  3. M. Ghoshal says:

    If I want to omit the doughnut chart what should I do?

  4. sandeepm says:

    i really waiting from so many days thank you

  5. erik says:

    Works great. thanks for sharing!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">