Skip to content

Latest commit

 

History

History
39 lines (32 loc) · 926 Bytes

README.md

File metadata and controls

39 lines (32 loc) · 926 Bytes
Raw

###Overview

A simple animated donut chart for Raphaël JS. You can check out an example here.

###Usage

Include donut_chart.js in your header:

<script src="http://yourdomain.com/donut_chart.js" type="text/javascript"></script>

Prepare some data:

    var columns = [
        { value: 900, color: "#CFCFCF" },
        { value: 600, color: "#ACACAC" }, 
        { value: 400, color: "#B4DDFF" },
        { value: 100, color: "#91CCF7" },
        { value: 1000, color: "#60ABF0" }
    ]
    var text = "5.0"

Instantiate Raphael:

  var paper = Raphael("canvas", 800, 800);

Create the donut:

  new DonutChart(paper, columns, 80, "5.0");

###Roadmap

  • Add minimized version
  • Arc interactions
  • Interface to update chart and animate to new values
  • Text animations
  • Improve arc animation efficiency