How to use chart.js script to draw multiple pie charts

Question

I use the code below for a pie chart, and I want to draw the same pie chart with multiplex ids, for example id="canvas2" .

I do not know how to do this with chart.js?

Please help me.

I am using this jsFiddle example

http://jsfiddle.net/2gapedks/

 var data = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" } ]; var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var midX = canvas.width/2; var midY = canvas.height/2 // Create a pie chart var myPieChart = new Chart(ctx).Pie(data, { showTooltips: false, onAnimationProgress: drawSegmentValues }); var radius = myPieChart.outerRadius; function drawSegmentValues() { for(var i=0; i<myPieChart.segments.length; i++) { ctx.fillStyle="white"; var textSize = canvas.width/10; ctx.font= textSize+"px Verdana"; // Get needed variables var value = myPieChart.segments[i].value; var startAngle = myPieChart.segments[i].startAngle; var endAngle = myPieChart.segments[i].endAngle; var middleAngle = startAngle + ((endAngle - startAngle)/2); // Compute text location var posX = (radius/2) * Math.cos(middleAngle) + midX; var posY = (radius/2) * Math.sin(middleAngle) + midY; // Text offside by middle var w_offset = ctx.measureText(value).width/2; var h_offset = textSize/4; ctx.fillText(value, posX - w_offset, posY + h_offset); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <canvas id="canvas" width=300 height=300></canvas> 

Answer 1

If you understood correctly,

The logic is to create a function that draws a chart on an accepted canvas . That way, you can call a function on every canvas you want.

For instance:

 draw(document.getElementById("canvas")); draw(document.getElementById("canvas2")); 

see the following code:

 var allData = [ [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red" }, { value: 50, color: "blue", highlight: "#5AD3D1", label: "Green" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" } ], [ { value: 200, color:"#FF0", highlight: "#FF5A5E", label: "Red" }, { value: 70, color: "purple", highlight: "#5AD3D1", label: "Green" }, { value: 80, color: "pink", highlight: "#FFC870", label: "Yellow" } ] ]; function draw(canvas, data) { var ctx = canvas.getContext("2d"); var midX = canvas.width/2; var midY = canvas.height/2 // Create a pie chart var myPieChart = new Chart(ctx).Pie(data, { showTooltips: false, onAnimationProgress: drawSegmentValues }); var radius = myPieChart.outerRadius; function drawSegmentValues() { for(var i=0; i<myPieChart.segments.length; i++) { ctx.fillStyle= getTextColor(myPieChart.segments[i].fillColor); var textSize = canvas.width/10; ctx.font= textSize+"px Verdana"; // Get needed variables var value = myPieChart.segments[i].value; var startAngle = myPieChart.segments[i].startAngle; var endAngle = myPieChart.segments[i].endAngle; var middleAngle = startAngle + ((endAngle - startAngle)/2); // Compute text location var posX = (radius/2) * Math.cos(middleAngle) + midX; var posY = (radius/2) * Math.sin(middleAngle) + midY; // Text offside by middle var w_offset = ctx.measureText(value).width/2; var h_offset = textSize/4; ctx.fillText(value, posX - w_offset, posY + h_offset); } } } function getTextColor(color) { switch(color) { case 'pink': default: return 'white'; case 'blue': return 'black'; } } draw(document.getElementById("canvas"), allData[0]); draw(document.getElementById("canvas2"), allData[1]); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <canvas id="canvas" width=300 height=300></canvas> <canvas id="canvas2" width=300 height=300></canvas>