How to add space between 2 columns and divide the chart in 3 series.

Question

User816268407 posted

Image link:  https://drive.google.com/file/d/16358VlZ-a3T3A2gaI9iE4CbrZWdHTOJX/view?usp=sharing

How do I make them into 3 series?

.aspx code:

<asp:Chart ID="Chart1" runat="server" Height="401px" Width="500px" Palette="SeaGreen">
        <Legends>
            <asp:Legend Alignment="Center" Docking="Top" IsTextAutoFit="False" Name="Default"
            LegendStyle="Column" />
        </Legends>
        <chartareas>
            <asp:ChartArea Name="ChartArea1">
                <AxisX Interval="1" Title="Target vs Actual"></AxisX>
        </asp:ChartArea>
        </chartareas>
        </asp:Chart>

.cs code:

Chart1.Visible = DropDownList1.SelectedValue != "";
            //Chart1.Visible = DropDownList2.SelectedValue != "";
            string query = string.Format("SELECT name, target_1day_standard, actual_1day_standard, target_1day_premium, actual_1day_premium, target_1day_total, actual_1day_avg FROM KPI1 WHERE name = '{0}' ", DropDownList1.SelectedValue);
            DataTable dt = GetData(query);
            for (int i = 1; i < dt.Columns.Count; i++)
            {
                Series series = new Series();
                series.Name = dt.Columns[i].ColumnName; 
                foreach (DataRow dr in dt.Rows)
                {
                    string y = (string)dr[i];
                    series.Points.AddXY("1 DAY RESOLUTION", y);
                }
                Chart1.Series.Add(series);           
            }
            foreach (Series s in Chart1.Series)
            {
                s.ToolTip = "Name: #VALX\nValue: #VALY\nPercent: #PERCENT\n";
            }

Answer 1

User-939850651 posted

Hi Shreyas09,

Maybe you can try to add a border to each series, like this:

protected void Page_Load(object sender, EventArgs e)
        {
            Chart1.Visible = true;
            //string query = string.Format("SELECT name, target_1day_standard, actual_1day_standard, target_1day_premium, actual_1day_premium, target_1day_total, actual_1day_avg FROM KPI1 WHERE name = '{0}' ", DropDownList1.SelectedValue);
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[] {
                new DataColumn("name"),
                new DataColumn("target_1day_standard"),
                new DataColumn("actual_1day_standard"),
                new DataColumn("target_1day_premium"),
                new DataColumn("actual_1day_premium"),
                new DataColumn("target_1day_total"),
                new DataColumn("actual_1day_avg")
            });
            dt.Rows.Add("name1", 4, 5, 1, 3, 5, 8);

            for (int i = 1; i < dt.Columns.Count; i++)
            {
                Series series = new Series();
                series.Name = dt.Columns[i].ColumnName;
                series.BorderWidth = 3;
                series.BorderColor = System.Drawing.Color.White;
                foreach (DataRow dr in dt.Rows)
                {
                    string y = (string)dr[i];
                    series.Points.AddXY("1 DAY RESOLUTION", y);
                }
                Chart1.Series.Add(series);
            }

            foreach (Series s in Chart1.Series)
            {
                s.ToolTip = "Name: #VALX\nValue: #VALY\nPercent: #PERCENT\n";
            }
        }

Result:

Best regards,

Xudong Peng

Answer 2

User816268407 posted

Thanks a lot! It works as Intended.

Also, Is there any way to remove the border space for the bottom of columns as you can see there is space between X axis and the data columns so is there any solution to remove that border space for only the bottom area of data columns?

Answer 3

User-939850651 posted

Hi Shreyas09,

Also, Is there any way to remove the border space for the bottom of columns as you can see there is space between X axis and the data columns so is there any solution to remove that border space for only the bottom area of data columns?

It seems that there is no built-in method to customize its border style. If you need the image to fit the table border, you can also try to add an empty series.

protected void Page_Load(object sender, EventArgs e)
        {
            Chart1.Visible = true;
            //string query = string.Format("SELECT name, target_1day_standard, actual_1day_standard, target_1day_premium, actual_1day_premium, target_1day_total, actual_1day_avg FROM KPI1 WHERE name = '{0}' ", DropDownList1.SelectedValue);
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[] {
                new DataColumn("name"),
                new DataColumn("target_1day_standard"),
                new DataColumn("actual_1day_standard"),
                new DataColumn("target_1day_premium"),
                new DataColumn("actual_1day_premium"),
                new DataColumn("target_1day_total"),
                new DataColumn("actual_1day_avg")
            });
            dt.Rows.Add("name1", 4, 5, 1, 3, 5, 8);

            for (int i = 1; i < dt.Columns.Count; i++)
            {
                Series series = new Series();
                series.Name = dt.Columns[i].ColumnName;
                series.SetCustomProperty("PointWidth","1.5");
                foreach (DataRow dr in dt.Rows)
                {
                    string y = (string)dr[i];
                    series.Points.AddXY("1 DAY RESOLUTION", y);
                }
                Chart1.Series.Add(series);
                Series emptySeries = new Series();
                emptySeries.Name = "es" + i.ToString();
                emptySeries.Points.AddXY("", "0");
                emptySeries.IsVisibleInLegend = false;
                Chart1.Series.Add(emptySeries);
            }

            foreach (Series s in Chart1.Series)
            {
                s.ToolTip = "Name: #VALX\nValue: #VALY\nPercent: #PERCENT\n";
            }
        }

Hope this can help.

Best regards,

Xudong Peng

Answer 4

User816268407 posted

Thanks a lot! That's what I was looking for....