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
    37,647
    Vote Rating
    899
    Answers
    3575
    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
    37,647
    Vote Rating
    899
    Answers
    3575
    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