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

      0  

    Default


    Hi nag, thank u for ur quick reply.I tried the above mentioned method.But still the panel header is there as in attachment.I think the toolbar title appears below the panel header.(i am not sure whether it is panel header or not).can u help me.
    Attached Images

  2. #12
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Vote Rating
    5
    Answers
    6
    Naga is on a distinguished road

      0  

    Default


    Better you try this code for pie chart,


    First you create one panel and call pie chart in that panel


    Code:
    var Panel = new Ext.Panel( {
            layout: {
                type: 'fit',
                align: 'top'
            },
            defaults: {
                flex: 1,
                cls: 'card1',
                layout: 'fit'
            },
            dockedItems: {
                dock: 'top',
                xtype: 'toolbar',
                layout: 'vbox',
                ui: 'light',
                title: 'Pie chart',
                items: [],
            },
            items: [pieChart]
    
    
        });
    If you want to cahnge the background of your title you can change in touch-charts-full.css by searching for toolbar-light.

    you use Ext.chart.Chart instead of Ext.chart.panel hope this will sove your problem.


    again don't mention renderTo in this chart.Chart it's working fine for me

    Code:
    var pieChart = new Ext.chart.Chart({
    cls: 'pie1',
    theme: 'Demo',
    store: store2,
    shadow: false,
    animate: true,
    insetPadding: 20,
    legend: {
    position: {
    portrait: 'bottom',
    landscape: 'left'
    }
    },/*
    interactions: [{
    type: 'reset',
    confirm: true
    },
    {
    type: 'rotate'
    },
    {
    type: 'iteminfo',
    gesture: 'taphold',
    listeners: {
    show: function(interaction, item, panel) {
    var storeItem = item.storeItem;
    panel.update(['<ul><li><b>Month: </b>' + storeItem.get('name') + '</li>', '<li><b>Value: </b> ' + storeItem.get('2007') + '</li></ul>'].join(''));
    }
    }
    },
    {
    type: 'piegrouping',
    //snapWhileDragging: true,
    onSelectionChange: function(me, items) {
    if (items.length) {
    var sum = 0,
    i = items.length;
    while(i--) {
    sum += items[i].storeItem.get('2007');
    }
    chartPanel.descriptionPanel.setTitle('Total: ' + sum);
    chartPanel.headerPanel.setActiveItem(1, {
    type: 'slide',
    direction: 'left'
    });
    }
    else {
    chartPanel.headerPanel.setActiveItem(0, {
    type: 'slide',
    direction: 'right'
    });
    }
    }
    }],*/
    
    interactions: [{
    type: 'itemhighlight',
    gesture:'tap',
    onGesture : function() { 
    window.location = 'big_pie_chart.html';
    }
    }
    ],
    
    
    series: [{
    type: 'pie',
    field: '2007',
    showInLegend: true,
    highlight: false,
    listeners: {
    'labelOverflow': function(label, item) {
    item.useCallout = true;
    }
    },
    // Example to return as soon as styling arrives for callouts
    callouts: {
    renderer: function(callout, storeItem) {
    callout.label.setAttributes({
    text: storeItem.get('name')
    }, true);
    },
    filter: function() {
    return false;
    },
    box: {
    //no config here.
    },
    lines: {
    'stroke-width': 2,
    offsetFromViz: 20
    },
    label: {
    font: 'italic 14px Arial'
    },
    styles: {
    font: '14px Arial'
    }
    },
    label: {
    field: 'name'
    }
    }]
    }
    });
                    });

  3. #13
    Sencha User
    Join Date
    Feb 2012
    Posts
    24
    Vote Rating
    0
    ratheeshrohini is on a distinguished road

      0  

    Default


    Hi,
    Unfortunately this is not loading chart in my case...Is there any .js file to be included for this .My chart.html file contains following code?
    Also , I think some braces are more in ur code .I corrected it and checked.Then panel title is loading, but not pie chart



    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="resources/css/touch-charts-full.css" type="text/css">


    <title>Demoooooo</title>
    <style type="text/css">

    </style>
    <script type="text/javascript" src="sencha-touch.js"></script>
    <script type="text/javascript" src="touch-charts.js"></script>
    <script type="text/javascript" src="src/big_pie_chart.js"></script>
    </head>
    <body bgcolor="#000">

    </body>
    </html>

  4. #14
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Vote Rating
    5
    Answers
    6
    Naga is on a distinguished road

      0  

    Default


    Hai,

    what's the error displaying in your console?

    Regards,
    Nag.

  5. #15
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Vote Rating
    5
    Answers
    6
    Naga is on a distinguished road

      0  

    Default


    hai Rohini,

    I think you have to include sencha-touch.css also in your chart.html file.

    Regards,
    Nag.

  6. #16
    Sencha User
    Join Date
    Feb 2012
    Posts
    24
    Vote Rating
    0
    ratheeshrohini is on a distinguished road

      0  

    Default


    Hi Nag ,

    Now can u help me to know how to parse a json file to draw a line chart.My json file containig following code.Pls reply as soon as possible.

    {
    "version": 1,
    "report_type": "dashboard",
    "title": "Daily Sales Report",
    "sub_title": "",
    "run_datetime": "February 2, 2012 22:13:00",
    "panels": [
    {
    "title": "Daily Order Volume",
    "sub_title": "",
    "panel_type": "cumulative_line_graph",
    "x_axis": {
    "label": "Hour",
    "values": [
    0,
    1,
    2,
    3,
    4,
    5,
    6,
    7,
    8,
    9,
    10,
    11,
    12,
    13,
    14,
    15,
    16,
    18,
    19,
    20,
    21,
    22,
    23,
    24
    ]
    },
    "y_axis": {
    "label": "Order Totals in (100's)",
    "values": [
    0,
    500,
    1000,
    1500,
    2000,
    2500
    ]
    },
    "plot": [
    {
    "label": "Projected Orders",
    "values": [
    [
    1,
    2000
    ],
    [
    2,
    0
    ],
    [
    3,
    0
    ],
    [
    4,
    0
    ],
    [
    5,
    0
    ],
    [
    6,
    0
    ],
    [
    7,
    0
    ],
    [
    8,
    0
    ],
    [
    9,
    0
    ],
    [
    10,
    0
    ],
    [
    11,
    0
    ],
    [
    12,
    0
    ],
    [
    13,
    0
    ],
    [
    14,
    0
    ],
    [
    15,
    0
    ],
    [
    16,
    0
    ],
    [
    17,
    0
    ],
    [
    18,
    0
    ],
    [
    19,
    0
    ],
    [
    20,
    0
    ],
    [
    21,
    0
    ],
    [
    22,
    0
    ],
    [
    23,
    0
    ],
    [
    24,
    0
    ]
    ]
    },
    {
    "label": "Cumulative Orders for the day by hour",
    "values": [
    [
    1,
    30
    ],
    [
    2,
    30
    ],
    [
    3,
    40
    ],
    [
    4,
    25
    ],
    [
    5,
    25
    ],
    [
    6,
    50
    ],
    [
    7,
    75
    ],
    [
    8,
    60
    ],
    [
    9,
    75
    ],
    [
    10,
    85
    ],
    [
    11,
    90
    ],
    [
    12,
    125
    ],
    [
    13,
    110
    ],
    [
    14,
    125
    ],
    [
    15,
    50
    ],
    [
    16,
    50
    ],
    [
    17,
    50
    ],
    [
    18,
    60
    ],
    [
    19,
    60
    ],
    [
    20,
    55
    ],
    [
    21,
    40
    ],
    [
    22,
    25
    ]
    ]
    },
    {
    "label": "Cumulative Orders for the same day last year",
    "values": [
    [
    1,
    25
    ],
    [
    2,
    25
    ],
    [
    3,
    40
    ],
    [
    4,
    20
    ],
    [
    5,
    20
    ],
    [
    6,
    60
    ],
    [
    7,
    85
    ],
    [
    8,
    80
    ],
    [
    9,
    80
    ],
    [
    10,
    95
    ],
    [
    11,
    135
    ],
    [
    12,
    110
    ],
    [
    13,
    100
    ],
    [
    14,
    120
    ],
    [
    15,
    50
    ],
    [
    16,
    50
    ],
    [
    17,
    50
    ],
    [
    18,
    60
    ],
    [
    19,
    55
    ],
    [
    20,
    30
    ],
    [
    21,
    20
    ],
    [
    22,
    15
    ],
    [
    23,
    10
    ],
    [
    24,
    5
    ]
    ]
    }
    ]
    },
    {
    "title": "Revenue Split by Channel",
    "panel_type": "pie",
    "value": "650376",
    "format": "currency",
    "slice": [
    {
    "label": "Google SEM",
    "value": 24
    },
    {
    "label": "SEO",
    "value": 20
    },
    {
    "label": "Mobile",
    "value": 5
    },
    {
    "label": "Phone",
    "value": 10
    },
    {
    "label": "Untagged",
    "value": 10
    },
    {
    "label": "Affiliates",
    "value": 8
    },
    {
    "label": "Amazon",
    "value": 9
    },
    {
    "label": "email",
    "value": 14
    }
    ]
    }
    ]
    }

  7. #17
    Sencha User
    Join Date
    Dec 2011
    Location
    Hyderabad, India
    Posts
    117
    Vote Rating
    5
    Answers
    6
    Naga is on a distinguished road

      0  

    Default


    hai rohini,

    sorry am not familiar with Ext.js. Till now i didn't work using Ext js.

  8. #18
    Sencha User
    Join Date
    Feb 2012
    Posts
    24
    Vote Rating
    0
    ratheeshrohini is on a distinguished road

      0  

    Default


    hi
    I have a line chart drawn using parsed values from a json. On taping the cchart i need a bigger view of the same chart.to go to big view i wrote the following code

    onGesture : function() {
    alert("inside gesture.............................");
    alert(dataArray.length);
    window.location = 'big_pie_chart.html';
    }

    this will redirect to big_pie_chart.html. but i need to pass array to the big_pie_chart.js.......How it is possible?Can any one show me the code for this?

Thread Participants: 2