Javascript examples for Chart.js:Doughnut Chart
Add links to chart.js for Doughnut Charts
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> </head> <body> <canvas id="chart" width="400" height="400"></canvas> <script type="text/javascript"> var data = [/*from www . jav a 2 s. co m*/ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red" //filter: 1 }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" //filter: 2 }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" //filter: 3 } ] $(document).ready( function () { var ctx = $("#chart").get(0).getContext("2d"); var chart = new Chart(ctx).Doughnut(data); var segments = chart.segments; for (var i = 0; i < segments.length; i++) { segments[i].filter = i+1; } $("#chart").click( function(evt){ var activePoints = chart.getSegmentsAtEvent(evt); console.log(activePoints); var url = "http://example.com/?grid[f][collor][]=" + activePoints[0].filter console.log(url); } ); } ); </script> </body> </html>