Menu
I have Bar chart and Pie Chart to drew using Chart.js.I hope that display Popup Window when it click specific title bar.
Example:
I have bar chart
a. (label name : Apple, Strawberry, Banana, Mango, Grape, Oragne)
I clicked specific label of several labels
a. (click: Apple, Total amount of Apple : 7ea)
Then a pop-up window that use the value passed to the parameter URL will appear, showing more information about the apple inside. a. (Korea apple: 1ea, America apple: 3ea, China apple: 2ea, Japan apple: 1ea)
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Apple", "Strawberry", "Banana", "Mango", "Grape", "Orange"],
datasets: [{
label: '# of Votes',
data: [7, 8, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
$(document).ready(function () {
$("#myChart").click(
function (e) {
/* need programing code */
});
});
335
below code is for bar chart Add Data keys in orders of Labels in my case it was theChart in your case it is myChart
datakeys: ["4", "3", "2", "1", "6"],
document.getElementById("chart_VulSev").onclick = function (evt) {
var activePoints = theChart.getElementAtEvent(evt);
var theElement = theChart.config.data.datasets[activePoints[0]._datasetIndex].data[activePoints[0]._index];
//console.log(activePoints);
//console.log(theElement);
//console.log(theChart.config.data.datakeys[activePoints[0]._index]);
window.open("page.aspx?id=" + theChart.config.data.datakeys[activePoints[0]._index]);
//alert(theChart.config.data.datakeys[activePoints[0]._index]);
//console.log(theChart.config.type);
}
For Pie Chart check this snippet
<html>
<head>
<title>PieChart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script>
var data = {
datasets: [{
data: [300, 50, 100, 200],
backgroundColor: [
"#a02020",
"#ed1c24",
"#ff9900",
"#109618",
]
}],
labels: [
"Critical",
"High",
"Medium",
"Low"
]
};
$(document).ready(
function() {
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'pie',
data: data
});
canvas.onclick = function(evt) {
var activePoints = myNewChart.getElementsAtEvent(evt);
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
var value = chartData.datasets[0].data[idx];
var url = "http://example.com/?label=" + label + "&value=" + value;
console.log(url);
alert(url);
};
}
);
</script>
</head>
<body>
<div style="width: 320.750px; height: 156px">
<canvas id="myChart"></canvas>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
