<Div>is defined in the html code for line chart representation.The data is populated from database and the graph is plotted based on the same data but legends are not displayed.
<div id="chart-container">
<canvas id="scurve_chart"></canvas>
</div>
The data populated from database is converted to json_encode format and saved to an array.from this array data are taken and ploted in the graph .
$(document).ready(function () {
show_scurve_Graph();
});
function show_scurve_Graph()
{
{
var data = <?php echo json_encode($data_plan); ?>;
//console.log();
var labels = [];
var chart1 = [];
var chart2 = [];
var chart3 = [];
var spent = [];
for (var i in data) {
labels.push(data[i].label);
chart1.push(data[i].chart1);
chart2.push(data[i].chart2);
chart3.push(data[i].chart3);
spent.push(data[i].spent);
}
var chartdata = {
labels: labels,
datasets: [
{
label: "BASELINE1",
fill: false,
//lineTension: 0.1,
//backgroundColor: "rgba(255, 0, 0, 0.75)",
borderColor: "rgba(255, 0, 0, 1)",
pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
//pointHoverBorderColor: "rgba(255, 0, 0, 1)",
data: chart1
},
{
label: "BASELINE2",
fill: false,
//lineTension: 0.1,
backgroundColor: "rgba(0, 255, 0, 0.75)",
borderColor: "rgba(0, 255, 0, 1)",
pointHoverBackgroundColor: "rgba(0, 255, 0, 1)",
pointHoverBorderColor: "rgba(0, 255, 0, 1)",
data: chart2
},
{
label: "BASELINE3",
fill: false,
//lineTension: 0.1,
backgroundColor: "rgba(0, 0, 255, 0.75)",
borderColor: "rgba(0, 0, 255, 1)",
pointHoverBackgroundColor: "rgba(0, 0, 255, 1)",
pointHoverBorderColor: "rgba(0, 0, 255, 1)",
data: chart3
},
{
label: "Actual Spent",
fill: false,
backgroundColor: "rgba(50, 50, 50, 0.75)",
borderColor: "rgba(50, 50, 50, 1)",
pointHoverBackgroundColor: "rgba(50, 50, 50, 1)",
pointHoverBorderColor: "rgba(50, 50, 50, 1)",
data: spent
}
]
};
var graphTarget = $("#scurve_chart");
var barGraph = new Chart(graphTarget, {
type: 'line',
data: chartdata,
options: {
elements: {
point:{
radius: 0,
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
barValueSpacing: 2,
barPercentage: 0.2
}]
}
}
});
}}