domster domster - 4 years ago 143
ASP.NET (C#) Question

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>

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download