Hira Majid Hira Majid - 1 month ago 12
Javascript Question

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

I'm using below code for pie chart and I want to draw same pie chart with multiples ids for example

id="canvas2"
.

I don't know how to do this with chart.js?

Please help me.

I'm 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

If I understand you correctly,

The logic is to create a function that draw the chart on accepted canvas. Is this way, you can call the function on each canvas you want.

For example:

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: "#46BFBD",
          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="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);
    }
  }
}

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>