Can someone tell me what I'm doing wrong here, chart renders but when I click the bar I get error in console:
Uncaught TypeError: ComboChart.getElementsAtEvent is not a function at HTMLCanvasElement.document.getElementById.onclick.
I verified a couple of other posts on stack but don't seem to get an idea, I'm fairly new to javascript, please help me understand why this wouldn't work.
Thanks a lot!
<head>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-row-gap: 1em;
grid-column-gap: 1em;
justify-items: stretch;
align-items: stretch;
grid-auto-flow: column;
}
.wrapper>div {
//background: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
//background: #ddd;
}
.ComboChart {
/*justify-self:end;*/
grid-column: 1/9;
grid-row: 1/5;
}
.container {
/*align-self:end;*/
grid-column: 7/9;
grid-row: 2;
}
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: N/A%;
height: 30px;
background-color: ;
text-align: center;
line-height: 30px;
color: white;
}
.Top5 {
/*align-self:end;*/
grid-column: 1/3;
grid-row: 3;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="ComboChart">
<canvas id="ComboChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script>
console.log(Chart.defaults.global)
var obj = JSON.parse('{"Account":{"JAN":{"Month":"JAN","MonthlyBudget":323342.6200000000,"MonthlyPosted":207198.1700000000,"MonthlyVariance":116144.4500000000,"YTDBudget":323342.6200000000,"YTDPosted":207198.1700000000,"YTDVariance":116144.4500000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935521.880000000,"AnnualVariance":1944037.460000000},"FEB":{"Month":"FEB","MonthlyBudget":303967.7900000000,"MonthlyPosted":333011.4200000000,"MonthlyVariance":-29043.63000000000,"YTDBudget":627310.4100000000,"YTDPosted":540092.5900000000,"YTDVariance":87217.82000000002,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"MAR":{"Month":"MAR","MonthlyBudget":325389.6400000000,"MonthlyPosted":223266.5100000000,"MonthlyVariance":102123.1300000000,"YTDBudget":952700.0500000000,"YTDPosted":761933.8800000000,"YTDVariance":190766.1700000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1929419.560000000,"AnnualVariance":1950139.780000000},"APR":{"Month":"APR","MonthlyBudget":321608.2000000000,"MonthlyPosted":268868.0300000001,"MonthlyVariance":52740.17000000000,"YTDBudget":1274308.250000000,"YTDPosted":1032227.130000000,"YTDVariance":242081.1200000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"MAY":{"Month":"MAY","MonthlyBudget":328223.9600000000,"MonthlyPosted":267917.2600000000,"MonthlyVariance":60306.70000000000,"YTDBudget":1602532.210000000,"YTDPosted":1300144.390000000,"YTDVariance":302387.8200000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1937114.100000000,"AnnualVariance":1942445.240000000},"JUN":{"Month":"JUN","MonthlyBudget":321608.2000000000,"MonthlyPosted":256167.9500000000,"MonthlyVariance":65440.25000000000,"YTDBudget":1924140.410000000,"YTDPosted":1555711.980000000,"YTDVariance":368428.4300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"JUL":{"Month":"JUL","MonthlyBudget":328223.9600000000,"MonthlyPosted":268862.8300000000,"MonthlyVariance":59361.13000000000,"YTDBudget":2252364.370000000,"YTDPosted":1821052.940000000,"YTDVariance":431311.4300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1930920.280000000,"AnnualVariance":1948639.060000000},"AUG":{"Month":"AUG","MonthlyBudget":328223.9600000000,"MonthlyPosted":250416.9300000000,"MonthlyVariance":77807.03000000000,"YTDBudget":2580588.330000000,"YTDPosted":2075383.600000000,"YTDVariance":505204.7300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1936905.600000000,"AnnualVariance":1942653.740000000},"SEP":{"Month":"SEP","MonthlyBudget":313274.8700000000,"MonthlyPosted":-76566.64000000000,"MonthlyVariance":389841.5100000000,"YTDBudget":2827196.560000000,"YTDPosted":1961361.240000000,"YTDVariance":865835.3200000000,"AnnualBudget":3779559.380000000,"AnnualPosted":1900049.880000000,"AnnualVariance":1879509.500000000},"OCT":{"Month":"OCT","MonthlyBudget":0,"MonthlyPosted":-61311.36000000000,"MonthlyVariance":61311.36000000000,"YTDBudget":1764331.340000000,"YTDPosted":1231178.370000000,"YTDVariance":533152.9700000000,"AnnualBudget":2362354.180000000,"AnnualPosted":1231178.370000000,"AnnualVariance":1131175.810000000}}}');
if (obj.Account.NOV != null) {
novMonth = obj.Account.NOV.Month;
novAnnualPosted = obj.Account.NOV.AnnualPosted;
novAnnualVariance = obj.Account.NOV.AnnualVariance;
} else {
novMonth = 'NOV';
novAnnualPosted = 0;
novAnnualVariance = 0;
}
if (obj.Account.DEC != null) {
decMonth = obj.Account.DEC.Month;
decAnnualPosted = obj.Account.DEC.AnnualPosted;
decAnnualVariance = obj.Account.DEC.AnnualVariance;
} else {
decMonth = 'DEC';
decAnnualPosted = 0;
decAnnualVariance = 0;
}
var comma = ",";
var month = novMonth.concat(decMonth);
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
new Chart(document.getElementById("ComboChart"), {
type: 'bar',
data: {
labels: [obj.Account.JAN.Month, obj.Account.FEB.Month, obj.Account.MAR.Month, obj.Account.APR.Month, obj.Account.MAY.Month, obj.Account.JUN.Month, obj.Account.JUL.Month, obj.Account.AUG.Month, obj.Account.SEP.Month, obj.Account.OCT.Month, month],
datasets: [{
label: "Annual Posted",
type: "bar",
borderColor: 'rgb(115, 115, 115)',
backgroundColor: 'rgb(115, 115, 115)',
data: [obj.Account.JAN.AnnualPosted,
obj.Account.FEB.AnnualPosted,
obj.Account.MAR.AnnualPosted,
obj.Account.APR.AnnualPosted,
obj.Account.MAY.AnnualPosted,
obj.Account.JUN.AnnualPosted,
obj.Account.JUL.AnnualPosted,
obj.Account.AUG.AnnualPosted,
obj.Account.SEP.AnnualPosted,
obj.Account.OCT.AnnualPosted,
novAnnualPosted,
decAnnualPosted
],
fill: false
},
{
label: "Annual Variance",
type: "bar",
borderColor: 'rgb(210, 11, 11)',
backgroundColor: 'rgb(210, 11, 11)',
data: [obj.Account.JAN.AnnualVariance,
obj.Account.FEB.AnnualVariance,
obj.Account.MAR.AnnualVariance,
obj.Account.APR.AnnualVariance,
obj.Account.MAY.AnnualVariance,
obj.Account.JUN.AnnualVariance,
obj.Account.JUL.AnnualVariance,
obj.Account.AUG.AnnualVariance,
obj.Account.SEP.AnnualVariance,
obj.Account.OCT.AnnualVariance,
novAnnualVariance,
decAnnualVariance
],
fill: false
}
]
},
options: {
title: {
display: true,
text: 'YTD Budget vs Posted',
position: 'right'
},
legend: {
display: true,
position: 'bottom'
},
maintainAspectRatio: false,
responsive: true,
responsiveAnimationDuration: 1500,
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
},
}
});
document.getElementById("ComboChart").onclick = function(evt) {
var activePoints = ComboChart.getElementsAtEvent(evt);
var firstPoint = activePoints[0];
var label = ComboChart.data.labels[firstPoint._index];
var value = ComboChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
if (firstPoint !== undefined)
alert(label + ": " + value);
};
</script>
</div>
</div>
</body>
<body>You will have to instantiate ComboChart in your code.
When you create the chart using new Chart(document.getElementById("ComboChart")), you will have to assign the result to a variable called ComboChart: var ComboChart = new Chart(document.getElementById("ComboChart"))
That way, you can reference it from the event handler.
<head>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<style>
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-row-gap: 1em;
grid-column-gap: 1em;
justify-items: stretch;
align-items: stretch;
grid-auto-flow: column;
}
.wrapper>div {
//background: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
//background: #ddd;
}
.ComboChart {
/*justify-self:end;*/
grid-column: 1/9;
grid-row: 1/5;
}
.container {
/*align-self:end;*/
grid-column: 7/9;
grid-row: 2;
}
#myProgress {
width: 100%;
background-color: #ddd;
}
#myBar {
width: N/A%;
height: 30px;
background-color: ;
text-align: center;
line-height: 30px;
color: white;
}
.Top5 {
/*align-self:end;*/
grid-column: 1/3;
grid-row: 3;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="ComboChart">
<canvas id="ComboChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script>
console.log(Chart.defaults.global)
var obj = JSON.parse('{"Account":{"JAN":{"Month":"JAN","MonthlyBudget":323342.6200000000,"MonthlyPosted":207198.1700000000,"MonthlyVariance":116144.4500000000,"YTDBudget":323342.6200000000,"YTDPosted":207198.1700000000,"YTDVariance":116144.4500000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935521.880000000,"AnnualVariance":1944037.460000000},"FEB":{"Month":"FEB","MonthlyBudget":303967.7900000000,"MonthlyPosted":333011.4200000000,"MonthlyVariance":-29043.63000000000,"YTDBudget":627310.4100000000,"YTDPosted":540092.5900000000,"YTDVariance":87217.82000000002,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"MAR":{"Month":"MAR","MonthlyBudget":325389.6400000000,"MonthlyPosted":223266.5100000000,"MonthlyVariance":102123.1300000000,"YTDBudget":952700.0500000000,"YTDPosted":761933.8800000000,"YTDVariance":190766.1700000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1929419.560000000,"AnnualVariance":1950139.780000000},"APR":{"Month":"APR","MonthlyBudget":321608.2000000000,"MonthlyPosted":268868.0300000001,"MonthlyVariance":52740.17000000000,"YTDBudget":1274308.250000000,"YTDPosted":1032227.130000000,"YTDVariance":242081.1200000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"MAY":{"Month":"MAY","MonthlyBudget":328223.9600000000,"MonthlyPosted":267917.2600000000,"MonthlyVariance":60306.70000000000,"YTDBudget":1602532.210000000,"YTDPosted":1300144.390000000,"YTDVariance":302387.8200000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1937114.100000000,"AnnualVariance":1942445.240000000},"JUN":{"Month":"JUN","MonthlyBudget":321608.2000000000,"MonthlyPosted":256167.9500000000,"MonthlyVariance":65440.25000000000,"YTDBudget":1924140.410000000,"YTDPosted":1555711.980000000,"YTDVariance":368428.4300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1935613.380000000,"AnnualVariance":1943945.960000000},"JUL":{"Month":"JUL","MonthlyBudget":328223.9600000000,"MonthlyPosted":268862.8300000000,"MonthlyVariance":59361.13000000000,"YTDBudget":2252364.370000000,"YTDPosted":1821052.940000000,"YTDVariance":431311.4300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1930920.280000000,"AnnualVariance":1948639.060000000},"AUG":{"Month":"AUG","MonthlyBudget":328223.9600000000,"MonthlyPosted":250416.9300000000,"MonthlyVariance":77807.03000000000,"YTDBudget":2580588.330000000,"YTDPosted":2075383.600000000,"YTDVariance":505204.7300000000,"AnnualBudget":3879559.340000000,"AnnualPosted":1936905.600000000,"AnnualVariance":1942653.740000000},"SEP":{"Month":"SEP","MonthlyBudget":313274.8700000000,"MonthlyPosted":-76566.64000000000,"MonthlyVariance":389841.5100000000,"YTDBudget":2827196.560000000,"YTDPosted":1961361.240000000,"YTDVariance":865835.3200000000,"AnnualBudget":3779559.380000000,"AnnualPosted":1900049.880000000,"AnnualVariance":1879509.500000000},"OCT":{"Month":"OCT","MonthlyBudget":0,"MonthlyPosted":-61311.36000000000,"MonthlyVariance":61311.36000000000,"YTDBudget":1764331.340000000,"YTDPosted":1231178.370000000,"YTDVariance":533152.9700000000,"AnnualBudget":2362354.180000000,"AnnualPosted":1231178.370000000,"AnnualVariance":1131175.810000000}}}');
if (obj.Account.NOV != null) {
novMonth = obj.Account.NOV.Month;
novAnnualPosted = obj.Account.NOV.AnnualPosted;
novAnnualVariance = obj.Account.NOV.AnnualVariance;
} else {
novMonth = 'NOV';
novAnnualPosted = 0;
novAnnualVariance = 0;
}
if (obj.Account.DEC != null) {
decMonth = obj.Account.DEC.Month;
decAnnualPosted = obj.Account.DEC.AnnualPosted;
decAnnualVariance = obj.Account.DEC.AnnualVariance;
} else {
decMonth = 'DEC';
decAnnualPosted = 0;
decAnnualVariance = 0;
}
var comma = ",";
var month = novMonth.concat(decMonth);
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
};
var ComboChart = new Chart(document.getElementById("ComboChart"), {
type: 'bar',
data: {
labels: [obj.Account.JAN.Month, obj.Account.FEB.Month, obj.Account.MAR.Month, obj.Account.APR.Month, obj.Account.MAY.Month, obj.Account.JUN.Month, obj.Account.JUL.Month, obj.Account.AUG.Month, obj.Account.SEP.Month, obj.Account.OCT.Month, month],
datasets: [{
label: "Annual Posted",
type: "bar",
borderColor: 'rgb(115, 115, 115)',
backgroundColor: 'rgb(115, 115, 115)',
data: [obj.Account.JAN.AnnualPosted,
obj.Account.FEB.AnnualPosted,
obj.Account.MAR.AnnualPosted,
obj.Account.APR.AnnualPosted,
obj.Account.MAY.AnnualPosted,
obj.Account.JUN.AnnualPosted,
obj.Account.JUL.AnnualPosted,
obj.Account.AUG.AnnualPosted,
obj.Account.SEP.AnnualPosted,
obj.Account.OCT.AnnualPosted,
novAnnualPosted,
decAnnualPosted
],
fill: false
},
{
label: "Annual Variance",
type: "bar",
borderColor: 'rgb(210, 11, 11)',
backgroundColor: 'rgb(210, 11, 11)',
data: [obj.Account.JAN.AnnualVariance,
obj.Account.FEB.AnnualVariance,
obj.Account.MAR.AnnualVariance,
obj.Account.APR.AnnualVariance,
obj.Account.MAY.AnnualVariance,
obj.Account.JUN.AnnualVariance,
obj.Account.JUL.AnnualVariance,
obj.Account.AUG.AnnualVariance,
obj.Account.SEP.AnnualVariance,
obj.Account.OCT.AnnualVariance,
novAnnualVariance,
decAnnualVariance
],
fill: false
}
]
},
options: {
title: {
display: true,
text: 'YTD Budget vs Posted',
position: 'right'
},
legend: {
display: true,
position: 'bottom'
},
maintainAspectRatio: false,
responsive: true,
responsiveAnimationDuration: 1500,
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true,
callback: function(value, index, values) {
if (parseInt(value) >= 1000) {
return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
} else {
return '$' + value;
}
}
}
}]
},
}
});
document.getElementById("ComboChart").onclick = function(evt) {
var activePoints = ComboChart.getElementsAtEvent(evt);
var firstPoint = activePoints[0];
var label = ComboChart.data.labels[firstPoint._index];
var value = ComboChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
if (firstPoint !== undefined)
alert(label + ": " + value);
};
</script>
</div>
</div>
</body>
<body>