Click here to Skip to main content
16,020,249 members
Please Sign up or sign in to vote.
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
Updated 12-Jun-12 6:29am
v2
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?

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
 
Share this answer
 
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();
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900