Line chart with gaps

[IlanCopelyn]

If a series contains undefined values then ext-js should render this as a gap in the line. There is a partially implemented feature - Ext.data.Field.useNull - which will render gaps at the start or end of a series, but not in the middle. See attached example - tested in ext-js 4.0.7 and 4.1.0-beta-2

[mitchellsimoens]

We will look into it. Thank you.

[Daniil]

Here is a related discussion.
http://www.sencha.com/forum/showthread.php?238541

[jonathan999]

has anyone found a workaround to make a line graph skip null values ?

[Daniil]

Unfortunately, I do not have any workaround.

Hope this possibility will appear in 4.2.

[ziavash]

I wrote a function which can be used as series renderer.
use undefined for null values.
here is how to get it to work:

function gapHandler(sprite, record, attributes, index, store, dataFieldName){
    // Converts path's LineTo to MoveTo on undefined values.
    var firstUndefinedIndex = new Array();
    var offset = new Array();
    var lastEmpty = new Array();
    if(typeof attributes["path"] == "object"){
        for(index1 in store["data"]["items"]){
            for(index2 in store["data"]["items"][index1]["data"]){
                if(index2 != dataFieldName) continue;
                if(typeof firstUndefinedIndex[index2] == 'undefined'){
                    firstUndefinedIndex[index2] = 0;
                    lastEmpty[index2] = "notEmpty";
                    offset[index2] = 1;
                }
                if(store["data"]["items"][index1]["data"][index2] == ""){
                    if(firstUndefinedIndex[index2] == 0) firstUndefinedIndex[index2] = index1;
                    if(lastEmpty[index2] != "") lastEmpty[index2] = "";
                }else {
                    if(firstUndefinedIndex[index2] > 0 && lastEmpty[index2] == ""){
                        attributes["path"].splice(offset[index2],0,"M");
                        firstUndefinedIndex[index2] = 0;
                        lastEmpty[index2] = "notEmpty";
                        offset[index2]= offset[index2] + 3;
                    }else offset[index2]+=2;
                }
            }
        }


        
    }
    return attributes;
}


var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2'],
    data: [
        { 'name': '1',   'data1': 10, 'data2': 12 },
        { 'name': '2',   'data1': 7,  'data2': 8 },
        { 'name': '3', 'data1': 5,  'data2': undefined },
        { 'name': '4',  'data1': undefined,  'data2': 14 },
        { 'name': '5',  'data1': undefined,  'data2': 4 },
        { 'name': '6',   'data1': 10, 'data2': 12 },
        { 'name': '7',   'data1': 7,  'data2': undefined },
        { 'name': '8', 'data1': undefined,  'data2': undefined },
        { 'name': '9',  'data1': 2,  'data2': undefined },
        { 'name': '10',  'data1': 4,  'data2': 10 }        
    ]
});


Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    store: store,
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields: ['data1', 'data2'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }
    ],
    series: [
        {
            type: 'line',
            renderer: function(sprite, record, attributes, index, store){
                return gapHandler(sprite, record, attributes, index, store, 'data1');
            },
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'name',
            yField: 'data1',
            markerConfig: {
                type: 'cross',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        },
        {
            type: 'line',
            renderer: function(sprite, record, attributes, index, store){
                return gapHandler(sprite, record, attributes, index, store, 'data2');
            },
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'name',
            yField: 'data2',
            markerConfig: {
                type: 'circle',
                size: 4,
                radius: 4,
                'stroke-width': 0
            }
        }
    ]
});

result will be something like this:

gaps.JPG

[Daniil]

Hi @ziavash,

Looks cool! Thank you for sharing!

[sidoron]

I found that if you put boolean false as the value of the data it will not render it and will create a gap in the chart
if you want a point with no data where you want your chart to continue you can put "" as the value:

                            if(innerRecord.data.value != ""){
                                if(innerRecord.data.value == -1){

//create a gap
                                    items[index][record.data.entityId] = false;
                                }
                                else {
                                    items[index][record.data.entityId] = innerRecord.data.value * 1.0;
                                }
                            }
                            else {
//just continue the chart
                                items[index][record.data.entityId] = "";
                            }

[ziavash]

So it looks like gap issue wasn't a bug after all.

[Daniil]

I found that if you put boolean false as the value of the data it will not render it and will create a gap in the chart
if you want a point with no data where you want your chart to continue you can put "" as the value:

                            if(innerRecord.data.value != ""){
                                if(innerRecord.data.value == -1){

//create a gap
                                    items[index][record.data.entityId] = false;
                                }
                                else {
                                    items[index][record.data.entityId] = innerRecord.data.value * 1.0;
                                }
                            }
                            else {
//just continue the chart
                                items[index][record.data.entityId] = "";
                            }

Hi @sidoron,

Well, it is a great finding! It appears to be working very well. Here is a simple example.

Example

<!DOCTYPE html>
<html>
<head>
    <title>LineSeries Gaps</title>

    <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />

    <script type="text/javascript" src="../ext-all-debug.js"></script>

    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create("Ext.chart.Chart", {
                renderTo: Ext.getBody(),
                height: 400,
                width: 400,
                axes: [{
                    position: "bottom",
                    title: "X",
                    fields: ["x"],
                    type: "Numeric"
                }, {
                    position: "left",
                    title: "Y",
                    fields: ["y"],
                    type: "Numeric"
                }],
                series: [{
                    title: "LineSeries",
                    xField: "x",
                    yField: "y",
                    type: "line"
                }],
                store: {
                    fields: [{
                        name: "x"
                    }, {
                        name: "y"
                    }],
                    autoLoad: true,
                    proxy: {
                        type: "memory",
                        data: [{
                            x: 0,
                            y: 0
                        }, {
                            x: 25,
                            y: 25
                        }, {
                            x: 50,
                            y: false
                        }, {
                            x: 75,
                            y: 75
                        }, {
                            x: 100,
                            y: 100
                        }]
                    }
                }
            });
        });
    </script>
</head>
<body>

</body>
</html>