1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    8
    Vote Rating
    0
    ultimate5289 is on a distinguished road

      0  

    Default Unanswered: Can we use chart on Ext.Panel ?

    Unanswered: Can we use chart on Ext.Panel ?


    Hi all, here is my code for the panel with the chart inside.
    Code:
    Ext.define('FPApp.view.PhanTich',{    extend: 'Ext.Panel',
        xtype:'phantich',
        config: {
            items:[
                {
                    xtype:'toolbar',
                    title:'Phan Tich',
                    items:[
                        {
                            xtype:'button',
                            iconMask:true,
                            iconCls:'reply',
                            id:'PTbackBtn'
                        }
                    ],
                    docked:'top'
                },
                {
                    xtype:'chart',
                    store: 'Chart',
                    animate:true,
                    theme:'Demo',
                    themCls:'line1',
                    legend: {
                        position: 'right'
                    },
                    axes: [
                        {
                            type: 'Numeric',
                            minimum: 0,
                            maximum: 10,
                            position: 'left',
                            fields: ['Expected','Actual'],
                            title: 'Triệu Đồng',
                            minorTickSteps: 1,
                            roundToDecimal: true,
                            decimals:1
                        },
                        {
                            type: 'Category',
                            position: 'bottom',
                            fields: ['Weeks'],
                            title: 'Tuần'
                        }
                    ],
                    series: [
                        {
                            type: 'line',
                            smooth: true,
                            axis: 'left',
                            xField: 'Weeks',
                            yField: 'Expected',
                            title: 'Chi phí kì vọng'
                        },
                        {
                            type: 'line',
                            axis: 'left',
                            smooth: true,
                            xField: 'Weeks',
                            yField: 'Actual',
                            title: 'Chi phí thật'
                        }
                    ]
    
    
                }
    
    
            ]
        }
    });
    I just want to use Ext.panel not Ext.chart.panel because I need to add other components like text fields to the items of panel. It doesn't work neither on chrome browser nor android device. I also included touch-charts.js and touch-charts.css from touch-chart-2.0-beta combine with sencha-touch-all.js and apple.css from Sencha Touch 2.0.1, But it didn't work. I just only see the legend of my chart in the panel nothing else. Could someone please help me about this.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Answers
    3491
    Vote Rating
    847
    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


    Sure you can use it in Ext.Panel, just make sure you set a size or use a layout on the panel.
    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.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    8
    Vote Rating
    0
    ultimate5289 is on a distinguished road

      0  

    Default


    Hi mitchellsimoens ,

    I try to use layout:'hbox' for the panel and here is the chart in my app.

    chart.jpg
    Which layout do I need for to render the chart correctly ?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Answers
    3491
    Vote Rating
    847
    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


    Since you only have one child of the panel then you could just use fit layout.
    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
    Jul 2011
    Posts
    8
    Vote Rating
    0
    ultimate5289 is on a distinguished road

      0  

    Default


    Yeah now I can see the axes of the chart, but the series don't show in the chart. Do I need include any other css file ( I already include touch-charts.css from Touch-Chart-beta package) for the theme
    "theme:'Demo',themCls:'line1'"

    series: [
    {
    type: 'line',
    smooth: true,
    axis: 'left',
    xField: 'Weeks',
    yField: 'Expected',
    title: 'Chi phí kì vọng'
    },
    {
    type: 'line',
    axis: 'left',
    smooth: true,
    xField: 'Weeks',
    yField: 'Actual',
    title: 'Chi phí thật'
    }
    ]

    Do I config the series wrong ?

Thread Participants: 1