EXTJs Chart not rendering data or graphics

Question

I have created a line chart with some mock data, pulled directly from the EXTJs samples. When I plug it into my application, it shows fine in the window, however, the data and all graphics do NOT display. Even more interesting, when i click on the save as image button (provided by the sample) I get the correctly displayed data, lines, and graphics just like in the sample. I also can see / log that the data is being generated. I'm stumped.

Get the data:

window.generateData = function(n, floor){
        var data = [],
            p = (Math.random() *  11) + 1,
            i;

        floor = (!floor && floor !== 0)? 20 : floor;

        for (i = 0; i < (n || 12); i++) {
            data.push({
                name: Ext.Date.monthNames[i % 12],
                data1: Math.floor(((Math.random() - 0.5) * 100), floor),
                data2: Math.floor(((Math.random() - 0.5) * 100), floor),
                data3: Math.floor(((Math.random() - 0.5) * 100), floor),
                data4: Math.floor(((Math.random() - 0.5) * 100), floor),
                data5: Math.floor(((Math.random() - 0.5) * 100), floor),
                data6: Math.floor(((Math.random() - 0.5) * 100), floor),
                data7: Math.floor(((Math.random() - 0.5) * 100), floor),
                data8: Math.floor(((Math.random() - 0.5) * 100), floor),
                data9: Math.floor(((Math.random() - 0.5) * 100), floor)
            });
        }
        return data;
    };

Create the Chart:

store1.loadData(generateData(8));

        var chart = Ext.create('Ext.chart.Chart', {
            xtype: 'chart',
            renderTo: Ext.getBody(),
            animate: true,
            width: 760,
            height: 480,
            store: store1,
            shadow: true,
            theme: 'Category1',
            legend: {
                position: 'right'
            },
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['data1', 'data2', 'data3'],
                title: 'Number of Parkers',
                minorTickSteps: 1,
                grid: {
                    odd: {
                        opacity: 1,
                        fill: '#ddd',
                        stroke: '#bbb',
                        'stroke-width': 0.5
                    }
                }
            }, {
                type: 'Category',
                position: 'bottom',
                fields: ['name'],
                title: 'Month of the Year'
            }],
            series: [{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'name',
                yField: 'data1',
                markerConfig: {
                    type: 'cross',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                smooth: true,
                xField: 'name',
                yField: 'data2',
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                smooth: true,
                fill: true,
                xField: 'name',
                yField: 'data3',
                markerConfig: {
                    type: 'circle',
                    size: 4,
                    radius: 4,
                    'stroke-width': 0
                }
            }]
        });

Than in my window component i simply add:

...
items: [{
                xtype: 'container',
            id: 'dashboard-content',
                margin: 50,
                layout: 'fit',
                renderTo: Ext.getBody(),
            items: chart

            }]
...

On save as image:

...
chart.save({
    type: 'image/png'
});
...

Everything is created, data is generated, chart displays and is drawn but without any lines or graphics. And again, if i do save as image, it downloads an image that displays everything correctly. Thanks in advance!

Answer 1

Turns out there was some CSS conflicts being loaded on my page that was causing NO graphics to render in the charts. As soon as i removed other CSS being loaded above ext, the charts rendered.

Answer 2

From the docs regarding renderTo:

Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items.

If you look at the charting examples you'll see the that only the outermost container (or window) is rendered.

Similarly, if you're specifying a "fit" layout on a container, specifying the size on the child component is mostly redundant.