locked
Display Chart In Next Row In Tab Panel RRS feed

  • Question

  • User-471962099 posted

    hi all,

    I have generated charts dynamically in tab panel. The problem I faced now is when many charts are generated, it generates side by side each other. How do I only have 1 chart in each row instead of having them being displayed horizontally side by side together? Each chart is supposed to be on 1 row each.

    This is what I currently see when I executed my program: http://i.stack.imgur.com/2lnIR.png

    This is what I want to achieve: http://i.stack.imgur.com/CAMUf.png

    This is my codes:

    //Aspx file
     <div>
                 <asp:scriptmanager ID="ScriptManager1" runat="server">
                </asp:scriptmanager>
            </div>
            <asp:updatepanel ID="UpdatePanel1" runat="server" ScrollBars="Horizontal">
                <contenttemplate>
            <asp:placeholder ID="PlaceHolder1" runat="server"></asp:placeholder>
    
                </contenttemplate>
            </asp:updatepanel>
    
    //Cs file
    AjaxControlToolkit.TabContainer container = new AjaxControlToolkit.TabContainer();
                container.ID = "TabContainer";
                container.EnableViewState = false;
                container.Tabs.Clear();
    
    foreach (ListItem item in SelectionListBox.Items)
            {
                if (item.Selected)
                {
                    Label tabContent = new Label();
                    tabContent.ID = "lbl_tab_";
                    tabContent.Text += item.Value;
    
    Chart Chart1 = new Chart();
                            Chart1.DataSource = dt;
                            Chart1.Width = 715;
                            Chart1.Height = 450;
    
                            Chart1.Series.Add(new Series());
                            Chart1.Series[0].ChartType = SeriesChartType.BoxPlot;
                            List<object> List1 = dt_LVL1RISKCHART.AsEnumerable().ToList<object>();
    
                            foreach (DataRow row in dt.Rows)
                                Chart1.Series[0].Points.AddXY(row["STATUS"], new object[] { row["MIN"], row["MAX"], row["25TH_PERCENTILE"], row["75TH_PERCENTILE"], row["AVG"], row["50TH_PERCENTILE"] });
    
                            //create chartareas
                            ChartArea ca = new ChartArea();
                            ca .AxisX = new Axis();
                            ca .AxisY = new Axis();
                            Chart1.ChartAreas.Add(ca);
    
                            //databind
                            Chart1.DataBind();
                            Chart1.Visible = true;
    
                    AjaxControlToolkit.TabPanel panel = new AjaxControlToolkit.TabPanel();
                    panel.HeaderText += item.Value;
                    container.Tabs.Add(panel);
                    panel.Controls.Add(tabContent);
                    panel.Controls.Add(Chart1);
                }
            }
            PlaceHolder1.Controls.Add(container);
        }
    
        public AjaxControlToolkit.TabPanel GetManualTab()
        {
            AjaxControlToolkit.TabPanel panel = new AjaxControlToolkit.TabPanel();
            return panel;
        }

    Question: how do I display only 1 chart at each row in tab panel if there are many charts being generated at one go?

    I need help on this, appreciate if someone can provide me help on this, thanks a lot!!

    Wednesday, October 7, 2015 1:51 AM

Answers

  • User61956409 posted

    Hi Felicia,

    You could append a <br/> tag after you add chart to panel.

    panel.Controls.Add(Chart1);
    Label lbl = new Label();
    lbl.Text = "<br/>";
    panel.Controls.Add(lbl);
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 8, 2015 2:02 AM

All replies

  • User61956409 posted

    Hi Felicia,

    You could append a <br/> tag after you add chart to panel.

    panel.Controls.Add(Chart1);
    Label lbl = new Label();
    lbl.Text = "<br/>";
    panel.Controls.Add(lbl);
    

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 8, 2015 2:02 AM
  • User-471962099 posted

    hi Fei Han, thanks for your solution! :)

    Best Regards,
    Felicia

    Thursday, October 8, 2015 3:17 AM