I have to display a line chart with two different datasets in one single chart. After execution of query I got the plan_plan and actual_plan of the following form.
plan_plan = 0: {week: "46", planned_del: "20"}
1: {week: "53", planned_del: "94"}
actual_plan = 0: {week: "8", actual_del: "1"}
javascript part:
function show_Graph()
{
{
var plandata = <?php echo json_encode($plan_plan); ?>;
var actualdata = <?php echo json_encode($actual_plan); ?>;
console.log(plandata);
var labels = [];
var plandel = [];
var actualdel = [];
for (var i in plandata) {
labels.push(plandata[i].week);
plandel.push(plandata[i]);
}
for (var j in actualdata) {
labels.push(actualdata[j].week);
actualdel.push(actualdata[j]);
}
var chartdata = {
labels: labels,
datasets: [
{
label: "Planned Deliverables",
fill: false,
borderColor: "rgba(255, 0, 0, 1)",
pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
data: plandel
},
{
label: "Actual Deliverables",
fill: false,
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: actualdel
}
]
};
var graphTarget = $("#scurve_chart");
var barGraph = new Chart(graphTarget, {
type: 'line',
data: chartdata,
options: {
elements: {
point:{
radius: 1,
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
barValueSpacing: 2,
barPercentage: 0.2
}]
}
}
});
}}
I want to get the week in x axis and then planned_del and actual_del data in y axis which can be shown as line chart. And also should show a single point entry even when there is no data points to be connected.
One way for achieving this, would be to defined data.labels
as an array
of numbers from 0 to 53.
labels: [0, 1, 2, ... 53]
The data
inside the two datasets
would then only contain the definitions of individual points .
data: [{ x: 46, y: 20 }, { x: 53, y: 94 }] // plandata
...
data: [{ x: 8, y: 1}] // actualdata
Here's the JavaScript part that illustrates how the desired result can be obtained.
var plandata = [{ week: "46", planned_del: "20" }, { week: "53", planned_del: "94" }]; var actualdata = [{ week: "8", actual_del: "1" }]; new Chart("scurve_chart", { type: 'line', data: { labels: Array.from(new Array(54), (x, i) => i), datasets: [{ label: "Planned Deliverables", fill: false, borderColor: "rgba(255, 0, 0, 1)", pointHoverBackgroundColor: "rgba(255, 0, 0, 1)", data: plandata.map(o => ({ x: Number(o.week), y: Number(o.planned_del)})) }, { label: "Actual Deliverables", fill: false, 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: actualdata.map(o => ({x: Number(o.week), y: Number(o.actual_del)})) } ] }, options: { tooltips: { callbacks: { title: (tooltipItem, data) => "Week " + data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].x } }, scales: { yAxes: [{ ticks: { beginAtZero: true } }], xAxes: [{ ticks: { min: 0, max: 53, stepSize: 1 } }] } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> <canvas id="scurve_chart" height="90"></canvas>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.