You must be logged in to post your query.
Home › Forums › Chart Support › Displaying multiline chart with label with some data points have no data
Tagged: multilinechart labelonxaxis
I have multi line chart with labels on X axis. I have data in which some data points are missing. so when I plot data, its displaying at different position then it should be.
here i have code in which some labels on data-points are missing.
var chart = new CanvasJS.Chart("chartContainer", { title:{ text: "Multi-Series Line Chart" }, data: [ { type: "line", dataPoints: [ { y: 30, label: "label1" }, { y: 40, label: "label3" }, { y: 50, label: "label4" }, { y: 60, label: "label5" }, { y: 90, label: "label7" }, { y: 20, label: "label8" }, { y: 50, label: "label9"} ] }, { type: "line", dataPoints: [ { y: 10, label: "label1" }, { y: 20, label: "label2"}, { y: 30, label: "label3" }, { y: 40, label: "label4" }, { y: 50, label: "label5" }, { y: 60, label: "label6" }, { y: 70, label: "label7" }, { y: 80, label: "label8" }, { y: 90, label: "label9"} ] } ] });
@abhihd,
Chart doesn’t automatically group dataPoints by its label. When only label is given (without x-value), internally it assigns x values to dataPoints in an order. So, there can be different dataPoints with same x value but different label. You can pass x-value along with label to group them accordingly. Please find the updated datapoints below.
data: [ { type: "line", dataPoints: [ { x: 1, y: 30, label: "label1" }, { x: 3, y: 40, label: "label3" }, { x: 4, y: 50, label: "label4" }, { x: 5, y: 60, label: "label5" }, { x: 7, y: 90, label: "label7" }, { x: 8, y: 20, label: "label8" }, { x: 9, y: 50, label: "label9"} ] }, { type: "line", dataPoints: [ { x: 1, y: 10, label: "label1" }, { x: 2, y: 20, label: "label2"}, { x: 3, y: 30, label: "label3" }, { x: 4, y: 40, label: "label4" }, { x: 5, y: 50, label: "label5" }, { x: 6, y: 60, label: "label6" }, { x: 7, y: 70, label: "label7" }, { x: 8, y: 80, label: "label8" }, { x: 9, y: 90, label: "label9"} ] } ]
Please take a look at this JSFiddle for complete code.
@Vishwas R I have a very similar problem with the Multi-Series line chart. I want to keep the missing value the same as the previous one. That means I don’t want the blue line to go straight from label1 to label3, I want it to go like below.
label1
label3
I store the data only when they are changed in my system. So, label2 would look like same as label1 since there’s no data point that means it didn’t change.
label2
@maestrofc27,
You can loop through datapoints and add the missing datapoint before rendering the chart. Please find the code-snippet below.
for(i=0; i<chart.options.data.length; i++) { var dps = chart.options.data[i].dataPoints; for(var j = 1; j < dps.length; j++) { if(dps[j].x > (j+1)) dps.splice(j, 0, {x: j+1, y: dps[j-1].y}); } }
— Vishwas R Team CanvasJS
You must be logged in to reply to this topic. Login/Register