Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Answers
    5
    Vote Rating
    0
    ChrisWalker is on a distinguished road

      0  

    Default Unanswered: Replacing Ext.chart.Panel with Ext.chart.Chart

    Unanswered: Replacing Ext.chart.Panel with Ext.chart.Chart


    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:


    Code:
    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
                }]
            }
        })
        );

  2. #2
    Sencha - Architect Dev Team jjohnston's Avatar
    Join Date
    Sep 2010
    Posts
    512
    Answers
    21
    Vote Rating
    17
    jjohnston will become famous soon enough jjohnston will become famous soon enough

      0  

    Default


    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.

  3. #3
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Answers
    5
    Vote Rating
    0
    ChrisWalker is on a distinguished road

      0  

    Default


    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?

    Code:
    // 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();
    

  4. #4
    Touch Premium Member
    Join Date
    Apr 2011
    Location
    Cary, NC
    Posts
    135
    Answers
    5
    Vote Rating
    0
    ChrisWalker is on a distinguished road

      0  

    Default


    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:

    Code:
    ***********************************************/
    /**              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:

    Code:
    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();
    

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."