<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme:"dark2",
title:{
text: "TIME vs. # of start phone calls"
},
axisY :{
includeZero: true,
title: "# of start phone calls",
suffix: "%"
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
itemclick: toggleDataSeries
},
data: [{
type: "column",
name: "PERIODIC",
legendText: "PERIODIC",
showInLegend: true,
yValueFormatString: "#,##0\"%\"",
dataPoints:
[
{ label: "6am - 10am", y: 10 },
{ label: "10am - 4pm", y: 30 },
{ label: "4pm - 8pm", y: 55 },
{ label: "8pm - 12am", y: 80 },
{ label: "12pm - 6am", y: 75 }
]
},
{
type: "column",
name: "VOICE CALL",
legendText: "VOICE CALL",
showInLegend: true,
yValueFormatString: "#,##0\"%\"",
dataPoints:
[
{ label: "6am - 10am", y: 50 },
{ label: "10am - 4pm", y: 60 },
{ label: "4pm - 8pm", y: 57 },
{ label: "8pm - 12am", y: 80 },
{ label: "12pm - 6am", y: 90 }
]
},
{
type: "column",
name: "LOCATION CHANGE",
legendText: "LOCATION CHANGE",
showInLegend: true,
yValueFormatString: "#,##0\"%\"",
dataPoints:
[
{ label: "6am - 10am", y: 60 },
{ label: "10am - 4pm", y: 90 },
{ label: "4pm - 8pm", y: 65 },
{ label: "8pm - 12am", y: 20 },
{ label: "12pm - 6am", y: 15 }
]
}]
});
chart.render();
function toggleDataSeries(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 600px; width: 100%;"></div>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>
In this code I want to make a change so that EXTERNAL JSON DATA can fetch through jquery and generate this graph using JSON DATA! How can I do this? please let me know.
.
