Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    14
    Vote Rating
    0
    blacksword888 is on a distinguished road

      0  

    Post Unanswered: Hide ext.chart.Toolbar from ext.chart.Panel

    Unanswered: Hide ext.chart.Toolbar from ext.chart.Panel


    Good morning,<br><br>I'm creating an application for Ipad and i'm using ext.chart.Panel to display some statistics.<br>is there anyway to hide or disable the toolbar automatically generated in ext.chart.Panel ?&nbsp;<br><br>here is the code i'm using<br>
    Code:
    var chart1 = new Ext.chart.Panel({            
                style:'background-color:#F00',
                width: '50%',
                height:'100%',
                flex: 1,
                items:
                {
                    cls: 'pie1',
                    theme: 'Demo',
                    store: store1,
                    shadow: false,
                    animate: true,
                    series: [{
                        type: 'pie',
                        field: 'data1',
                      //  showInLegend: true,
                       // highlight: true,
                        label: {
                            field: 'name'
                        }
                    }]
                }
            });
    
    
    var panelHaut =  new Ext.Panel({
        width :'100%',
        height :'100%',
        flex :1,
        layout :'hbox',
        items:[chart1]
            });
    i tried this code but the chart is not rendering
    Code:
    var chart1 = new Ext.chart.Chart({
            width: '200',
            height: '200',
            animate: false,
            store: store1,
        series: [{
            type: 'pie',
            field: 'data1',
            label: {
                field: 'name'
            }
        }]
        });
    Could anyone help me ?

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    ayee879 is on a distinguished road

      0  

    Default


    Why does your panel have height: 100% and width: 100% when you can do fullscreen: true?

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    17
    Vote Rating
    0
    deepak.sakpal is on a distinguished road

      0  

    Default


    Hey, did you got any solution for this?

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    ayee879 is on a distinguished road

      0  

    Default


    Oh, I think you have to use the fit layout for the panel holding the chart

  5. #5
    Sencha User
    Join Date
    May 2010
    Posts
    17
    Vote Rating
    0
    deepak.sakpal is on a distinguished road

      0  

    Default


    Using fit layout will hide the title bar? I'm also looking for a solution for hiding the chart panel's default title bar/tool bar.

  6. #6
    Sencha Premium Member
    Join Date
    Sep 2011
    Posts
    8
    Vote Rating
    0
    ayee879 is on a distinguished road

      0  

    Default


    Sorry, I meant that you can't use Ext.chart.Panel. You'll have to make a Ext.Panel with a fit layout and as one of its items have it be a Ext.chart.Chart

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Location
    Los Angeles, CA
    Posts
    19
    Vote Rating
    0
    eyalfx is on a distinguished road

      0  

    Default


    Did you find any solution for it? Having the same problem here too.

  8. #8
    Sencha User
    Join Date
    Oct 2011
    Posts
    26
    Vote Rating
    1
    hundare is on a distinguished road

      0  

    Default


    Looking for the solution? Did anyone find it? I dont want my chart to take the fullscreen. I want to place the chart inside the panel. Giving height and width to Ext.chart.Chart does not work - the chart is not displayed inside the panel unless made fullscreen:true..please share the solution if anyone finds it.

    Thanks

  9. #9
    Sencha Premium Member
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    pannonij is on a distinguished road

      0  

    Default hidden title bar touch charts

    hidden title bar touch charts


    I used a combination of css a javascript to remove the titlebar. I'm sure there is a better way as there still is a 0.1em title bar in generated code. To take it further maybe pass a blank dockedItem to constructor or remove it from render.

    Code:
    .x-panel-body {
    	background-color:#FFF !important	
    }
    .x-toolbar {
    	background-color:#FFF !important	
    }
    Code:
     
    Ext.chart.Panel = Ext.extend(Ext.Panel, {
        defaultType: "chart",
        layout: "fit",
        constructor: function (a) {
            a.dockedItems = {
                xtype: "panel",
                height: "0.1em",
                dock: "top",
                layout: {
                    type: "card",
                    align: "stretch"
                },
                activeItem: 0,
    //            dockedItems: {
    //                dock: "right",
    //                xtype: "toolbar",
    //                ui: "light",
    //                items: a.dockedItems
    //            },
    //            items: [{
    //                    dock: "top",
    //                    xtype: "toolbar",
    //                    ui: "light",
    //                    title: a.title || ""
    //                }, {
    //                    dock: "top",
    //                    xtype: "toolbar",
    //                    ui: "light",
    //                    title: ""
    //                }
    //            ]
            };
            Ext.chart.Panel.superclass.constructor.call(this, a)
        },