Chart JS | dynamic Data

//make sure to add Jquery and Chartjs Library
a canvas with id=”seolinechart”

//inside script tag START
$.get(“functions.aspx?cat=GETData”, function (data, status) {
if (status == “success”) {
if ($(‘#seolinechart’).length) {
var ctx = document.getElementById(“seolinechart”).getContext(‘2d’);

var businessUnits = [];
var bgColor = [“#8919FE”, “#12C498”, “#F8CB3F”, “#E36D68”, “#a2fe19”, “#199bfe”, “#d419fe”, “#fe6919”, “#d8fe19”, “#fe198f”];
var contractCount = [];
var contractValue = [];
var totalCount = 0;

var contractData = JSON.parse(data);
for (i = 0; i < contractData.length; i++) {
businessUnits[i] = contractData[i].Business_Unit_CRM;
contractCount[i] = contractData[i].Count;
contractValue[i] = contractData[i].Contract_TotalAmount_KWD;
totalCount = totalCount + parseInt(contractData[i].Count);
}

var chart = new Chart(ctx, {
// The type of chart we want to create
type: ‘pie’,

// The data for our dataset
data: {
labels: businessUnits,
datasets: [{
backgroundColor: bgColor,
borderColor: ‘#fff’,
data: contractCount,
}]
},
// Configuration options go here
options: {
title: {
display: true,
position: ‘bottom’,
text: ‘Total Contracts:’ + totalCount
},
legend: {
display: true,
},
animation: {
easing: “easeInOutBack”
},
tooltips: {
// Disable the on-canvas tooltip
enabled: true,
bodyFontSize: 14,
callbacks: {
label: function (tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || ”;

//console.log(tooltipItem);
//console.log(data);
//console.log(data.labels[4]);
if (label) {
label += ‘: ‘;
}
// label += Math.round(tooltipItem.yLabel * 100) / 100;
label += data.labels[tooltipItem.index] + ‘: (‘ + data.datasets[0].data[tooltipItem.index] + ‘) KWD ‘ + parseInt(contractValue[tooltipItem.index]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, “,”); //.toFixed(3).replace(/\d(?=(\d{3})+\.)/g, ‘$&,’);
return label;
}
}
}
}
});
}
}
});

//script tag END