2

I'm having issues with an 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.

enter image description here

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']
            }
        ]
    }
});
Emissary
  • 9,954
  • 8
  • 54
  • 65
  • I've played around with line charts before, and they are painful to work with at best. As far as I know, what you're trying to do is not directly supported. It simply draws at the xValue (three) and the yValue (none). Since there is no yValue, it isn't drawn. You could try overloading, but my solution when I tried to do something more custom was to draw directly onto the surface and ensure you manage the resizing of the window. – Monica Olejniczak Feb 02 '15 at 13:08
  • This is going to be supported in Ext 6.0.2 and up. Possibly backported to 5. There will be a config for this with 3 options for rendering null data points: gap,connect and y-origin (which is often zero). At the moment null data points are rendered as gaps. – Vitaly Nov 12 '15 at 20:00

1 Answers1

0

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.

Saki
  • 5,827
  • 2
  • 15
  • 15
  • Yeah, I was looking to avoid this option but alas it will have to suffice. On the plus side I got a response from Sencha Support and it's been added as a feature request for a future release (issue number EXTJS-16706 for anyone with access to such things). – Emissary Feb 04 '15 at 17:05