Saturday 30 April 2011

How To Create Charts In ASP.NET

First Downoad MsChart.exe from
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c

 Run MsChart.exe and chart tools will be added to VS 2010 in Data Tab-


Drag And Drop Chart Tool

Add a TempImages folder in your application.


From Smart Tag of Chart Control You Can Choose Chat Type Like Line And spline etc.

In Default.aspx page--
<asp:Chart ID="Chart1" EnableViewState="True"
            ImageStorageMode="UseImageLocation" ImageLocation="~/tempImages/ChartPic_#SEQ(300,5)" 
            ImageType="Jpeg" Height="400px"
            Width="900px"  runat="server" BackColor="MistyRose"
            BackGradientStyle="TopBottom" BackImageTransparentColor="255, 128, 0"
            BackSecondaryColor="192, 192, 0" BorderlineColor="Maroon" Palette="Berry">
            <Series>
                <asp:Series Name="Series1" ChartType="Line">

                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                <AxisX LineColor="Brown" Title="Test Name" TitleFont="Verdana">
                </AxisX>
                <AxisY LineColor="Brown" Title="Percentage" TitleFont="Verdana">
                </AxisY>
                </asp:ChartArea>
            </ChartAreas>
 </asp:Chart>


How to bind a chart to a stored procedure in Asp.Net-> in code behind file means .aspx.cs file

private void bindChart()    {

        SqlConnection con = newSqlConnection(ConnectionString);

        SqlCommand cmd = new SqlCommand();

        cmd.Connection = con;

        cmd.CommandText = "ProcedureName";

        cmd.CommandType = CommandType.StoredProcedure;

        DataTable dt = new DataTable();

        SqlDataAdapter da = newSqlDataAdapter(cmd);

        da.Fill(dt);

        Chart1.DataSource = dt;

        Chart1.Series["Series1"].XValueMember = "Test";

        Chart1.Series["Series1"].YValueMembers = "Percentage";

        Chart1.DataBind();    }

How to change the color and Increase thickness of line generated in chart-

Chart1.Series["Series1"].BorderWidth = 5;  --For Thickness of line

Chart1.Series["Series1"].Color = System.Drawing.Color.Green; -- For Line color

 In Web.Config->


<system.web>

    <httpHandlers>
      <remove path="*.asmx" verb="*"/>
      <add path="*.asmx" verb="*" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
      <add path="*_AppService.axd" verb="*" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
      <add path="ScriptResource.axd" verb="GET,HEAD" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
      <add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
    </httpHandlers>

</system.Web>





 

 

 


No comments:

Post a Comment