using CanvasJS I have two type of data for same dates. The second chart is starting from the left and is not showing in the same X positions as the first chart dates however the dates are the same. How should I show the red chart in the correct X positions?
var chart = new CanvasJS.Chart("chartContainer", {
theme:"light2",
zoomEnabled: true,
animationEnabled: true,
title:{text: "Production"},
axisY:{title: "amount"},
axisX:{labelFontSize: 10},
toolTip: {shared: "true"},
legend:{cursor:"pointer", itemclick : toggleDataSeries},
data: [{
type: "spline", //area
showInLegend: true,
axisYIndex: 0,
name: "P1",
dataPoints: [
{ label: "2019/07/01", y: 10 },
{ label: "2019/07/02", y: 12 },
{ label: "2019/07/03", y: 18 },
{ label: "2019/07/04", y: 5 },
{ label: "2019/07/05", y: 9 },
{ label: "2019/07/06", y: 12 },
{ label: "2019/07/07", y: 10 },
{ label: "2019/07/08", y: 10 },
{ label: "2019/07/09", y: 12 },
{ label: "2019/07/10", y: 7 },
{ label: "2019/07/11", y: 2 },
{ label: "2019/07/12", y: 3 },
{ label: "2019/07/13", y: 4 },
{ label: "2019/07/14", y: 5 },
{ label: "2019/07/15", y: 6 },
{ label: "2019/07/16", y: 0 },
{ label: "2019/07/17", y: 0 },
{ label: "2019/07/18", y: 0 },
{ label: "2019/07/19", y: 0 },
{ label: "2019/07/20", y: 0 },
{ label: "2019/07/21", y: 0 },
{ label: "2019/07/22", y: 0 },
{ label: "2019/07/23", y: 0 },
{ label: "2019/07/24", y: 0 },
{ label: "2019/07/25", y: 0 },
{ label: "2019/07/26", y: 0 },
{ label: "2019/07/27", y: 0 },
{ label: "2019/07/28", y: 11 },
{ label: "2019/07/29", y: 18 },
{ label: "2019/07/30", y: 21 },
{ label: "2019/07/31", y: 20 },
]
},
{
color: "red",
type: "spline",
showInLegend: true,
name: "Events",
dataPoints: [
{ label: "2019/07/05", y: 29 },
{ label: "2019/07/10", y: 29 },
{ label: "2019/07/13", y: 29 },
{ label: "2019/07/18", y: 29 },
{ label: "2019/07/20", y: 29 },
{ label: "2019/07/23", y: 29 }
]
},
]
});
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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.canvasjs.com/ga/canvasjs.min.js"></script>
<div id="chartContainer" style="height:300px; width: 100%;"></div>CanvasJS plots data based on the x-value. Passing x-value instead of label works in this case. Below is the updated code.
var chart = new CanvasJS.Chart("chartContainer", {
theme:"light2",
zoomEnabled: true,
animationEnabled: true,
title:{text: "Production"},
axisY:{title: "amount"},
axisX: {
labelFontSize: 10,
valueFormatString: "YYYY/MM/DD"
},
toolTip: {shared: "true"},
legend:{cursor:"pointer", itemclick : toggleDataSeries},
data: [{
type: "spline", //area
showInLegend: true,
axisYIndex: 0,
name: "P1",
dataPoints: [
{ x: new Date(2019, 06, 01), y: 10 },
{ x: new Date(2019, 06, 02), y: 12 },
{ x: new Date(2019, 06, 03), y: 18 },
{ x: new Date(2019, 06, 04), y: 5 },
{ x: new Date(2019, 06, 05), y: 9 },
{ x: new Date(2019, 06, 06), y: 12 },
{ x: new Date(2019, 06, 07), y: 10 },
{ x: new Date(2019, 06, 08), y: 10 },
{ x: new Date(2019, 06, 09), y: 12 },
{ x: new Date(2019, 06, 10), y: 7 },
{ x: new Date(2019, 06, 11), y: 2 },
{ x: new Date(2019, 06, 12), y: 3 },
{ x: new Date(2019, 06, 13), y: 4 },
{ x: new Date(2019, 06, 14), y: 5 },
{ x: new Date(2019, 06, 15), y: 6 },
{ x: new Date(2019, 06, 16), y: 0 },
{ x: new Date(2019, 06, 17), y: 0 },
{ x: new Date(2019, 06, 18), y: 0 },
{ x: new Date(2019, 06, 19), y: 0 },
{ x: new Date(2019, 06, 20), y: 0 },
{ x: new Date(2019, 06, 21), y: 0 },
{ x: new Date(2019, 06, 22), y: 0 },
{ x: new Date(2019, 06, 23), y: 0 },
{ x: new Date(2019, 06, 24), y: 0 },
{ x: new Date(2019, 06, 25), y: 0 },
{ x: new Date(2019, 06, 26), y: 0 },
{ x: new Date(2019, 06, 27), y: 0 },
{ x: new Date(2019, 06, 28), y: 11 },
{ x: new Date(2019, 06, 29), y: 18 },
{ x: new Date(2019, 06, 30), y: 21 },
{ x: new Date(2019, 06, 31), y: 20 },
]
}, {
color: "red",
type: "spline",
showInLegend: true,
name: "Events",
dataPoints: [
{ x: new Date(2019, 06, 05), y: 29 },
{ x: new Date(2019, 06, 10), y: 29 },
{ x: new Date(2019, 06, 13), y: 29 },
{ x: new Date(2019, 06, 18), y: 29 },
{ x: new Date(2019, 06, 20), y: 29 },
{ x: new Date(2019, 06, 23), y: 29 }
]
}]
});
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 src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>