You found a bug! We've classified it as EXTJS-5302 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    29
    Vote Rating
    0
    IlanCopelyn is on a distinguished road

      0  

    Default Line chart with gaps

    Line chart with gaps


    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
    Attached Files

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,784
    Vote Rating
    833
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    We will look into it. Thank you.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    11
    Vote Rating
    0
    jonathan999 is on a distinguished road

      0  

    Default null values in graph

    null values in graph


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

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Unfortunately, I do not have any workaround.

    Hope this possibility will appear in 4.2.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  6. #6
    Sencha User
    Join Date
    Dec 2012
    Posts
    4
    Vote Rating
    4
    ziavash is on a distinguished road

      2  

    Default


    I wrote a function which can be used as series renderer.
    use undefined for null values.
    here is how to get it to work:
    Code:
    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:

  7. #7
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    Hi @ziavash,

    Looks cool! Thank you for sharing!
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  8. #8
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    9
    Vote Rating
    2
    sidoron is on a distinguished road

      2  

    Default


    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:

    Code:
                                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] = "";
                                }

  9. #9
    Sencha User
    Join Date
    Dec 2012
    Posts
    4
    Vote Rating
    4
    ziavash is on a distinguished road

      0  

    Default


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

  10. #10
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    110
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      1  

    Default


    Quote Originally Posted by sidoron View Post
    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:

    Code:
                                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
    Code:
    <!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>
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi