1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
    wouterv is on a distinguished road

      0  

    Default Unanswered: Chart not showing in touch mvc app

    Unanswered: Chart not showing in touch mvc app


    Hi,

    I'm trying to add a panel in a touch mvc application. I am not getting any errors, but no chart is showing, actually nothing besides the panel title is showing. The store I'm using works fine with another (list) panel in the same app. Any ideas what I'm doing wrong here?

    Code:
    Ext.define('EP.view.supplier.Chart', {
        extend:'Ext.chart.Panel',
        alias:'widget.supplierchart',
    
    
        config:{
            fullscreen:true,
            store:'Suppliers',
            //define the actual chart class.
            items:[{
                shadow:false,
                animate:true,
                //set padding for the top, bottom and left parts
                //of the chart.
                insetPadding:{
                    top:20,
                    bottom:20,
                    left:10
                },
                //configure the legend.
                legend:{
                    position:{
                        portrait:'bottom',
                        landscape:'left'
                    },
                    labelFont:'17px Helvetica, Arial, sans-serif'
                },
                //describe the actual pie series.
                series:[
                    {
                        type:'pie',
                        field:'spend',
                        //set as donut chart.
                        donut:25,
                        showInLegend:true,
                        highlight:false,
                        label:{
                            field:'name'
                        }
                    }
                ]
            }]
        }
    });
    and in my app.js
    Code:
    Ext.application({
        name:'EP',
    
    
        views:['main.Main', 'supplier.List', 'supplier.Edit', 'supplier.Chart'],
    
    
        controllers:['Main', 'Suppliers'],
    
    
        models:['Supplier'],
    
    
        stores:['Suppliers'],
    
    
        launch:function () {
            Ext.create("Ext.tab.Panel", {
                fullscreen:true,
                items:[
                    {
                        title:'Pie chart',
                        xtype:'supplierchart'
    
    
                    },
                    {
                        title:'Suppliers',
                        xtype:'supplierlist'
    
    
                    }
                ]
    
    
            });
        }
    });
    So the pie chart just shows an empty panel and the list nicely shows the list.

    No javascript errors are shown in the console..

    Thanks,
    Wouter

  2. #2
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Answers
    3
    Vote Rating
    0
    sape is on a distinguished road

      0  

    Default


    I have the exact same issue. Can anybody help us out?

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    47
    Answers
    3
    Vote Rating
    0
    sape is on a distinguished road

      0  

    Default


    I just found the solution

    When using the MVC stuff it seems you shouldn't use the Ext.chart.Panel. Instead I changed it to Ext.chart.Chart and added to the config the renderTo property to Ext.getBody().

    Code:
    Ext.define('EnergyConsumptionManager.view.RegistrationReportPanel', {
    	extend : 'Ext.chart.Chart',
    	xtype : 'registrationChartPanel',
    	id : 'registrationChartPanel',
    	
    	config : {
    		renderTo : Ext.getBody(),
            store: 'ReportingStore',
            animate: true,
            fullscreen : true,
            title : 'Reporting',
            autoSize : true,
            legend: {
                position: 'right'
            },
            axes: [
                {
                    type: 'Numeric',
                    minimum: 0,
                    maximum: 100,
                    position: 'left',
                    fields: ['energy', 'electricity'],
                    title: 'Consumption',
                    minorTickSteps: 1,
                    roundToDecimal: true,
                    decimals: 0
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['name'],
                    title: 'Month of the Year'
                }
            ],
            series: [
                {
                    type: 'line',
                    highlight: false,
                    fill: true,
                    smooth: true,
                    axis: 'left',
                    xField: 'name',
                    yField: 'energy',
                    title: 'Engergy'
                },
                {
                    type: 'line',
                    highlight: {
                        size: 7,
                        radius: 7
                    },
                    axis: 'left',
                    smooth: true,
                    xField: 'name',
                    yField: 'electricity',
                    title: 'Electricity'
                }
            ]
    	}
    });

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,065
    Answers
    3498
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You also shouldn't use renderTo
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    3
    Vote Rating
    0
    wouterv is on a distinguished road

      0  

    Default


    With your hints I got it working like this:

    Code:
    Ext.define('EP.view.supplier.Chart', {    extend:'Ext.chart.Chart',
        alias:'widget.supplierchart',
    
    
        config:{
            fullscreen:true,
            store:'Suppliers',
            series:[
                {
                    type:'pie',
                    field:'spend',
                    showInLegend:true,
                    highlight:false,
                    label:{
                        field:'name',
                        display:'rotate',
                        contrast:true,
                        font:'18px Arial'
                    }
                }
            ]
        }
    });
    When adding a legend with position left, the pie become extremely small and to the right however, looks like the legend eats up all the space.

    Wouter

Thread Participants: 2