extjs chart doesn' t show up

Question

New on extjs chart.

I am having an extjs area chart, I got the store, model, ok, but the chart is not showing up at all, nothing, I have no idea where the problem is:

var store1 = Ext.create('Ext.data.Store', {
    fields: ['date', 'ged', 'watt', 'sicomor'],
    data: [{
            "date": 20-10-2014,
            "ged": 52,
            "watt": 21,
            "sicomor": 18
        }, {
            "date": 21 - 10 - 2014,
            "ged": 24,
            "watt": 62,
            "sicomor": 14
        }, {
            "date": 22-10-2014,
            "ged": 41,
            "watt": 69,
            "sicomor": 25
        }]
});


Ext.define("dashboard.view.HrsWorkedChart", {
    extend: "Ext.chart.Chart",
    alias: "widget.hrsworkedchart",

        style: 'background:#fff',
        animate: true,
        store: store1,

        legend: {
            position: 'right'
        },

        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['watt', 'ged', 'sicomor'],
            title: 'Nombre documents en retard',
            minorTickSteps: 1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb',
                    'stroke-width': 0.5
                }
            }
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['date'],
            title: 'Jours'
        }],

        series: [{
            type: 'area',
            axis: 'left',
            xField: 'name',
            yField: ['watt', 'ged', 'sicomor'],
        }]

});

Ext.application({
    name: 'AreaChart',
    launch: function () {
        Ext.Viewport.add({xtype: 'hrsworkedchart'})
    }
});

jsfiddle

Can you help me out.

Cheers a lot

Answer 1

you'd better define the view and data (maybe model as well) in separate files.

for your case:

//create a file under dashborad.store.HrsWorkedChart.js
Ext.define("dashboard.store.HrsWorkedChart", { //config options });

//create a file under dashboard.view.HrsWorkedChart.js
Ext.define("dashboard.view.HrsWorkedChart", { 
......
store: dashboard.store.HrsWorkedChart,
......
});

then you load your viewport as Guiherme said.

Answer 2

You must write all your code inside the launch method of your Ext.application to make sure that ExtJS is loaded and ready to be used. You should also create your Viewport, for this you could use the autoCreateViewport method or simply add an Ext.create to the end of your launch method.

This should work:

Ext.application({
    name: 'AreaChart',
    launch: function () {
        var store1 = Ext.create('Ext.data.Store', {
            fields: ['date', 'ged', 'watt', 'sicomor'],
            data: [{
                "date": 20-10-2014,
                "ged": 52,
                "watt": 21,
                "sicomor": 18
            }, {
                "date": 21 - 10 - 2014,
                "ged": 24,
                "watt": 62,
                "sicomor": 14
            }, {
                "date": 22-10-2014,
                "ged": 41,
                "watt": 69,
                "sicomor": 25
            }]
        });


        Ext.define("dashboard.view.HrsWorkedChart", {
            extend: "Ext.chart.Chart",
            alias: "widget.hrsworkedchart",

            style: 'background:#fff',
            animate: true,
            store: store1,

            legend: {
                position: 'right'
            },

            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['watt', 'ged', 'sicomor'],
                title: 'Nombre documents en retard',
                minorTickSteps: 1,
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['date'],
                title: 'Jours'
            }],

            series: [{
                type: 'area',
                axis: 'left',
                xField: 'name',
                yField: ['watt', 'ged', 'sicomor'],
            }]

        });

        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [{
                xtype: 'hrsworkedchart'
            }]
        });
    }
});