WPF Dynamic Simulation CPU usage graph

Original: WPF Dynamic simulation CPU usage graph

The easiest way to do this is to get data into Excel, and then use the drawing function to generate a graph manually. But if the underlying data changes frequently, manually creating graphics can become tedious. This article uses Dynamicdatadisplay to dynamically simulate CPU usage graphs in WPF for dynamic generation of graphs.

The new project loads DynamicDataDisplay.dll into references, opens the MainWindow.xaml add namespace xmlns:d3= "http://research.microsoft.com/ dynamicdatadisplay/1.0 ". Create a chart frame from <d3:ChartPlotter>, where you add two integer axes, x axis: <d3:horizontalintegeraxis>,y axis: <d3: Verticalintegeraxis>. <d3:Header> used to set the chart name,<d3:verticalaxistitle> used to set the y-axis name.

<Windowx:Class= "Wpfperformance.mainwindow"xmlns= "Http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x= "Http://schemas.microsoft.com/winfx/2006/xaml"xmlns:D3= "http://research.microsoft.com/DynamicDataDisplay/1.0"Title= "CPU Performance"Loaded= "window_loaded"Height= " the"Width= "525" > <Grid> <grid.rowdefinitions> <RowDefinitionHeight= "Auto"/> <RowDefinitionHeight= "*"/> </grid.rowdefinitions> <StackPanelOrientation= "Horizontal" > <TextBlockText= "CPU Usage"Margin= "20,10,0,0"FontSize= " the"FontWeight= "Bold"/> <TextBlockx:Name= "Cpuusagetext"Margin= "10,10,0,0"FontSize= "/>" </StackPanel> <D3:Chartplotterx:Name= "Plotter"Margin= "10,10,20,10"Grid.Row= "1" > <D3:Chartplotter.verticalaxis> <D3:Verticalintegeraxis/> </D3:Chartplotter.verticalaxis> <D3:Chartplotter.horizontalaxis> <D3:Horizontalintegeraxis/> </D3:Chartplotter.horizontalaxis> <D3:HeaderContent= "CPU performance history"/> <D3:VerticalaxistitleContent= "Percentage"/> </D3:Chartplotter> </Grid></Window>

The next step is to get CPU usage per second through C # and draw these data generation coordinate points (point) in the chart. The following is the code content of the MainWindow.xaml.cs section.

usingSystem;usingSystem.Diagnostics;usingSystem.Windows;usingSystem.Windows.Media;usingSystem.Windows.Threading;usingMicrosoft.Research.DynamicDataDisplay;usingMicrosoft.Research.DynamicDataDisplay.DataSources;namespacewpfperformance{Public Partial classMainWindow:Window{PrivateObservabledatasource< Point> DataSource =NewObservabledatasource< Point> ();PrivatePerformanceCounterCpuperformance =NewPerformanceCounter();PrivateDispatcherTimerTimer =NewDispatcherTimer();private inti = 0; PublicMainWindow () {InitializeComponent (); }private voidAnimatedplot (ObjectSenderEventArgsE) {cpuperformance.categoryname ="Processor"; Cpuperformance.countername ="% Processor time"; Cpuperformance.instancename ="_total";Doublex = i;Doubley = Cpuperformance.nextvalue (); PointPoint =New Point(x, y); Datasource.appendasync (Base.            Dispatcher, point); Cpuusagetext.text =String. Format ("{0:0}%", y);        i++; }private voidWindow_Loaded (ObjectSenderRoutedEventArgse) {plotter. Addlinegraph (DataSource,Colors. Green, 2,"Percentage"); Timer. Interval =TimeSpan.            FromSeconds (1); Timer. Tick + =NewEventHandler(Animatedplot); Timer. IsEnabled =true; Plotter.        Viewport.fittoview (); }    }}

By observabledatasource<point> Dynamic storage chart coordinate points, PerformanceCounter get CPU Usage value, DispatcherTimer timer at specified interval to take number operation, integer i The x-axis value as the coordinate point for CPU utilization.

Observabledatasource<pointobservabledatasource<point > ();  PerformanceCounter ( );   dispatchertimer ( );   i = 0;

The Animatedplot event is used to construct the coordinate point by setting the cpuperformance correlation parameter and using the NextValue () method to get the current CPU usage data as the Y value and integer i as the x value. The x, y values are constructed as coordinate points (point) and are stored asynchronously in the datasource.

private void  animatedplot (object  sender, eventargs  e) {cpuperformance.categoryname = " Processor ";    Cpuperformance.countername =  "% Processor time" ;    Cpuperformance.instancename =  "_total" ;    double  x = i;    double  y = Cpuperformance.nextvalue (); point  point = new  point     (x, y); Datasource.appendasync (base .    Dispatcher, point); Cpuusagetext.text = string .    Format ( "{0:0}%" , y); i++;} 

Finally, by loading the event into <Window> with window_loaded, the Addlinegraph method draws the coordinate points in the DataSource to the chart, the curve color is defined as green, the thickness is set to 2, and the curve name is "Percentage". Sets the timer interval to 1 seconds and continuously executes the Animatedplot event to draw new coordinate points in real time.

window_loaded (e) {    Colors"Percentage");    TimeSpan. FromSeconds (1);     EventHandler(animatedplot);    true;    Plotter. Viewport.fittoview ();}

Right-click to copy the chart to another document:

Dynamic Demo

Left mouse button Drag the chart to browse any position curve data, the middle mouse button to zoom the display curve.

Source code Download Wpfperformance.zip

WPF Dynamic Simulation CPU usage graph