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
    128
    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
    423
    Answers
    15
    Vote Rating
    14
    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
    128
    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
    128
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar