5

I have problem rendering Line Chart in EXTJS 4. I have Viewport that contain accordion Layout. In that layout, I create 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, it is work. See this screenshot.

Render Line Chart EXTJS 4 correct!

But after I change this part of 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 load data from Server, it is 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 only get false rendering Line Chart with warning "Unexpected value NaN parsing x attribute.", "Unexpected value NaN parsing width attribute.", "Unexpected value matrix(NaN,0,NaN,1,NaN,0) parsing transform attribute." etc....

I have set axes with Numeric. I try everything include using Ext.data.Model, Ext.data.JsonStore, but still didn't work.

What is the difference?? What I am missing here? Anyone know why this thing happen? I am stuck for plenty of hours.

impropositum
  • 141
  • 2
  • 8
  • The only thing I can see is a typo error! You are missing 'name' from the store's field array! I tried to replicate your issue and I don't get an incomplete chart looks cool to me. – Abdel Raoof Olakara Oct 20 '11 at 20:36
  • Oh, yeah, It is typo. But I have already tried it with 'name' within store's field array. But both of them still didn't work. Maybe I'll try again this noon. – impropositum Oct 20 '11 at 21:00
  • Just want to clarify that in EXTJS, it seems we can't make chart within viewport. I can make same chart within new window with exactly same come. My problem domain still not solved yet, but I tried implement it with new way. – impropositum Mar 08 '12 at 03:36

1 Answers1

0

you forgot the other field "name"

fields: ['active'], => fields: ['active','name'],
Oniram
  • 156
  • 1
  • 3