Question

I am having trouble with extjs rendering the line chart below. Specifically, the last six values are null which are (correctly) not shown on the series line but (incorrectly) have a marker dot displayed for them (see top right of the image below).

I am pulling the graph data from a database as json:

// data store fields
Ext.define('Graphs', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'the_quota',     type: 'int'},
        {name: 'count_pt_year', type: 'int'},
        {name: 'date_string',   type: 'string'}
    ]
});

// get the graph data
var graphStore = Ext.create('Ext.data.Store', {
    model: 'Graphs',
    proxy: {
        type: 'ajax',
        url: 'sqlRequest.jsp?queryName=events_getGraph',
        timeout: 160000,
        reader: 'json'
    },
    autoLoad:false
});

If I change the query to return these null values as blanks instead ('') then the json reader converts them to zeros and the values display as zero along the bottom of the graph with a series line, which is worse then having the markers plastered to the ceiling without a series line.

I haven’t been able to find any config option in Ext.chart.Series to hide null values on the graph. Nor have I been able to find a config option in Ext.data.Store to return blanks as blanks and not “0”.

Looking for some other workaround.

Or has anyone resolved these issues from within the library itself (ext-all.js)?

Answer 1

There’s a config option under Ext.data.Field called useNull. If the data received cannot be parsed into a number, null will be used instead. As of right now I can’t recall if that alone will fix the problem, and I have a memory of once using a custom convert function that went something like this:

convert: function(value){
    if(typeof value !=== 'number') // or other similar conversion
        return undefined;
    return value;
}

If this doesn’t work, you may need to customize your store/reader to completely exclude records containing the undesirable null value.

EDIT – Using useNull looks like this: {name: 'someName', type: 'int', useNull: true}