Search code examples
c#asp.net.netchartsmschart

Customize ASP.NET Chart DataPoint Based On Condition


I'm unable to change the color for each datapoint respectively.

Condition is if number <= 10, color will be red. if number > 10, color will be green.

Codes (I did try using a foreach loop then a for loop, but to no avail..) Please just take a look at //Available :

        ChartClass.Series.Clear();

        BedsBLL get = new BedsBLL();

        int A1Available = get.countAvailA1();
        int A1Alloted = get.countUnavailA1();
        int B1Available = get.countAvailB1();
        int B1Alloted = get.countUnavailB1();
        int B2Available = get.countAvailB2();
        int B2Alloted = get.countUnavailB2();
        int C1Available = get.countAvailC1();
        int C1Alloted = get.countUnavailC1();

        //Available
        Series seriesAvail = ChartClass.Series.Add("SeriesAvailable");
        seriesAvail.Color = Color.ForestGreen;
        seriesAvail.LegendText = "Available Number of Beds";

        String[] classArrAvail = { "A1", "B1", "B2", "C1" };
        int[] countAvailable = { A1Available, B1Available, B2Available, C1Available };

        ChartClass.Series["SeriesAvailable"].Points.DataBindXY(classArrAvail, countAvailable);

        ChartClass.Series["SeriesAvailable"].YValuesPerPoint = 2;

        foreach (DataPoint pt in ChartClass.Series["SeriesAvailable"].Points)
        {
            if (pt.XValue <= 10)
            {
                pt.Color = Color.Red;
            }
            else if (pt.XValue > 10)
            {
                pt.Color = Color.ForestGreen;
            }

            /*for (int i = 0; i < countAvailable.Length; i++)
            {
                if (countAvailable[i] <= 10)
                {
                    pt.Color = Color.Red;
                }
                else if (countAvailable[i] > 10)
                {
                    pt.Color = Color.ForestGreen;
                }
            }*/
        }

        //Alloted
        Series seriesAlloted = ChartClass.Series.Add("SeriesAlloted");
        seriesAlloted.Color = Color.Gray;
        seriesAlloted.LegendText = "Alloted Number of Beds";

        String[] classArrAlloted = { "A1", "B1", "B2", "C1" };
        int[] countAlloted = { A1Alloted, B1Alloted, B2Alloted, C1Alloted };

        ChartClass.Series["SeriesAlloted"].Points.DataBindXY(classArrAlloted, countAlloted);

enter image description here

Designer:

                <asp:Chart ID="ChartClass" runat="server" Height="350px" Width="380px"> 
                <Series>
                    <asp:Series Name="SeriesAvailable" IsValueShownAsLabel="True" LabelAngle="-90" Font="Microsoft Sans Serif, 12pt" Legend="LegendClass" ChartArea="ChartAreaClass" ChartType="StackedColumn">
                        <SmartLabelStyle Enabled="false" />
                    </asp:Series>
                    <asp:Series Name="SeriesAlloted" IsValueShownAsLabel="True" LabelAngle="-90" Font="Microsoft Sans Serif, 12pt" Legend="LegendClass" ChartArea="ChartAreaClass" ChartType="StackedColumn">
                        <SmartLabelStyle Enabled="false"/>
                    </asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartAreaClass">
                        <AxisX Title="Class">
                            <MajorGrid Enabled="false" />
                        </AxisX>
                        <AxisY Title="Number of Beds">
                            <MajorGrid Enabled="false" />
                        </AxisY>
                    </asp:ChartArea>
                </ChartAreas>
                <Legends>
                    <asp:Legend Docking="Bottom" Name="LegendClass"></asp:Legend>
                </Legends>
                <Titles>
                    <asp:Title Name="TitleChart" Font="Microsoft Sans Serif, 15pt, style=Bold" Text="Beds Statistics Summary (Class)" Alignment="TopCenter"></asp:Title>
                </Titles>
                </asp:Chart>

Solution

  • Your loop for setting the color is incorrect. Here's how you should do it:

    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string[] classArrAvail = { "A1", "B1", "B2", "C1" };
            int[] countAvailable = { 20, 5, 10, 15 };
    
            Chart1.Series["SeriesAvailable"].Points.DataBindXY(classArrAvail, countAvailable);
    
            foreach (DataPoint pt in Chart1.Series["SeriesAvailable"].Points)
            {
                if (pt.YValues[0] <= 10)
                    pt.Color = Color.Red;
                else pt.Color = Color.Green;
            }
        }
    }
    

    enter image description here


    EDIT: Adding ASPX for column labels:

        <asp:Chart ID="Chart1" runat="server" Height="400px" Width="600px">
            <series>
                <asp:Series Name="SeriesAvailable" Font="Microsoft Sans Serif, 12pt" IsValueShownAsLabel="True" LabelAngle="-90">
                    <SmartLabelStyle Enabled="False" />
                </asp:Series>
            </series>
            <chartareas>
                <asp:ChartArea Name="ChartArea1">
                    <AxisX>
                        <MajorGrid Enabled="False" />
                    </AxisX>
                </asp:ChartArea>
            </chartareas>
        </asp:Chart>
    

    enter image description here