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

Question

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

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>

Mosh Feu · Accepted Answer · 2016-11-09 10:07:43Z

4

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: "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>

edited Nov 9, 2016 at 10:07

answered Nov 1, 2016 at 13:52

Mosh Feu

29.5k18 gold badges94 silver badges141 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Hira Majid Over a year ago

Thanks @Mosh , But how can I change value for "canvas2". For example I want different colors and percantage value for canvas2. Thanks for your help.

Mosh Feu Over a year ago

@HiraMajid My pleasure :) I was updated my answer. See if it's clear .I turned data to be an array of arrays, and send to the function draw the data also (by index)

Mosh Feu Over a year ago

I'm happy to hear :)

Hira Majid Over a year ago

Hi @Mosh, I need a little help regrading the pie chart, I'll be very thankful if you could help. Problem is I want to use different font colors in this chart so how can I change font colors?

Mosh Feu Over a year ago

If I understand you correctly, you want to change the color of the label, you do this in the line ctx.fillStyle="your_color"; see my update.

|

Collectives™ on Stack Overflow

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

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related