Performance Counters With New ASP.NET Charting Control

Author: Yoann. B | Posted: 3. December 2008 17:56 2

Hi,

Today I'll talk about usage of Performance Counters from System.Diagnostics to get Processor Time and display it in a good looking Chart.

Our friend Scott Gu's on his blog talked about this new ASP.NET Charting Control.

<asp:chart /> supports a rich assortment of chart options - including pie, area, range, point, circular, accumulation, data distribution, ajax interactive, doughnut, and more. You can statically declare chart data within the control declaration, or alternatively use data-binding to populate it dynamically. At runtime the server control generates an image (for example a .PNG file) that is referenced from the client HTML of the page using a <img/> element output by the <asp:chart/> control. The server control supports the ability to cache the chart image, as well as save it on disk for persistent scenarios. It does not require any other server software to be installed, and will work with any standard ASP.NET page.

Here a sample of using PerformanceCounter with ASP.NET Charting Control.

Default.aspx

<form id="form1" runat="server">
<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <h1>
        Processor Performance Monitor</h1>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Chart ID="Chart1" runat="server" Height="296px" Width="412px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)"
                ImageType="Png" BackColor="#D3DFF0" Palette="BrightPastel" BorderDashStyle="Solid"
                BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2" BorderColor="26, 59, 105">
                <Legends>
                    <asp:Legend Enabled="False" IsTextAutoFit="False" Name="Default" BackColor="Transparent"
                        Font="Trebuchet MS, 8.25pt, style=Bold">
                    </asp:Legend>
                </Legends>
                <BorderSkin SkinStyle="Emboss"></BorderSkin>
                <Series>
                    <asp:Series XValueType="Double" Name="Series1" ChartType="Line" BorderColor="180, 26, 59, 105"
                        YValueType="Double">
                    </asp:Series>
                </Series>
                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid"
                        BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent"
                        BackGradientStyle="TopBottom">
                        <Area3DStyle Rotation="9" Perspective="10" Enable3D="False" LightStyle="Realistic"
                            Inclination="38" PointDepth="200" IsRightAngleAxes="False" WallWidth="0" IsClustered="False" />
                        <Position Y="2" Height="94" Width="94" X="2"></Position>
                        <AxisY LineColor="64, 64, 64, 64">
                            <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                            <MajorGrid LineColor="64, 64, 64, 64" />
                        </AxisY>
                        <AxisX LineColor="64, 64, 64, 64">
                            <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                            <MajorGrid LineColor="64, 64, 64, 64" />
                        </AxisX>
                    </asp:ChartArea>
                </ChartAreas>
            </asp:Chart>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Timer1" />
        </Triggers>
    </asp:UpdatePanel>
    <asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick">
    </asp:Timer>
</div>
</form>

The Code

Firstly I need to Instantiate a Static PerformanceCounter at Class level in order to use it in every methods.

I set the CategoryName and CounterName in the Constructor of the PerformanceCounter Class.

MSDN :

PerformanceCounter.CategoryName Property
Gets or sets the name of the performance counter category for this performance counter

PerformanceCounter.CounterName Property
Gets or sets the name of the performance counter that is associated with this PerformanceCounter

private static PerformanceCounter Counter = new PerformanceCounter("Processor", "% Processor Time");

Then I created a Static List of Double value representing Counter Values in order to Databind the Chart Control with these Values.

private static List<Double> Points = new List<Double>();

I used an Ajax Timer so as to Refresh my Chart Control Every 1 second to display changes.

private void RefreshGraph()
{
    foreach (Double d in Points)
    {
        Chart1.Series["Series1"].Points.AddY(d);
    }
}

protected void Timer1_Tick(object sender, EventArgs e)
{
    Points.Add((double)Counter.NextValue());

    RefreshGraph();
}

Well is'nt it ? :)

Download Solution - PerfMonSample.zip

Download the free Microsoft Chart Controls

Download the VS 2008 Tool Support for the Chart Controls

Download the Microsoft Chart Controls Samples

Download the Microsoft Chart Controls Documentation

Visit the Microsoft Chart Control Forum

Views(993)