Adding additional properties to a Chart JS dataset for pie chart - Javascript Chart.js

Javascript examples for Chart.js:Pie Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Pie Chart

Description

Adding additional properties to a Chart JS dataset for pie chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>line chart with ChartJS</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.js"></script> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  www .j  av  a2s. c om*/
      var pieData = [
            {
               segment: "undetermined",
               label: "Undetermined",
               value: 420193,
               color: "#DECF3F",
               highlight: "#e2d455"
            },
            {
               segment: "peer_review",
               label: "Peer Review",
               value: 415212,
               color: "#60BD68",
               highlight: "#72c479"
            }
         ]
      var ctx = document.getElementById("review-type").getContext("2d");
      var reviewChart = new Chart(ctx).Pie(pieData);
$("#review-type").click(
   function (evt) {
      var activePoints = reviewChart.getSegmentsAtEvent(evt);
      if (activePoints.length)
         console.log(pieData.filter(function (e) { return e.label === activePoints[0].label; })[0].segment);
   }
 );
    }

      </script> 
   </head> 
   <body> 
      <canvas id="review-type" height="300" width="800"></canvas>  
   </body>
</html>

Related Tutorials