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

      0  

    Default Answered: Null values in Chart

    Answered: Null values in Chart


    I have problem with null values in store which I give to the chart. I want to break series when the value is null and continue line when values come back to numbers. I did it in extJs3.DataPoint:

    Code:
        Ext.define('DataPoint', {
            extend: 'Ext.data.Model',
            fields: [
                    {name: 'time', type: 'date', dateFormat: 'Y-m-d H:i'}, 
                    {name: 'val',mapping:'value', type: 'float', useNull:true, convert: function(v, record){ if(v == null){return undefined}return parseInt(v)}}, ],
            idProperty: 'time',
            persistenceProperty: 'data'
        });

    Store:


    Code:
        store = Ext.create('Ext.data.Store', {
            model: 'DataPoint',
            proxy:{
                type: 'ajax',
                url: linePanel.url,
                reader: {
                    type: 'json',
                    root: 'data'
                }
            },
            sorters: [{ 
                property: 'time'
            }],
            format: 'json',
            idProperty: 'time',
            root: 'data'
        });

    Chart:


    Code:
        Ext.create('Ext.chart.Chart', {
            renderTo: linePanel.columnChart.body.dom,
             store: store,
            axes: [
               {
                   type: 'Category',
                   position: 'bottom',
                   fields: ['time'],
               },
               {
                   title: linePanel.unit,
                   type: 'Numeric',
                   position: 'left',
                   minimum: 0,
                   maximum: 100,
                   majorTickSteps: 1
    
               }
           ],
             series: [
                { xField: 'time', 
                    yField: 'val', 
                    type: 'line',
                    highlight : true,
                    smooth: true,
                    style: {
                        stroke: '#00b300',
                        'stroke-width': 5,
                        color: '#00b300',
                    },
                    markerConfig: {
                        type: 'circle',
                        stroke: '#00b300',
                        color: '#00b300'
                    }
    
                }
             ]
       });




  2. Have a look at the following: (uses false)
    http://jsfiddle.net/tqdJ8/

    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,984
    Answers
    662
    Vote Rating
    455
    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


    Have a look at the following: (uses false)
    http://jsfiddle.net/tqdJ8/

    Scott.

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

      0  

    Default


    Works great, thanks!

Thread Participants: 1

Tags for this Thread