Lightweight JavaScript Library For Html5 Canvas Charts

Preview:

Description:

A lightweight and standalone JavaScript library that draws circular charts (ring charts) on Html5 canvas elements.

How to use it:

Load the CircleChart.js in the document’s head section.

<script src="js/CircleChart.js"></script>

Create an Html5 canvas element on where you want to draw a circular chart.

<canvas id="demo">Some text here...</canvas>

Initialize the circular and set the initial percentage.

var chart1 = new CircleChart();
chart1.init("demo", 50);

Set the parameters for the circular chart.

var context = null;
var canvasWidth = 320;
var canvasHeight = 320;
var chartPercent = 34;
var lightColor = '#c2d56a';
var darkColor = '#8abc4b';
var inc = true;
var mouseX = null;
var mouseY = null;