Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    24
    Vote Rating
    0
    ratheeshrohini is on a distinguished road

      0  

    Default Unanswered: Six charts in a panel

    Unanswered: Six charts in a panel


    Hi,
    I want to display 6 charts in a panel(for i pad).Now I can display graphs horizontally or vertically using hbox or vbox.But I want to display four graph at a time(in 2x2 order).If more than 4 graph user should swipe for next ones....My two chart displaying code is shown below...can anyone tell me the step by step procedure to show four graph at a time?what are the changes that i should make in my following code?(please look at the code marked as red)

    Any help will be appreciated highly as a beginner?





    Ext.setup({
    tabletStartupScreen: 'tablet_startup.jpg',
    phoneStartupScreen: 'phone_startup.jpg',
    tabletIcon: 'icon-ipad.png',
    phoneIcon: 'icon-iphone.png',
    glossOnIcon: false,
    onReady: function () {
    alert("start");


    Ext.regModel("Panels", {
    fields: ['tle', 'ple', 's_type'],


    hasMany: {
    model: 'Order',
    name: 'orders'
    },


    proxy: {
    type: 'rest',
    url: 'resources/dailyreport1.json',
    reader: {
    type: 'json',
    root: 'panels'
    }
    }
    });


    Ext.regModel("Order", {
    fields: ['title', 'panel_title', 'sub_el_type'],
    belongsTo: ['Panels',
    {
    model: 'Xaxis',
    associationKey: 'x_axis'
    }],
    belongsTo: ['Panels',
    {
    model: 'Yaxis',
    associationKey: 'y_axis'
    }],
    hasMany: [{
    model: 'Plot',
    name: 'plot'
    }, {
    model: 'Slice',
    name: 'slice'
    }]


    });


    Ext.regModel("Xaxis", {
    fields: ['label', 'values'],


    hasMany: 'Order'
    });




    Ext.regModel("Yaxis", {
    fields: ['label', 'values'],


    hasMany: 'Order'
    });


    Ext.regModel("Plot", {
    fields: ['label', 'values'],


    belongsTo: 'Order'
    });


    Ext.regModel("Slice", {
    fields: ['label', 'value'],


    belongsTo: 'Order'
    });


    var store = new Ext.data.Store({
    autoLoad: true,
    model: "Panels"
    });


    var data = [],
    p = (Math.random() * 11) + 1,
    i;


    window.store1;
    var plt = new Array();
    var axis_x = new Array();
    var axis_y = new Array();
    var dataArray = new Array();
    var dataname = new Array();
    var count1 = 0;
    store.load({
    callback: function () {
    var user = store.first();


    //alert(user.get('tle'));




    user.orders().each(function (order) {
    // alert("pro details started..................................");
    var type = order.get('sub_el_type');
    // alert(order.get('title'));
    if (type == "cumulative_line_graph") {
    //alert("pro details");
    var count = 0;
    //alert(order.getYaxis().get('label'));
    order.plot().each(function (plot) {
    plt[count] = plot.get('values');
    count = count + 1;
    //
    // alert(plot.get('label'));
    //alert(plot.get('values'));
    });
    } else {
    order.slice().each(function (slice) {
    dataArray[count1] = slice.get('label');
    dataname[count1] = slice.get('value');
    count1 = count1 + 1;
    // alert(slice.get('label'));
    // alert(slice.get('value'));
    });
    }




    // alert("pro details completes...............................");
    });
    window.store1 = new Ext.data.JsonStore({
    fields: ['name', 'iphone', 'android', 'ipad'],
    data: generateData(5, 20)
    });


    window.store2 = new Ext.data.JsonStore({
    fields: ['name', '2007'],
    data: generateData1(5, 20)
    });




    showgraph();


    }
    });
    window.generateData = function (n, floor) {
    //alert("inside........generate.......data")
    var j = 0;




    var x = 0;
    floor = 10;
    var cm = 0;
    var cm1 = 0;
    var cm2 = 0;
    for (i = 0; i < plt[1].length; i++) {
    k = 0;


    cm = cm + plt[0][i][k + 1];
    cm1 = cm1 + plt[1][i][k + 1];
    cm2 = cm2 + plt[2][i][k + 1];
    // alert(plt[2][i][k]+" , "+cm2);
    x = x + 50;
    data.push({
    //name: Date.monthNames[i % 12],
    //name: Math.floor(Math.max((Math.random() * 100), floor)),
    name: plt[0][i][k],
    graph1: cm,
    graph2: plt[1][i][k],
    graph3: cm1,
    graph4: plt[2][i][k],
    graph5: cm2
    });
    }
    /* for (i = 0; i < plt[1].length; i++) {
    k=0;

    x=x+50;
    data.push({
    //name: Date.monthNames[i % 12],
    //name: Math.floor(Math.max((Math.random() * 100), floor)),
    graph2: plt[0][i][k],
    graph3: cm1

    });
    }*/
    return data;


    };












    window.generateData1 = function (n, floor) {
    var data1 = [],
    p = (Math.random() * 11) + 1,
    i;


    floor = (!floor && floor !== 0) ? 20 : floor;


    //var dataArray=['Untagged','SEU','Mobile','Google SEM','Phone'];
    // var dataname=['55','20','5','10','10',];
    //alert(dataArray);
    for (i = 0; i < dataArray.length; i++) {
    data1.push({
    name: dataArray[i],
    2007: dataname[i]
    });
    }




    return data1;
    };


















    var onRefreshTap = function () {
    window.store1.loadData(generateData(5, 20));
    };
    var onHelpTap = function () {
    new Ext.Panel({
    floating: true,
    modal: true,
    centered: true,
    width: 300,
    height: 250,
    styleHtmlContent: true,
    scroll: 'vertical',
    dockedItems: [{
    dock: 'top',
    xtype: 'toolbar',
    title: 'Line Chart'
    }],
    stopMaskTapEvent: false,
    fullscreen: false,
    html: "Tapping a data point will bring up detailed information about it"
    }).show('pop');
    };
    window.showgraph = function () {


    var PiePanel = new Ext.chart.Panel({
    // renderTo: Ext.getBody(),
    ...............................................................
    ...............................................................

    });






    //alert("haiiiiiiiiiiiiiiiiiii");
    var LineChartPanel = new Ext.chart.Panel({
    // renderTo: Ext.getBody(),
    .........................................................
    ........................................................

    });






    var Panel = new Ext.Panel({
    renderTo: Ext.getBody(),
    layout: 'hbox',
    width: 750,
    x: 0,
    y:0,
    dockedItems: {
    dock: 'top',
    xtype: 'toolbar',
    title: 'Daily Sales DashBoard',
    ui: 'dark',


    items: []
    },
    items: [LineChartPanel, PiePanel]
    });

    }


    }




    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,801
    Answers
    3467
    Vote Rating
    834
    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


    What you should do is use a Carousel and build the items array. You will need to use a mix of vbox and hbox to get the 2x2 grid, vbox for the 2 rows and each row will need to use hbox for the two columns. Each item of the carousel is the 2x2 grid component.
    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
    Feb 2012
    Posts
    24
    Vote Rating
    0
    ratheeshrohini is on a distinguished road

      0  

    Default


    Can u show me an example code

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,801
    Answers
    3467
    Vote Rating
    834
    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


    Quote Originally Posted by ratheeshrohini View Post
    Can u show me an example code
    Have you tried figuring it out?
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi