CODEWITHSUNDEEP
jquerymodal-dialogchart.js
sid
sid

Reputation: 5

Add Modal Popup for each chart.js data value

Is there any way to add modal popup for each chart js data values. Here dD 1 , dD2 etc... are the data values, on click this each value, i need to open modal popup.

var dData = function() {
  return Math.round(Math.random() * 90) + 10
};
var barChartData = {
  labels: ["dD 1", "dD 2", "dD 3", "dD 4", "dD 5", "dD 6", "dD 7", "dD 8", "dD 9", "dD 10"],
  datasets: [{
    fillColor: "rgba(0,60,100,1)",
    strokeColor: "black",
    data: [dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData(), dData()]
  }]
}

var index = 11;
var ctx = document.getElementById("canvas").getContext("2d");
var barChartDemo = new Chart(ctx).Bar(barChartData, {
  responsive: true,
  barValueSpacing: 2
});
setInterval(function() {
  barChartDemo.removeData();
  barChartDemo.addData([dData()], "dD " + index);
  index++;
}, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
  <canvas id="canvas"></canvas>

Upvotes: 0

Views: 712

Answers (1)

Parth Mahida
Parth Mahida

Reputation: 604

You can add model pop code here,

$("#canvas").click( 
    function(evt){
        var activePoints = myNewChart.getSegmentsAtEvent(evt);           
        /* do something */
    }
);

Upvotes: 1

Related Questions