Click here to Skip to main content
11,930,069 members (44,855 online)
Rate this:
Please Sign up or sign in to vote.
See more: ASP.NET Chart
Dear Code Project,
How to Create Bar and Line graph both in ASP.Net 3.5.

Please share coding UI and Coding..

Rohit Singh
Posted 12-Jun-12 7:20am
Edited 12-Jun-12 7:29am
rohit_singhk 13-Jun-12 0:55am
Dear Sandeep Sir,
I read all of link but not proper understood the coding format.

Can u Please Send Bar and line Combine coding in 3.5 Charting code..

RDBurmon 13-Jun-12 9:27am
Thanks Everyone who replied to this thread , So Rohit, I think you have got enough responses and you should be able to mark it as your answer and close the thread. Please do so.
Member 10661000 26-Mar-14 5:17am
It may Be possible to FIll null in MultiseriesColumn chart?
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

I re-solved Myself

ASPX Code...

<asp:chart id="Chart1" runat="server" palette="None" backcolor="#F3DFC1" imagetype="Png" xmlns:asp="#unknown">
ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)" Width="950px" Height="541px"
BorderDashStyle="Solid" BackGradientStyle="TopBottom" BorderWidth="2" BorderColor="181, 64, 1">

<asp:legend enabled="true" istextautofit="False" name="Default" backcolor="Transparent">
Font="Trebuchet MS, 10.25pt, style=Bold">

<asp:legend enabled="true" istextautofit="False" name="Custom" backcolor="Transparent">
Font="Trebuchet MS, 8.25pt, style=Bold">

<asp:title alignment="TopCenter" text="Product Wise Comparison Graph" textstyle="Shadow">
Font="Trebuchet MS, 20.25pt">


<asp:series legendtext="ANI" markersize="8" borderwidth="3" xvaluetype="Auto" name="Series7">
ChartType="Column" Color="#0099FF" ShadowOffset="2" YValueType="Double" XValueMember="MonthName"
YValueMembers="ANI" XAxisType="Primary" Font="Microsoft Sans Serif, 8pt" IsValueShownAsLabel="true">

<asp:series markersize="8" legendtext="AP" isvalueshownaslabel="true" borderwidth="3">
XValueType="Auto" Name="Series8" ChartType="Column" Color="#FFB94F" ShadowOffset="2"
YValueType="Double" XValueMember="MonthName" YValueMembers="AP" YAxisType="Primary">

<asp:series markersize="8" legendtext="Nerolac" isvalueshownaslabel="true" borderwidth="3">
XValueType="Auto" Name="Series9" ChartType="Line" Color="#A085EB" ShadowOffset="2"
YValueType="Double" XValueMember="MonthName" YValueMembers="Nerolac">

<asp:series markersize="8" legendtext="Berger" isvalueshownaslabel="true" borderwidth="3">
XValueType="Auto" Name="Series10" ChartType="Column" Color="#FFFF66" ShadowOffset="2"
YValueType="Double" XValueMember="MonthName" YValueMembers="Berger">

<asp:chartarea name="ChartArea1" bordercolor="64, 64, 64, 64" borderdashstyle="Solid">
BackSecondaryColor="White" BackColor="White" ShadowColor="Transparent" BackGradientStyle="TopBottom">

<area3dstyle rotation="25" perspective="9" lightstyle="Realistic" inclination="40">
IsRightAngleAxes="False" WallWidth="3" IsClustered="False" />

<labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />

Interval="1" TitleAlignment="Center" Enabled="True">
<labelstyle font="Trebuchet MS, 2.25pt, style=Bold" format="dd/MM/yyyy" />

<labelstyle format="HH:mm tt" font="Trebuchet MS, 2.25pt, style=Bold">
IntervalType="Hours" />
<labelstyle format="{0:0.00}" />

Code Behind...
Chart1.DataSource = dsResult.Tables[0];

if (dsResult.Tables[0].Rows.Count > 0)

Chart1.Legends[1].CustomItems.Add(System.Drawing.ColorTranslator.FromHtml("#0099FF"), "ANI( " + dsResult.Tables[0].Rows[0]["ProductName"].ToString() + " )");

Chart1.Legends[1].CustomItems.Add(System.Drawing.ColorTranslator.FromHtml("#FFB94F"), "Asian Paint( " + dsResult.Tables[0].Rows[0]["CompetitionAP"].ToString() + " )");
Chart1.Legends[1].CustomItems.Add(System.Drawing.ColorTranslator.FromHtml("#A085EB"), "Berger( " + dsResult.Tables[0].Rows[0]["CompetitionBerger"].ToString() + " )");
Chart1.Legends[1].CustomItems.Add(System.Drawing.ColorTranslator.FromHtml("#FFFF66"), "Nerolac( " + dsResult.Tables[0].Rows[0]["CompetitionNerolac"].ToString() + " )");
//Chart1.Legends[1].CustomItems.Add(System.Drawing.Color.Red, "Asian Paint( " + dsResult.Tables[0].Rows[0]["CompetitionAP"].ToString() + " )");
//Chart1.Legends[1].CustomItems.Add(System.Drawing.Color.Yellow, "Berger( " + dsResult.Tables[0].Rows[0]["CompetitionBerger"].ToString() + " )");
//Chart1.Legends[1].CustomItems.Add(System.Drawing.Color.Green, "Nerolac( " + dsResult.Tables[0].Rows[0]["CompetitionNerolac"].ToString() + " )");

Chart1.Titles[0].Text = dsResult.Tables[0].Rows[0]["DepotName"].ToString() + " ( " + dsResult.Tables[0].Rows[0]["ProductName"].ToString() + " )";

Rohit Singh
Sr. Software Developer
Rate this: bad
Please Sign up or sign in to vote.

Solution 3

You can just create the chart control using following code

<asp:Chart ID="ChartDate" runat="server" Height="400px" Width="800px">
                      <asp:Series XValueMember="Date" IsValueShownAsLabel="true"  YValueMembers="Call count"
                           Name="Series1" ChartType="Line" Color="Green" IsVisibleInLegend="true" BorderWidth="1">
                  <borderskin backcolor="Olive" bordercolor="Olive" skinstyle="Emboss" />
                      <asp:ChartArea Name="ChartArea1" BorderWidth="0">
                          <AxisY Title="Call Count" Interval="5" ></AxisY>
                          <AxisX Title="Date"></AxisX>
                          <Area3DStyle IsClustered="True"></Area3DStyle>

In Code Behind you can directly bind this chart to Dataset in Chart Control

ChartDate.DataSource = dsdate.Tables[0];

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.151126.1 | Last Updated 13 Jun 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100