Displaying multiline chart with label with some data points have no data

[AbhiHD]

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"}
    
      ]
    }
    ]
  });

• This topic was modified 3 years, 7 months ago by AbhiHD. Reason: spelling error

[Vishwas R]

@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.

[maestrofc27]

@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.

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.

[Vishwas R]

@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});
  }
}

Please take a look at this JSFiddle for complete code.

—
Vishwas R
Team CanvasJS