Line Chart Not Connecting Dots (Sencha-Charts Package)

Question

I'm having issues with an extjs Cartesian chart component whereby it is failing to draw a line between two points. I've narrowed the issue down to missing interval-data for a step in a particular series but haven't found a good solution.

In the following - simplified - example, you will see a break in the red line where data exists for a marker on the blue line at interval "three" - which sits between two red markers. I'm trying to find a way to draw straight from the red marker at interval "two" to the marker at interval "four" in a scenario where only partial data exists for 1 or more steps across several series.

In my live application the data along the x-axis are actually dates so it is unreasonable to expect data at every interval for every series. I am also reluctant to fake points where no data exists as the markers have meaning and I'm doing other things with them on click-events.

Looking at the API my only line of investigation seem to be overloading the Series renderer function but as yet, I've not figured out what triggers the draw as the documentation is scarce at best.

I'd appreciate any pointers before I go picking apart the framework if someone's already gotten around this? Or - sanity check - have I missed some glaringly obvious configuration property?

» please fiddle

Ext.create('Ext.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    layout: 'fit',
    items: {
        xtype: 'cartesian',
        store: {
          fields: ['name', 'p1', 'p2'],
          data: [
              { name: 'one',   p1: 10, p2: 3  },
               { name: 'two',  p1: 7,  p2: 5  },
              { name: 'three', /*p1: 5,*/  p2: 10 },
              { name: 'four',  p1: 2,  p2: 8  },
              { name: 'five',  p1: 18, p2: 15 }
          ]
        },
        axes: [
            {
                type: 'numeric',
                position: 'left',
                fields: ['p1', 'p2'],
                minimum: 0
            }, 
            {
                type: 'category',
                position: 'bottom',
                fields: ['name']
            }
        ],
        series: [ 
            {
                type: 'line',
                style: {
                    lineWidth: 3
                },
                xField: 'name',
                yField: 'p1',
                marker: 'circle',
                colors: ['red']
            },
            {
                type: 'line',
                style: {
                    lineWidth: 3
                },
                xField: 'name',
                yField: 'p2',
                marker: 'circle',
                colors: ['blue']
            }
        ]
    }
});

Answer 1

The behavior you are after is, unfortunately, not configurable. However, there is always something that can be done about it. In this case you could implement a convert method for p1 field.

The logic would find previous and next valid data and then would calculate an interpolation from them so that the chart would be satisfied.