How to Create Bar Chart and Line Chart both in ASP.Net 3.5 Charting Tools

Question

0.00/5 (No votes)

See more:

Dear Code Project,
How to Create Bar and Line graph both in ASP.Net 3.5.

Please share coding UI and Coding..

Regards
Rohit Singh

Posted 12-Jun-12 6:20am

rohit_singhk

Updated 12-Jun-12 6:29am

Sandeep Mewara

v2

Add a Solution

Comments

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 ASP.net 3.5 Charting code..

thank's
Rohit

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?

3 solutions

Add a Solution

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

V Mohan · Answer 1 · 2012-06-12T23:38:00

You can just create the chart control using following code

XML

<asp:Chart ID="ChartDate" runat="server" Height="400px" Width="800px">
                  <series>
                      <asp:Series XValueMember="Date" IsValueShownAsLabel="true"  YValueMembers="Call count"
                           Name="Series1" ChartType="Line" Color="Green" IsVisibleInLegend="true" BorderWidth="1">
                      </asp:Series>

                  </series>
                  <borderskin backcolor="Olive" bordercolor="Olive" skinstyle="Emboss" />
                  <chartareas>
                      <asp:ChartArea Name="ChartArea1" BorderWidth="0">
                          <AxisY Title="Call Count" Interval="5" ></AxisY>
                          <AxisX Title="Date"></AxisX>
                          <Area3DStyle IsClustered="True"></Area3DStyle>
                       </asp:ChartArea>
                  </chartareas>
              </asp:Chart>

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

C#

ChartDate.DataSource = dsdate.Tables[0];
ChartDate.DataBind();

rohit_singhk · Answer 2 · 2012-06-12T23:32:00

I re-solved Myself

ASPX Code...

<br />
<asp:chart id="Chart1" runat="server" palette="None" backcolor="#F3DFC1" imagetype="Png" xmlns:asp="#unknown"><br />
                            ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)" Width="950px" Height="541px"<br />
                            BorderDashStyle="Solid" BackGradientStyle="TopBottom" BorderWidth="2" BorderColor="181, 64, 1"><br />
                            <legends><br />
                                <asp:legend enabled="true" istextautofit="False" name="Default" backcolor="Transparent"><br />
                                    Font="Trebuchet MS, 10.25pt, style=Bold"><br />
                                    <position height="15.888889" width="14.8916121" x="98.048065" y="99.19455338" /><br />
                                </asp:legend><br />
                                <asp:legend enabled="true" istextautofit="False" name="Custom" backcolor="Transparent"><br />
                                    Font="Trebuchet MS, 8.25pt, style=Bold"><br />
                                    <position height="15.888889" width="25.8916121" x="70.048065" y="2.19455338" /><br />
                                </asp:legend><br />
                            </legends><br />
                            <titles><br />
                                <asp:title alignment="TopCenter" text="Product Wise Comparison Graph" textstyle="Shadow"><br />
                                    Font="Trebuchet MS, 20.25pt"><br />
                                </asp:title><br />
                            </titles><br />
                            <borderskin skinstyle="Emboss"></borderskin><br />
                            <series><br />
                                <asp:series legendtext="ANI" markersize="8" borderwidth="3" xvaluetype="Auto" name="Series7"><br />
                                    ChartType="Column" Color="#0099FF" ShadowOffset="2" YValueType="Double" XValueMember="MonthName"<br />
                                    YValueMembers="ANI" XAxisType="Primary" Font="Microsoft Sans Serif, 8pt" IsValueShownAsLabel="true"><br />
                                </asp:series><br />
                                <asp:series markersize="8" legendtext="AP" isvalueshownaslabel="true" borderwidth="3"><br />
                                    XValueType="Auto" Name="Series8" ChartType="Column" Color="#FFB94F" ShadowOffset="2"<br />
                                    YValueType="Double" XValueMember="MonthName" YValueMembers="AP" YAxisType="Primary"><br />
                                </asp:series><br />
                                <asp:series markersize="8" legendtext="Nerolac" isvalueshownaslabel="true" borderwidth="3"><br />
                                    XValueType="Auto" Name="Series9" ChartType="Line" Color="#A085EB" ShadowOffset="2"<br />
                                    YValueType="Double" XValueMember="MonthName" YValueMembers="Nerolac"><br />
                                </asp:series><br />
                                <asp:series markersize="8" legendtext="Berger" isvalueshownaslabel="true" borderwidth="3"><br />
                                    XValueType="Auto" Name="Series10" ChartType="Column" Color="#FFFF66" ShadowOffset="2"<br />
                                    YValueType="Double" XValueMember="MonthName" YValueMembers="Berger"><br />
                                </asp:series><br />
                            </series><br />
                            <chartareas><br />
                                <asp:chartarea name="ChartArea1" bordercolor="64, 64, 64, 64" borderdashstyle="Solid"><br />
                                    BackSecondaryColor="White" BackColor="White" ShadowColor="Transparent" BackGradientStyle="TopBottom"><br />
                                    <position height="70.7221146" width="92.48912" x="1.60435128" y="20.1945534" /><br />
                                    <area3dstyle rotation="25" perspective="9" lightstyle="Realistic" inclination="40"><br />
                                        IsRightAngleAxes="False" WallWidth="3" IsClustered="False" /><br />
                                    <axisy linecolor="64, 64, 64, 64" title="Amount" titlefont="Arial" ismarginvisible="true"><br />
                                        Interval="500"><br />
                                        <labelstyle font="Trebuchet MS, 8.25pt, style=Bold" /><br />
                                        <majorgrid linecolor="64, 64, 64, 64" /><br />
                                    </axisy><br />
                                    <axisx linecolor="64, 64, 64, 64" ismarginvisible="true" title="" intervaltype="Days"><br />
                                        Interval="1" TitleAlignment="Center" Enabled="True"><br />
                                        <labelstyle font="Trebuchet MS, 2.25pt, style=Bold" format="dd/MM/yyyy" /><br />
                                        <majorgrid linecolor="64, 64, 64, 64" /><br />
                                    </axisx><br />
                                    <%--<axisx2 enabled="True" ismarginvisible="true" interval="1" intervaltype="Hours"><br />
									    <labelstyle format="HH:mm tt" font="Trebuchet MS, 2.25pt, style=Bold"><br />
                                            IntervalType="Hours" /><br />
									</labelstyle></axisx2>--%><br />
                                    <%--<axisy2 enabled="True" ismarginvisible="true" interval="250" intervaltype="Number"><br />
                                        <labelstyle format="{0:0.00}" /><br />
                                    </axisy2>--%><br />
                                </area3dstyle></asp:chartarea><br />
                            </chartareas><br />
                        </asp:chart><br />

Code Behind...

<br />
 Chart1.DataSource = dsResult.Tables[0];<br />
                Chart1.DataBind();<br />
<br />
<br />
                if (dsResult.Tables[0].Rows.Count > 0)<br />
                {<br />
<br />
                    Chart1.Legends[1].CustomItems.Add(System.Drawing.ColorTranslator.FromHtml("#0099FF"), "ANI( " + dsResult.Tables[0].Rows[0]["ProductName"].ToString() + " )");<br />
<br />
                    Chart1.Legends[1].CustomItems.Add(System.Drawing.ColorTranslator.FromHtml("#FFB94F"), "Asian Paint( " + dsResult.Tables[0].Rows[0]["CompetitionAP"].ToString() + " )");<br />
                    Chart1.Legends[1].CustomItems.Add(System.Drawing.ColorTranslator.FromHtml("#A085EB"), "Berger( " + dsResult.Tables[0].Rows[0]["CompetitionBerger"].ToString() + " )");<br />
                    Chart1.Legends[1].CustomItems.Add(System.Drawing.ColorTranslator.FromHtml("#FFFF66"), "Nerolac( " + dsResult.Tables[0].Rows[0]["CompetitionNerolac"].ToString() + " )");<br />
                    //Chart1.Legends[1].CustomItems.Add(System.Drawing.Color.Red, "Asian Paint( " + dsResult.Tables[0].Rows[0]["CompetitionAP"].ToString() + " )");<br />
                    //Chart1.Legends[1].CustomItems.Add(System.Drawing.Color.Yellow, "Berger( " + dsResult.Tables[0].Rows[0]["CompetitionBerger"].ToString() + " )");<br />
                    //Chart1.Legends[1].CustomItems.Add(System.Drawing.Color.Green, "Nerolac( " + dsResult.Tables[0].Rows[0]["CompetitionNerolac"].ToString() + " )");<br />
<br />
<br />
                    Chart1.Titles[0].Text = dsResult.Tables[0].Rows[0]["DepotName"].ToString() + " ( " + dsResult.Tables[0].Rows[0]["ProductName"].ToString() + " )";<br />
<br />
<br />

Rohit Singh
Sr. Software Developer
rohit_singhk@rediffmail.com

Sandeep Mewara · Answer 3 · 2012-06-12T06:33:00

Solution 1

Have a look at these:
MSDN: Microsoft Chart Controls...
New ASP.NET Charting Control[^]
Creating Line Chart For WebForms Using C#.[^]
Understanding Chart Areas with Dundas Chart for .NET[^]
Microsoft Chart with ASP.NET 3.5 – Part 1
Microsoft Chart with ASP.NET 3.5 – Part 2

Posted 12-Jun-12 6:33am

Sandeep Mewara

Comments

rohit_singhk 12-Jun-12 12:45pm

Need it coding..

How to Create Bar Chart and Line Chart both in ASP.Net 3.5 Charting Tools

3 solutions

Solution 3

Solution 2

Solution 1

Add your solution here

Preview 0

How to Create Bar Chart and Line Chart both in ASP.Net 3.5 Charting Tools

3 solutions

Solution 3

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us