1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    warreninbjcn is on a distinguished road

      0  

    Default Answered: How can I hide null value in a Line chart?

    Answered: How can I hide null value in a Line chart?


    Can anyone please help me on this?

    A am expecting to get a line chart (together with a stacked column chart) that accepts null values but ignores them while drawing them (neither zero nor other random values, just display nothing with null values), but what I get is shown as below. I am expecting the line chart shall have only Jan to Mar data points, since Apr and May are null.

    nullableLineChart.png
    I am doing this with following codes, as you can see I am using "connectDiscontinuousPoints" (both true and false) style, but didn't work.

    Code:
    var store = Ext.create('Ext.data.JsonStore', {
        fields: ['t', 'd1', 'd2', 'd3'],
        data: [
            { 't': 'Jan-12', 'd1': 1, 'd2': 5, 'd3': 10 }
            , { 't': 'Feb-12', 'd1': 2, 'd2': 4, 'd3': 12 }
            , { 't': 'Mar-12', 'd1': 3, 'd2': 3, 'd3': 13 }
            , { 't': 'Apr-12', 'd1': 4, 'd2': 2, 'd3': null }
            , { 't': 'May-12', 'd1': 5, 'd2': 1, 'd3': null }
        ]
    });
    
    
    Ext.application({
        name: 'HelloExt',
        launch: function () {
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                theme: 'Base',
                items: [
                    {
                        xtype: 'chart'
                        , store: store
                        , axes: [
                            {
                                type: 'Numeric'
                                , position: 'left'
                                , fields: ['d1', 'd2', 'd3']
                                , title: 'Values'
                                , minimum: 0
                            }
                            , {
                                type: 'Category'
                                , position: 'bottom'
                                , fields: ['t']
                                , title: 'time'
                            }
                        ]
                        , series: [
                            {
                                type: 'column'
                                , axis: 'left'
                                , stacked: true                            
                                , xField: 't'
                                , yField: ['d1', 'd2']
                            }
                            , {
                                type: 'line'
                                , axis: 'left'
                                , xField: 't'
                                , yField: 'd3'
                                , style: {
                                    connectDiscontinuousPoints: false
                                }
                            }
                        ]
                    }
                ]
            });
        }
    });

  2. Try using undefined:

    Code:
       , { 't': 'Apr-12', 'd1': 4, 'd2': 2, 'd3': undefined }
       , { 't': 'May-12', 'd1': 5, 'd2': 1, 'd3': undefined }
    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Try using undefined:

    Code:
       , { 't': 'Apr-12', 'd1': 4, 'd2': 2, 'd3': undefined }
       , { 't': 'May-12', 'd1': 5, 'd2': 1, 'd3': undefined }
    Scott.

  4. #3
    Sencha Premium Member
    Join Date
    Sep 2012
    Posts
    1
    Vote Rating
    0
    imcvay is on a distinguished road

      0  

    Default This doesn't work

    This doesn't work


    The store still has null values and these get plotted off the top of the chart

Thread Participants: 2

Tags for this Thread