Replacing Ext.chart.Panel with Ext.chart.Chart

[ChrisWalker]

Per one of the Previous threads asking about removing the toolbar, the reply was to use Ext.chart.Chart. When I changed it, I got an error in line 5685 of touch-charts-debug.js:

Uncaught TypeError: Property 'undefinedRender' of object [object Object] is not a function.

If I change it to Ext.chart.Panel, it works.

Here is the code that I am using:

var h = thisChartPanel.getHeight();
    var w = thisChartPanel.getWidth();
    thisChartPanel.add(new Ext.chart.Chart({
        id: 'chart',
        legend: {
            boxFill: '#aaa',
            position: 'bottom'
        },
        width: w,
        height:h,
        items: {
            cls: 'stock1',
            theme: 'Demo',
            legend: {
                position: {
                    portrait: 'right',
                    landscape: 'top'
                },
                labelFont: '17px Arial'
            },

            animate: false,
            store: store1,
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['data1', 'data2', 'data3'],
                title: 'CPU Percent',
                minorTickSteps: 1,
                label: {
                    fill: '#fff'
                },
                fill: '#fff',
                stroke: '#fff'
            }, {
                type: 'Time',
                position: 'bottom',
                fields: 'dt',
                dateFormat: 'g:i a',
                groupBy: 'year,month,day,hour,minute',
                aggregateOp: 'sum',
                label: {
                    fill: '#fff',
                    rotate: {
                        degrees: 45
                    }
                },
                fill: '#fff',
                stroke: '#fff',
                width: 0



            }],
            series: [{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'dt',
                yField: 'data1',
                title: 'My-PC',
                fill: false,
                showMarkers: false,
                style:
                {
                    stroke: '#ffffff',
                    'stroke-width': 2,
                    opacity: 1
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                smooth: false,
                xField: 'dt',
                yField: 'data2',
                title: 'RRT-001',
                showMarkers: false,
                style:
                {
                    stroke: '#00ff7f',
                    'stroke-width': 2,
                    opacity: 1
                }

            }, {
                type: 'line',
                style:
                {
                    stroke: '#ff3030',
                    'stroke-width': 2,
                    opacity: 1
                },
                title: 'Wyoming1',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                smooth: false,
                fill: false,
                xField: 'dt',
                yField: 'data3',
                showMarkers: false
            }]
        }
    })
    );

[jjohnston]

Well your config structure is now invalid... you're creating a Ext.chart.Chart and giving it an 'items' config, which is invalid. The contents of your 'items' object should be in the main chart config.

[ChrisWalker]

Thanks for the feedback, that makes sense. I did as you said and moved the item contents to the main config section. I am also using the new release candidate of touch charts now.
However I don't see the chart rendered after doing this. I do see the <canvas> tags on the document using Chrome's devloper tools but no chart. I tried doing a redraw() on the chart but that did not work as well.
I have included both the chartpanel configuration and the chart configuration here. The chartpanel will show the chart while the chart will not.
Any ideas?

// get the height of the titlebar in this panel
    var titlePanel = thisChartPanel.items.get(0);
    var h = thisChartPanel.getHeight() - titlePanel.getHeight();
    var w = thisChartPanel.getWidth();
    store_Chart1.loadDatastore_Chart1.fill(), false);

    var thisChart = new Ext.chart.Chart({
        width: w,
        height: h,
        animate: false,
        store: store_Chart1,
        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['data1', 'data2', 'data3'],
            title: 'CPU Percent',
            minorTickSteps: 1,
            label: {
                fill: '#fff'
            },
            fill: '#fff',
            stroke: '#fff'
        }, {
            type: 'Time',
            position: 'bottom',
            fields: 'dt',
            dateFormat: 'g:i a',
            groupBy: 'year,month,day,hour,minute',
            aggregateOp: 'sum',
            label: {
                fill: '#fff',
                rotate: {
                    degrees: 45
                }
            },
            fill: '#fff',
            stroke: '#fff',
            width: 0



        }],
        series: [{
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'dt',
            yField: 'data1',
            title: 'My-PC',
            fill: false,
            showMarkers: false,
            style:
                {
                    stroke: '#ffffff',
                    'stroke-width': 2,
                    opacity: 1
                }
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: false,
            xField: 'dt',
            yField: 'data2',
            title: 'RRT-001',
            showMarkers: false,
            style:
                {
                    stroke: '#00ff7f',
                    'stroke-width': 2,
                    opacity: 1
                }

        }, {
            type: 'line',
            style:
                {
                    stroke: '#ff3030',
                    'stroke-width': 2,
                    opacity: 1
                },
            title: 'Wyoming1',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: false,
            fill: false,
            xField: 'dt',
            yField: 'data3',
            showMarkers: false
        }]
    });

    var thisChart2 = new Ext.chart.Panel({
        id: 'chart',
        legend: {
            boxFill: '#aaa',
            position: 'bottom'
        },
        width: w,
        height: h,
        items: {
            cls: 'stock1',
            theme: 'Demo',
            legend: {
                position: {
                    portrait: 'right',
                    landscape: 'top'
                },
                labelFont: '17px Arial'
            },

            animate: false,
            store: store_Chart1,
            axes: [{
                type: 'Numeric',
                minimum: 0,
                position: 'left',
                fields: ['data1', 'data2', 'data3'],
                title: 'CPU Percent',
                minorTickSteps: 1,
                label: {
                    fill: '#fff'
                },
                fill: '#fff',
                stroke: '#fff'
            }, {
                type: 'Time',
                position: 'bottom',
                fields: 'dt',
                dateFormat: 'g:i a',
                groupBy: 'year,month,day,hour,minute',
                aggregateOp: 'sum',
                label: {
                    fill: '#fff',
                    rotate: {
                        degrees: 45
                    }
                },
                fill: '#fff',
                stroke: '#fff',
                width: 0



            }],
            series: [{
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                xField: 'dt',
                yField: 'data1',
                title: 'My-PC',
                fill: false,
                showMarkers: false,
                style:
                {
                    stroke: '#ffffff',
                    'stroke-width': 2,
                    opacity: 1
                }
            }, {
                type: 'line',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                smooth: false,
                xField: 'dt',
                yField: 'data2',
                title: 'RRT-001',
                showMarkers: false,
                style:
                {
                    stroke: '#00ff7f',
                    'stroke-width': 2,
                    opacity: 1
                }


            }, {
                type: 'line',
                style:
                {
                    stroke: '#ff3030',
                    'stroke-width': 2,
                    opacity: 1
                },
                title: 'Wyoming1',
                highlight: {
                    size: 7,
                    radius: 7
                },
                axis: 'left',
                smooth: false,
                fill: false,
                xField: 'dt',
                yField: 'data3',
                showMarkers: false
            }]
        }
    });


    thisChartPanel.add(thisChart2);  // will show the chart
   // thisChartPanel.add(thisChart);   // will not show the chart
    thisChartPanel.doLayout();

[ChrisWalker]

OK- I got it to show up. It turns out that I have to explicitly set the container panel's height and width and then add the ext.chart.chart. I stumbled into this while trying to place the ext.chart.panel mentioned before into a carousel. When I did this, I didn't see the chartpanel. I then set the Carousel's height and width and could then see the panel. I then decided to see if ext.chart.chart would show and it did. Somehow the container of the chart could not (or would not) use the implicitly set height and width and required me to set it. It makes sense if I did this without Sencha working directly with the DOM, I guess the internals of Sencha touch did not do this for me.

My Panel where I add the ext.chart.chart:

***********************************************/
/**              ChartPanel                   **/
/***********************************************/
App.views.ChartPanel = Ext.extend(Ext.Panel, {
    layout: { type: 'vbox', align: "stretch" },
    initComponent: function () {
        Ext.apply(this, {
            items:
            [
                { xtype: 'toolbar',
                    baseCls: 'chartToolBar x-toolbar-light',
                    items: [
                        { ui: 'back',
                          text: 'Data'
                        },
                        { xtype: 'spacer' },
                        { ui: 'forward',
                            text: 'Settings'
                        }
                    ]
                },
                {
                    xtype:'carousel',
                    indicator:false
                    
                }


            ]
        });
        App.views.ChartPanel.superclass.initComponent.apply(this, arguments);
    }
});


Ext.reg('chartpanel', App.views.ChartPanel);

Code to add the chart to the chartpanel:

var h = thisChartPanel.getHeight() - titlePanel.getHeight(); // the height of the carousel 
    var w = thisChartPanel.getWidth();
    chartInfo.store.loadData(chartInfo.store.fill(), false);

    thisChartPanelCarousel.setHeight(h); // If I do not do this, the chart (thisChart) will not show up
    thisChartPanelCarousel.setWidth(w);  // If I do not do this, the chart (thisChart) will not show up

    var thisChart = new Ext.chart.Chart({
        width: w,
        height: h,
        animate: false,
        store: chartInfo.store,
        axes: [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: ['data1', 'data2', 'data3'],
            title: 'CPU Percent',
            minorTickSteps: 1,
            label: {
                fill: '#fff'
            },
            fill: '#fff',
            stroke: '#fff'
        }, {
            type: 'Time',
            position: 'bottom',
            fields: 'dt',
            dateFormat: 'g:i a',
            groupBy: 'year,month,day,hour,minute',
            aggregateOp: 'sum',
            label: {
                fill: '#fff',
                rotate: {
                    degrees: 45
                }
            },
            fill: '#fff',
            stroke: '#fff',
            width: 0

        }],
        series: [{
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            xField: 'dt',
            yField: 'data1',
            title: 'My-PC',
            fill: false,
            showMarkers: false,
            style:
                {
                    stroke: '#ffffff',
                    'stroke-width': 2,
                    opacity: 1
                }
        }, {
            type: 'line',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: false,
            xField: 'dt',
            yField: 'data2',
            title: 'RRT-001',
            showMarkers: false,
            style:
                {
                    stroke: '#00ff7f',
                    'stroke-width': 2,
                    opacity: 1
                }


        }, {
            type: 'line',
            style:
                {
                    stroke: '#ff3030',
                    'stroke-width': 2,
                    opacity: 1
                },
            title: 'Wyoming1',
            highlight: {
                size: 7,
                radius: 7
            },
            axis: 'left',
            smooth: false,
            fill: false,
            xField: 'dt',
            yField: 'data3',
            showMarkers: false
        }]
    });

   thisChartPanelCarousel.add(thisChart);   thisChartPanelCarousel.doLayout();