Chart in MVC view

[brokentwig]

I've created a view that extends the chart class. ext-all-debug throws all sorts of errors in Firebug. I'm hoping someone out there has got this to work and I'm just missing something. I basically just copied the example from Sencha and turned it into a view.

Ext.define('MyIpSys.view.content.IpCampusChartView' ,{
    extend: 'Ext.chart.Chart',
    alias : 'widget.ipcampuschartview',

    width: 800,
    height: 600,
    animate: true,
    store: 'IpCampusChartStore',
    theme: 'White',
    axes: [{
        type: 'Category',
        position: 'left',
        fields: ['campus_name'],
        title: 'Campus Name'
    },{
        type: 'Numeric',
        position: 'bottom',
        fields: ['network_count'],
        title: 'Number of Networks',
        label: {
            renderer: Ext.util.Format.numberRenderer('0,0')
        },
    }],
    //Add Bar series.
    series: [{
        type: 'bar',
        axis: 'bottom',
        xField: 'campus_name',
        yField: 'network_count',
        highlight: true,
        label: {
           display: 'insideEnd',
            field: 'network_count',
            renderer: Ext.util.Format.numberRenderer('0'),
            orientation: 'horizontal',
            color: '#333',
           'text-anchor': 'middle'
        }
    }],
    
    initComponent: function() {
    
        this.callParent(arguments);
    }
});

The error Firebug throws is :

me.label.renderer is not a function, and directs me to line 43123:

        for (i = 0; i < last; i++) {
            point = inflections[i];
            text = me.label.renderer(labels[i]);
            textLabel = me.getOrCreateLabel(i, text);
            bbox = textLabel._bbox;

I can change this line to:
text = String(labels[i]).match(/\d+\.\d{1,}/)?Ext.Number.toFixed(labels[i],1):labels[i];
and the loading moves on.

Then I just get a list of style errors. The first one I get is:

seriesStyle is undefined (line 47303)

if (!store || !store.getCount()) {             return; 
        } 
         
        delete seriesStyle.fill; 

        endSeriesStyle = Ext.apply(seriesStyle, this.style); 
        me.unHighlightItem(); 

        me.cleanHighlights();

If I comment this line out, the errors just continue. The errors seem to revolve around the seriesStyle, although no examples show me having to declare a default style. What could I be missing?

[brokentwig]

bump

[jratcliff]

Can you post a standalone example to debug? I just plugged this into an existing MVC application of mine and it worked fine. I did make a couple of changes:

1. I didn't have the "White" theme you have defined so I commented that out
2. In my Applications.js file I added 'Ext.chart.*' to the 'requires' array config
3. You didn't post what your IpCampusChartStore looked like so I had to create my own
4. In my controller file I added the IpCampusChartStore to the 'stores' array config

Here's what my store looked like:

Ext.define('MyIpSys.store.IpCampusChartStore', {

    extend : 'Ext.data.Store',
    fields : ['campus_name', 'network_count'],
    data   : [
        { campus_name: 'campus name 1', network_count: 10 },
        { campus_name: 'campus name 2', network_count: 22 },
        { campus_name: 'campus name 3', network_count: 33 },
        { campus_name: 'campus name 4', network_count: 44 },
        { campus_name: 'campus name 5', network_count: 21 },
        { campus_name: 'campus name 6', network_count: 55 },
        { campus_name: 'campus name 7', network_count: 34 },
        { campus_name: 'campus name 8', network_count: 15 },
        { campus_name: 'campus name 9', network_count: 59 }
    ]

});

So maybe you just need to do # 2 and add 'Ext.chart.*' to the requires config in your Applications.js file?

[brokentwig]

Thanks jratcliff, it was just the theme declaration. I was working off an example and I thought that theme was built in, or at least requiring theme.base and theme.Theme in app.js was handling it. I was already requiring the chart.* in app, and the store and controllers were good. Thanks for taking a look at it, sometimes you just need someone who knows what they are doing to put some eyes on your code.

[jratcliff]

Great! Glad to hear you got it working then.