CODEWITHSUNDEEP
c#asp.netcharts
vikas
vikas

Reputation: 349

How to change the colors of bars in Column chart in asp.net

Hello Everyone!!! I am designing a column chart from database table ..Now i need each column(bar) of the chart to have different color so that we can have different legends but i am not able to achieve it.Here is my c# code....

string conn = "Server=localhost;Port=3306;Database=dma;UID=root;Pwd=techsoft;pooling=false";
    MySqlDataAdapter adp = new MySqlDataAdapter("select ConfID,NoOfCalls from chart1", conn);
    DataSet ds = new DataSet();
    adp.Fill(ds);

    //2.Set the style/Settings for X and Y axis
    Chart1.Font.Size = FontUnit.Medium;
    Chart1.Series["Series1"].XValueType = ChartValueType.Int32;
    Chart1.Series["Series1"].YValueType = ChartValueType.Int32;
    Chart1.ChartAreas[0].AxisY.Title = "No. Of calls";
    Chart1.ChartAreas[0].AxisX.Title = "ConferenceId";


    //3.Define the chart type
    Chart1.Series["Series1"].ChartType = SeriesChartType.Column;
    //4.Add the actual values from the dataset to X & Y co-ordinates
    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
    {
        Chart1.Series["Series1"].Points.AddXY(ds.Tables[0].Rows[i]["ConfID"], ds.Tables[0].Rows[i]["NoOfCalls"]);
    }

And here is my aspx page code for chart...

<asp:Chart id="Chart1" runat="server" Width="572px" Height="339px" 
    BorderDashStyle="Solid" BorderWidth="2px" BorderColor="#B54001" 
    onload="Chart1_Load1">
    <Legends>
        <asp:Legend Name="Legend1">
        </asp:Legend>
    </Legends>
<BorderSkin SkinStyle="None" BackGradientStyle="None" BackSecondaryColor="SeaShell" BorderColor="#6198dc"       BorderDashStyle="Solid" BorderWidth="1" BackColor="White"></BorderSkin>     
   <Series>
       <asp:Series MarkerSize="3" BackGradientStyle="HorizontalCenter" BorderWidth="1" 
           Name="Series1" MarkerStyle="Circle" BorderColor="180, 26, 59, 105" 
           Color="220, 65, 140, 240"                  ShadowOffset="0" Legend="Legend1"></asp:Series>
   </Series>   

   <ChartAreas>
        <asp:ChartArea Name="ChartArea1" BorderWidth="0" BackColor="White" ShadowColor="Transparent">
            <AxisY LineColor="64, 220, 64, 64" LineDashStyle="Solid" LineWidth="2">
                       <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                       <MajorGrid LineColor="64, 220, 64, 64" />
                 </AxisY>
                 <AxisX LineColor="64, 220, 64, 64" LineDashStyle="Solid" LineWidth="2">
                       <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                       <MajorGrid LineColor="64, 220, 64, 64" />
                 </AxisX>
          </asp:ChartArea>
   </ChartAreas>

Plz guys help me.Thanx in advance..

Upvotes: 1

Views: 19390

Answers (2)

Manish Mishra
Manish Mishra

Reputation: 12375

there is super simple way to customize your bar-graph chart in asp.net.

You can load you style through a xml template or directly via code.

codebehind:

 protected void Page_Load(object sender, EventArgs e)
 {
      DataTable dt = default(DataTable);
      dt = MyChartDataSource(); //datasource for your chart

     //Give two columns of data to Y-axle
      Chart1.Series[0].YValueMembers = "Volume1";
      Chart1.Series[1].YValueMembers = "Volume2";

       //Set the X-axle as date value
       Chart1.Series[0].XValueMember = "Date";

       //Bind the Chart control with the setting above
       Chart1.DataSource = dt;
       Chart1.DataBind();

       //after databinding your chart, override the colors of bar as below:
       Random random = new Random(); 
       foreach (var item in Chart1.Series[0].Points)
       {
          Color c = Color.FromArgb(random.Next(0, 255), random.Next(0, 255), random.Next(0, 255));
          item.Color = c;
        }
 }

and your designer:

<asp:Chart ID="Chart1" runat="server" Height="400px" Width="500px">
            <Series>
                <asp:Series Name="Series1" ChartType="Column" ChartArea="ChartArea1">
                </asp:Series>
                <asp:Series Name="Series2" ChartType="Column" ChartArea="ChartArea1">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                </asp:ChartArea>
            </ChartAreas>
</asp:Chart>

. I've bound the chart and defined its series from the codebehind side, you can perfectly do it through the designer side, hardly makes a difference.

Note: MyChartDataSource() returns the list or DataTable or dataSet or a collection to which you want to bind your chart.

Upvotes: 3

K D
K D

Reputation: 5989

You can add color and other style to any element of the chart with the use of Templates in ASP.net Charts

ChartObject.LoadTemplate("templatefile.xml");

Find more details here

Styling ASP.Net Chart with Template

Styyling Charts

Upvotes: 0

Related Questions