1. #1
    Sencha User
    Join Date
    Nov 2012
    Location
    Kolkata, India
    Posts
    6
    Vote Rating
    0
    abhijit.chanda is on a distinguished road

      0  

    Default Unanswered: How to add charts in a panel with tabular layout

    Unanswered: How to add charts in a panel with tabular layout


    Hi ,

    I was trying to add some charts in a panel. I have successfully made the layout, was trying to add the items in the charts. But some how i am unable to do so. My code snippet

    1. My Main Panel code

    Ext.onReady(function(){
    Ext.create('Ext.panel.Panel', {

    title: 'Report',
    renderTo: Ext.getBody(),
    frame: false,
    border: false,
    bodyPadding: 5,
    bodyStyle: 'background:transparent;',

    fieldDefaults: {
    labelAlign: 'left',
    msgTarget: 'side'
    },

    requires:[
    'RadarChart'
    ],

    layout: {
    type: 'table',
    columns: 10
    },

    items: [{

    width: Ext.getBody().getViewSize().width*0.5,
    height: Ext.getBody().getViewSize().height*0.3,
    html: 'Efficiency Trends',
    xtype: 'RadarChart',

    colspan : 5
    }, {
    width: Ext.getBody().getViewSize().width*0.3,
    height: Ext.getBody().getViewSize().height*0.3,
    html: 'Pie Chart',
    colspan: 3
    }, {
    width: Ext.getBody().getViewSize().width,
    height: Ext.getBody().getViewSize().height*0.4,
    html: 'Mixed Chart',
    colspan : 10
    }
    ]
    });
    });


    2. My RadarChart class is as follows

    Ext.define('RadarChart', {
    extend: 'Ext.chart.Chart',
    alias : 'widget.RadarChart',

    style: 'background:#fff',
    theme: 'Category2',
    insetPadding: 20,
    animate: true,
    store: store1,
    legend: {
    position: 'right'
    },
    axes: [{
    type: 'Radial',
    position: 'radial',
    label: {
    display: true
    }
    }],
    series: [{
    showInLegend: true,
    type: 'radar',
    xField: 'name',
    yField: 'field1',
    style: {
    opacity: 0.4
    }
    },{
    showInLegend: true,
    type: 'radar',
    xField: 'name',
    yField: 'field2',
    style: {
    opacity: 0.4
    }
    },{
    showInLegend: true,
    type: 'radar',
    xField: 'name',
    yField: 'field3',
    style: {
    opacity: 0.4
    }
    }]
    });


    Please suggest me where i am getting the thing wrong

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


    Should you be giving the items a size with height/width?
    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
    Nov 2012
    Location
    Kolkata, India
    Posts
    6
    Vote Rating
    0
    abhijit.chanda is on a distinguished road

      0  

    Default


    Thanks for the reply. Ayways I have solved the issue. It was an issue of data not properly initiated.

Thread Participants: 1

Tags for this Thread