Display Chart In Next Row In Tab Panel

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!!

Answer 1

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

Answer 2

User-471962099 posted

hi Fei Han, thanks for your solution! :)

Best Regards,
Felicia