Kendo UI Dataviz: Comparing multiple line series (comparison line chart)

Question

I need visualize the deference in plan and actual progress like any simple comparison line chart.

I wrote (Dojo Demo):

var plan = [
    { depth: 00, day:  0 },
    { depth: 50, day:  4 },
    { depth: 45, day:  11},
    { depth: 55, day:  16},
];
var actual = [
    { depth: 00, day: 0 },
    { depth: 55, day: 7 },
    { depth: 50, day: 11},
    { depth: 50, day: 13},
];
function createChart() {
    $("#chart").kendoChart({
        title: {
            text: "Progress Comparision"
        },
        series: [{
            name:"Plan",
            type: "line",
            data:plan,
            field: "depth",
            categoryField: "day"
            },
            {
            name:"Actual",
            type: "line",
            data:actual,
            field: "depth",
            categoryField: "day"
        }],                      
        categoryAxis: {
            justified: true,
            categories: [0,5,10,15,20]
        }
    });
}

I got this:

But I expect something similar to this:

Any Idea?

Answer 1

The type of series should be scatterLine not line: (Final Demo)

var plan = [
  { depth: 00, day:  0 },
  { depth: 50, day:  4 },
  { depth: 45, day:  11},
  { depth: 55, day:  16},
];
  var actual = [
  { depth: 00, day: 0 },
  { depth: 55, day: 7 },
  { depth: 50, day: 11},
  { depth: 50, day: 13},
];
function createChart() {
  $("#chart").kendoChart({
    title: {
      text: "Progress Comparision"
    },
    series: [{
      name:"Plan",
      type: "scatterLine",
      data:plan,
      yField: "depth",
      xField: "day"
    },
             {
               name:"Actual",
               type: "scatterLine",
               data:actual,
               yField: "depth",
               xField: "day"
             }],                      
    xAxis: {
      justified: true,                            
      max: 20,
    }
  });
}