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: