codegeek codegeek - 1 year ago 88
jQuery Question

How to get the data attribute of the canvas chart created using chartjs

Hi all i am using ChartJs to create charts.i am setting some data attribute on the canvas.on clicking on the chart i need to get the data attribute assigned in the canvas.i have found a method in the documentation which i used to get the label and values of the region of the chart clicked,but i don't know how to get the data attributes.



<!DOCTYPE html>
<html>
<head>
<title> Pie Chart </title>
<style>
.pie-chart-canvas-wrapper{
box-sizing:border-box;
width:500px;
height:300px;
float:left;
}
</style>
</head>
<body>

<div id="pie-charts-whole-wrapper" >
<div class="pie-chart-canvas-wrapper">
<canvas data-region="RO1" data-role="sales" width="500px" height="300px" id="pie1" ></canvas>
</div>
</div> <!--/ Pie Charts whole Wrapper -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script>
var ctx1 = document.getElementById("pie1");
var pieChart1 = new Chart(ctx1, {
type: 'pie',
data: {
labels: ["signed", "Not Signed"],
datasets: [
{
data: [20, 50],
backgroundColor:['#2ecc71','#34495e']
}
]
}
});

ctx1.onclick = function(evt) {
var activePoints = pieChart1.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];

var label = chartData.labels[idx];
var value = chartData.datasets[0].data[idx];

console.log(label);
console.log(value);

}
};

</script>
</body>
</html>




Answer Source

If you want to get the attribute data-role, .getAttribute() is doing the job.

console.log(this.getAttribute("data-role"));

CodePen

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download