i'm new to this pie chart. i tried all possibile solution available in the internet. i have seperate .js file and html file in the same webapp folder. i don't know where am i missing. Please help me to resolve this issue. Thanks in advance.
i'm getting the error for creating new Chart in the console
piechart.js:48 Uncaught ReferenceError: Chart is not defined
at drawPieChart (piechart.js:48)
at validation (piechart.js:35)
Here is my html code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<script type="text/javascript" src="piechart.js"></script>
</head>
<body>
<div>
<button onclick="makePieChart()">view to piechart</button>
</div>
<div>
<canvas id="chartContainer" style="height: 300px; width: 100%;margin-left: -313px;"></canvas>
</div>
</body>
</html>
Here is my pieChart.js code
if (typeof jQuery === "undefined") {
var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-latest.min.js';
script.type = 'text/javascript';
script.srcOne="https://canvasjs.com/assets/script/canvasjs.min.js";
script.srcTwo="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js";
document.getElementsByTagName('head')[0].appendChild(script);
}
var details;
function makePieChart() {
console.log("in");
$.ajax({
url : 'http://localhost:8085/restcall/rest/details',
type : 'GET',
cache : false,
success : function(data) {
console.log(data);
details = data;
validation(details);
}
});
}
function validation(details) {
let pending = 0;
let completed = 0;
for (var i = 0; i < details.length; i++) {
if (details[i].flag == 0) {
pending++;
} else {
completed++;
}
}
drawPieChart(pending, completed);
}
function drawPieChart(count1, count2) {
var canvas = document.getElementById("chartContainer");
var ctx = canvas.getContext("2d");
var data = {
datasets : [ {
data : [ count1, count2 ],
backgroundColor : [ "#F7464A", "#46BFBD" ]
} ],
labels : [ "Completed", "Pending" ]
};
var myNewChart = new Chart(ctx, {
animationEnabled : true,
title : {
text : "status"
},
type : 'pie',
data : data
});
canvas.onclick = function(evt) {
var activePoints = myNewChart.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];
if (label === "Pending") {
pendingList(sample);
}
}
}
}
function pendingList(details) {
var pList = [];
var list = details;
console.log(list);
for (var i = 0; i < details.length; i++) {
if (details[i].flag == "0") {
pList.push(details[i].name);
} else {
//console.log(sample[i].name);
}
}
console.log(pList);
}
