Skip to main content

Microsoft Chart Controls - ASP.NET


Downloads:
  1. Click here to download Microsoft chart control add on.
  2.  Install the add on.
Steps :
  1. Add Chart control in your VS tool box.




 

2. Create a New Web Application.
3. Drag and drop the chart control to design page.
4. The 3 major properties of the Chart is  Title,Series and Chart Area.
    4.1. Title property is used to set the title of the chart.
    Eg: 
   <Titles>
      <asp:Title ShadowColor="32, 0, 0, 0"
                 Font="Trebuchet MS, 14.25pt, style=Bold"  
                 ShadowOffset="3" Text="Sample 1"  
                 Alignment="MiddleCenter" ForeColor="White">
      </asp:Title>
   </Titles>

 4.2. Series is collection of values to show in the chart.
  Eg: 
   <Series>
      <asp:Series Palette="EarthTones"  
              ChartArea="MainChartArea" 
              IsValueShownAsLabel="True"
              YValuesPerPoint="2">
      </asp:Series>
   </Series>

   4.3. Chart Area is used to design the chart bars chart type and 3D Positions.
    Eg: 
<ChartAreas>
      <asp:ChartArea Name="MainChartArea" BorderColor="64, 64, 64, 64" 
           BackSecondaryColor="Transparent" BackColor="64, 165, 191, 228" 
       ShadowColor="Transparent"  BackGradientStyle="TopBottom">
      <Area3DStyle Enable3D="True" />
      <AxisY LineColor="64, 64, 64, 64" IsLabelAutoFit="False">
         <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
         <MajorGrid LineColor="64, 64, 64, 64" />
      </AxisY>
      <AxisX LineColor="64, 64, 64, 64" IsLabelAutoFit="False"
                    Interval="1">
         <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
         <MajorGrid LineColor="64, 64, 64, 64" />
      </AxisX>
    </asp:ChartArea>
</ChartAreas>
5. In the example i put 3 chart controls and changed the chart type and chart area .

  Eg:


6. Add script manager and timer control in the page for random chart values.
7. Add the following code in .cs file.

Namespaces:
Winforms:
using System.Windows.Forms.DataVisualization.Charting;

Webforms:
using System.Web.UI.DataVisualization.Charting;

Code:

protected void Page_Load(object sender, EventArgs e)
    {
      Series series1 = Chart1.Series[0];
      Series series2 = Chart2.Series[0];
      Series series3 = Chart3.Series[0];

      // Set series tool tips
      series1.ToolTip = "X value \t= #VALX \nY value \t= #VALY ";
      series2.ToolTip = "X value \t= #VALX \nY value \t= #VALY ";
      series3.ToolTip = "X value \t= #VALX \nY value \t= #VALY ";

      Random ra = new Random();
      string[] Months = { "Jan", "Feb", "Mar", "Apr", "May",
            "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };

      foreach (string dRow in Months)
      {
         int ran = ra.Next(500) + 10;
         Chart1.Series[0].Points.AddXY(dRow, ran);

         ran = ra.Next(1000) + 10;
         Chart2.Series[0].Points.AddXY(dRow, ran);

         ran = ra.Next(1500) + 10;
         Chart3.Series[0].Points.AddXY(dRow, ran);
      }
  }
   
protected void Timer1_Tick(object sender, EventArgs e)
    {
        Random rand = new Random();
        string[] Months = { "Jan", "Feb", "Mar", "Apr", "May",
             "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };

        // Add several random point into each series
        foreach (Series series in this.Chart1.Series)
        {
            double lastYValue = 0;
            if (series.Points.Count > 0)
            {
                lastYValue = series.Points[series.Points.Count].YValues[0];
            }
            for (int pointIndex = 0; pointIndex < 11; pointIndex++)
            {
                lastYValue += rand.Next(-3, 4);
                if (lastYValue >= 100.0)
                {
                    lastYValue -= 25.0;
                }
                else if (lastYValue <= 10.0)
                {
                    lastYValue += 25.0;
                }
                series.Points.AddXY(Months[pointIndex].ToString(), lastYValue);
            }
        }

        foreach (Series series in this.Chart2.Series)
        {
            double lastYValue = 0;
            if (series.Points.Count > 0)
            {
                lastYValue = series.Points[series.Points.Count].YValues[0];
            }
            for (int pointIndex = 0; pointIndex < 11; pointIndex++)
            {
                lastYValue += rand.Next(-3, 4);
                if (lastYValue >= 100.0)
                {
                    lastYValue -= 25.0;
                }
                else if (lastYValue <= 10.0)
                {
                    lastYValue += 25.0;
                }
                series.Points.AddXY(Months[pointIndex].ToString(), lastYValue);
            }
        }

        foreach (Series series in this.Chart3.Series)
        {
            double lastYValue = 0;
            if (series.Points.Count > 0)
            {
                lastYValue = series.Points[series.Points.Count].YValues[0];
            }
            for (int pointIndex = 0; pointIndex < 11; pointIndex++)
            {
                lastYValue += rand.Next(-3, 4);
                if (lastYValue >= 100.0)
                {
                    lastYValue -= 25.0;
                }
                else if (lastYValue <= 10.0)
                {
                    lastYValue += 25.0;
                }
                series.Points.AddXY(Months[pointIndex].ToString(), lastYValue);
            }
        }
    }

Output:

 











Labels:

Comments

Post a Comment

Popular posts from this blog

SQL - Reporting Server - Part III

Display Reports in Web Application Open Visual studio and create a new Web Application. Add Microsoft Report Viewer control. Specify the ReportServerURL and ReportPath in report properties. Run the application and see the output in browser.
1 comment
Read more

SQL - Reporting Server - Part II

Create a New Report Server Project 1. Open Visual Studio. 2. New --> Project -->    2.1. Select Project type --> Business Intelligence Project.    2.2. From the template select   Report Server Project. 3. In the solution, Right click in Shared Datasource and select  Add New Datasource. 4. In the properties window general tab enter the data source name and server type.    4.1. Create new connection click Edit button.    4.2. Or you can directly enter the connection string a in the text box. And In the Credentials tab enter the username and password.  Eg.  Data Source=SAM;Initial Catalog=NHG; Adding New Reports:    You can add the report in two ways.   1. Using Report Wizard.   2. Using Bland Report.   1. Using Report Wizard. 1.1. In the solution, Right Click at Reports and select Add New Report. It will display the Report Wizard to gene...
Post a Comment
Read more

SQL - Reporting Server - Part I

Configure a Reporting Server in SQL - 2008 Steps: 1. Open the Reporting Service Configuration Manager. Start --> All Programs --> Microsoft SQL Server 2008 --> Configuration Tools --> Reporting Services Configuration Manager. 2. Select the server name from the list. 3. Set the server account name 4. Set the Service URL. 5.Select or create Reportserver database. 6. 6. Input the virtual directory path. 7. Now we successfully configured the Reporting Server.
Post a Comment
Read more