Geek Answers Handbook

Failed to display a line chart in EXTJS 4 if you are using Ext.data.Store with a proxy server

I have a problem rendering Line Chart in EXTJS 4. I have a Viewport that contains the layout of an accordion. In this layout, I create a very simple chart.

Here is my code:

var chartBox = Ext.create('Ext.chart.Chart', {
    width: 500,
    height: 300,
    style: 'background:#fff',
    animate: true,
    store: Ext.data.Store({
        fields: ['active'],
        data: [
            { 'name': 'Jan 2011',   'active': 10},
            { 'name': 'Feb 2011',   'active': 9},
            { 'name': 'Mar 2011',   'active': 13},
            { 'name': 'Apr 2011',   'active': 5},
            { 'name': 'Mei 2011',   'active': 17},
        ]
    }),
    theme: 'Category1',
    legend: {
        position: 'right'
    },
    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['active'],
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
        title: 'Total',
        grid: true,
        minimum: 0
    },{
        type: 'Category',
        position: 'bottom',
        fields: ['name'],
        title: 'Month and Year'
    }],
    series: [{
        type: 'line',
        highlight: {
            size: 7,
            radius: 7
        },
        axis: 'left',
        xField: 'name',
        yField: 'active',
        markerConfig: {
            type: 'cross',
            size: 4,
            radius: 4,
            'stroke-width': 0
        }
    }]
})

Then this is the job. See this screenshot.

Render Line Chart EXTJS 4 correct!

But after I changed this part of the code:

store: Ext.data.Store({
    fields: ['active'],
    data: [
        { 'name': 'Jan 2011',   'active': 10},
        { 'name': 'Jan 2011',   'active': 10},
        { 'name': 'Jan 2011',   'active': 10},
        { 'name': 'Jan 2011',   'active': 10},
        { 'name': 'Jan 2011',   'active': 10},
    ]
}),

with this:

store: Ext.data.Store({
    fields: ['active'],
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url : 'data/statexample_noroot.json',
        reader: {
            type: 'json'
        }
    }
}),

to download data from the server, this does not work. See this screenshot.

Rendering Line Chart EXTJS 4 failed!

This is the content from "statexample_noroot.json":

[
    { 'name': 'Jan 2011',   'active': 10},
    { 'name': 'Feb 2011',   'active': 9},
    { 'name': 'Mar 2011',   'active': 13},
    { 'name': 'Apr 2011',   'active': 5},
    { 'name': 'Mei 2011',   'active': 17},
]

I get a false line chart visualization with the warning "Unexpected value" attribute attribute xNNN "." Unexpected value of NaN parsing width attribute. "," Mask of unexpected value (NaN, 0, NaN, 1, NaN, 0)) convert the attribute "., Etc ....

Numeric. , Ext.data.Model, Ext.data.JsonStore, .

? ? - , ? .

+5
1

""

fields: ['active'], => fields: ['active','name'],
0

More articles:


All Articles