1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Vote Rating
    0
    06011990 is an unknown quantity at this point

      -1  

    Default Unanswered: Touch charts in carousel

    Unanswered: Touch charts in carousel


    I have tried to implement touch chart in carousel, but i am facing poblem with swiping the carousel,the charts added are all appearing in a single carousel while all the others remain blank.Is there any solution for the above problem

    I have attached the code below for the implementation

    can anyone help on this..


    App.views.ReportsForm = Ext.extend(Ext.Carousel, {
    fullscreen: true,


    initComponent: function() {
    var store1 = new Ext.data.JsonStore({
    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
    data: [
    {'name':'metric one', 'data1':10, 'data2':12, 'data3':14, 'data4':8, 'data5':13},
    {'name':'metric two', 'data1':7, 'data2':8, 'data3':16, 'data4':10, 'data5':3},
    {'name':'metric three', 'data1':5, 'data2':2, 'data3':14, 'data4':12, 'data5':7},
    {'name':'metric four', 'data1':2, 'data2':14, 'data3':6, 'data4':1, 'data5':23},
    {'name':'metric five', 'data1':27, 'data2':38, 'data3':36, 'data4':13, 'data5':33}
    ]
    });
    var charts1= new Ext.chart.Chart({
    renderTo: Ext.getBody(),
    id: 'chartarea',
    width: 500,
    height: 300,
    store: store1,
    axes: [{
    type: 'Numeric',
    grid: true,
    position: 'left',
    fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
    title: 'Sample Values',
    grid: {
    odd: {
    opacity: 1,
    fill: 'pink',
    stroke: 'black',
    'stroke-width': 3
    }
    },
    minimum: 0,
    adjustMinimumByMajorUnit: 0
    }, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Sample Metrics',
    grid: true,
    label: {
    rotate: {
    degrees: 315
    }
    }
    }],
    series: [{
    type: 'area',
    highlight: false,
    axis: 'left',
    xField: 'name',
    yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
    style: {
    opacity: 10
    }
    }]
    });
    var charts2= new Ext.chart.Chart({
    renderTo: Ext.getBody(),
    id: 'chartarea',
    width: 500,
    height: 300,
    store: store1,
    axes: [{
    type: 'Numeric',
    grid: true,
    position: 'left',
    fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
    title: 'Sample Values',
    grid: {
    odd: {
    opacity: 1,
    fill: 'pink',
    stroke: 'black',
    'stroke-width': 3
    }
    },
    minimum: 0,
    adjustMinimumByMajorUnit: 0
    }, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Sample Metrics',
    grid: true,
    label: {
    rotate: {
    degrees: 315
    }
    }
    }],
    series: [{
    type: 'area',
    highlight: false,
    axis: 'left',
    xField: 'name',
    yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
    style: {
    opacity: 10
    }
    }]
    });
    var charts3= new Ext.chart.Chart({
    renderTo: Ext.getBody(),
    id: 'chartarea',
    width: 500,
    height: 300,
    store: store1,
    axes: [{
    type: 'Numeric',
    grid: true,
    position: 'left',
    fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
    title: 'Sample Values',
    grid: {
    odd: {
    opacity: 1,
    fill: 'pink',
    stroke: 'black',
    'stroke-width': 3
    }
    },
    minimum: 0,
    adjustMinimumByMajorUnit: 0
    }, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Sample Metrics',
    grid: true,
    label: {
    rotate: {
    degrees: 315
    }
    }
    }],
    series: [{
    type: 'area',
    highlight: false,
    axis: 'left',
    xField: 'name',
    yField: ['data1', 'data2', 'data3', 'data4', 'data5'],
    style: {
    opacity: 10
    }
    }]
    });
    var panel1 = new Ext.Panel({
    layout: {
    type: 'vbox',
    align: 'stretch'
    },
    align : 'right',
    width : '100%',
    style : {
    padding : '10px 20px 0px 200px'
    },
    items : [charts1]
    });
    var panel2 = new Ext.Panel({
    layout: {
    type: 'vbox',
    align: 'stretch'
    },
    align : 'right',
    width : '100%',
    style : {
    padding : '10px 20px 0px 200px'
    },
    items : [charts2]
    });
    var panel3 = new Ext.Panel({
    layout: {
    type: 'vbox',
    align: 'stretch'
    },
    align : 'right',
    width : '100%',
    style : {
    padding : '10px 20px 0px 200px'
    },
    items : [charts3]
    });

    Ext.apply(this, {
    defaults: {
    layout: {
    type: 'vbox',
    align: 'stretch'
    }
    },
    items: [panel1,panel2,panel3]
    });
    App.views.ReportsForm.superclass.initComponent.call(this);
    }
    });
    Ext.reg('App.views.ReportsForm', App.views.ReportsForm);

    Advance thamhs..

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,672
    Answers
    3354
    Vote Rating
    747
    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

      -1  

    Default


    Don't use renderTo and make sure you need all that nesting of panels.
    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.

Thread Participants: 1

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