Basic Pie Chart Using JavaScript And Canvas – DiagJS

Author
In Articles, Web Design Nov 6, 2017
Basic Pie Chart Using JavaScript And Canvas – DiagJS

Today we are going to share Basic Pie Chart with you. Now you can build pie chart in easy way. DiagJS is a simple-to-use JavaScript library that lets you dynamically draw an animated, interactive pie chart on an HTML5 canvas element.

How to use it:

Create an empty canvas element on which you want to draw the pie chart.

<canvas width="800" height="800" id="example"> Sorry, canvas not supported </canvas>

Download and insert the diagjs.js script into the web page.

<script src="https://www.cssscript.com/diagjs.js">

Define the data (percentage values and color codes) in the JavaScript.

var elements = { dogs: 0.3, cats: 0.6, dinosaurs: 0.1 }; var colors = { dogs: 'green', cats: 'blue', dinosaurs: 'red' };

Draw the pie chart on the canvas element and done.

var canvas = document.getElementById('can'); var diag = diagJS.PieChart(elements, colors, canvas); diag.draw();

 

Leave a Reply

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