How to set alternative color of column in asp.net chart control - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

How to set alternative color of column in asp.net chart control

In this article I am going to explain how to set alternative color of column in column chart in asp.net chart control.


Implementation:
I am using chart control to draw column chart and set alternative color of column.
I have created a table Tb_Population and insert some dummy data.

Id
int
StateName
varchar(200)
TotalPopulation
bigint

HTML Markup:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Statewise Population</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:Chart ID="Chart1" runat="server" Width="800px">
            <Series>
                  <asp:Series Name="TotalPopulation" IsValueShownAsLabel="True" LabelFormat="F0"  Legend="Legend1"></asp:Series>
        <asp:Series ChartArea="ChartArea1" LabelFormat="F0"  IsValueShownAsLabel="True" Legend="Legend1"  Name="StateName" ></asp:Series>
            </Series>
             <Titles> 
             <asp:Title Font="Open Sans, 12pt, style=Bold" Name="title1" Text="Statewise Population"/>
        </Titles> 
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
    </div>
    </form>
</body>
</html>

Import the namespace
C#:
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Web.UI.DataVisualization.Charting;
using System.Drawing;

VB:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.UI.DataVisualization.Charting
Imports System.Drawing

Create Connection
C#:
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());

VB:
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())

Draw chart
Create function to bind chart and call it on page load event.
C#:
protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindChart();
        }
    }
    public void BindChart()
    {
        try
        {
            SqlDataAdapter adp = new SqlDataAdapter("Select StateName,TotalPopulation from Tb_Population", con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                Chart1.Series["TotalPopulation"].Points.Add(new DataPoint(i, dt.Rows[i]["TotalPopulation"].ToString().Trim()));
                Chart1.Series[0].Points[i].AxisLabel = dt.Rows[i]["StateName"].ToString().Trim();
            }
            foreach (Series charts in Chart1.Series)
            {
                int i = 0;
                foreach (DataPoint point in charts.Points)
                {
                    point.Label = string.Format("{0:0}", point.YValues[0]);
                    if (i % 2 == 0)
                    {
                        Color colour = ColorTranslator.FromHtml("#CD5C5C");
                        point.Color = colour;
                    }
                    else
                    {
                        Color colour = ColorTranslator.FromHtml("#bfbfbf");
                        point.Color = colour;
                    }
                    i++;
                }
            }      
        }
        catch (Exception ex)
        {
        }
    } 

VB:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindChart()
        End If
    End Sub
    Public Sub BindChart()
        Try
            Dim adp As New SqlDataAdapter("Select StateName,TotalPopulation from Tb_Population", con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            For i As Integer = 0 To dt.Rows.Count - 1
                Chart1.Series("TotalPopulation").Points.Add(New DataPoint(i, dt.Rows(i)("TotalPopulation").ToString().Trim()))
                Chart1.Series(0).Points(i).AxisLabel = dt.Rows(i)("StateName").ToString().Trim()
            Next
            For Each charts As Series In Chart1.Series
                Dim i As Integer = 0
                For Each point As DataPoint In charts.Points
                    point.Label = String.Format("{0:0}", point.YValues(0))
                    If i Mod 2 = 0 Then
                        Dim colour As Color = ColorTranslator.FromHtml("#CD5C5C")
                        point.Color = colour
                    Else
                        Dim colour As Color = ColorTranslator.FromHtml("#bfbfbf")
                        point.Color = colour
                    End If
                    i += 1
                Next
            Next
        Catch ex As Exception
        End Try
    End Sub





What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon