WPF dynamic simulation CPU usage Curve

During work, you often encounter the need to draw a group of data into a graph. The simplest way is to import the data into Excel and then use the drawing function to manually generate a graph. However, if the basic data is frequently changed, manual creation of images may become boring. This article uses dynamicdatadisplay to dynamically simulate the CPU usage chart in WPF to generate a graph dynamically.

The new project loads dynamicdatadisplay. DLL to references and opens mainwindow. XAML to add the namespace xmlns: D3 = "http://research.microsoft.com/DynamicDataDisplay/1.0 ". Use <D3: chartplotter> to create a chart framework and add two integer coordinate axes, X axis: <D3: horizontalintegeraxis> and Y axis: <D3: verticalintegeraxis>. <D3: Header> is used to set the chart name. <D3: verticalaxistitle> is used to set the Y axis name.

 <  Window  X  :  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  = "350" Width  = "525"> <  Grid  > <  Grid. rowdefinitions  > <  Rowdefinition  Height  = "Auto"/> <  Rowdefinition  Height  = "*"/> </  Grid. rowdefinitions  > <  Stackpanel  Orientation = "Horizontal"> <  Textblock  Text  = "CPU usage"  Margin  = "20, 10, 0, 0"  Fontsize  = "15"  Fontweight  = "Bold"/> <  Textblock  X  :  Name  = "Cpuusagetext"  Margin = "10, 10, 0, 0"  Fontsize  = "15"/> </  Stackpanel  > <  D3  :  Chartplotter  X  :  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  :  Header  Content  = "CPU performance history"/> <  D3  :  Verticalaxistitle  Content = "Percentage"/> </  D3  :  Chartplotter  > </  Grid  > </  Window  > 

Next, you need to obtain the CPU usage once per second through C #, and generate the coordinates (points) of the data to be drawn in the chart. The following section of mainwindow. XAML. CSCodeContent.

 Using System; Using System. diagnostics; Using System. windows;Using System. Windows. Media; Using System. Windows. Threading; Using Microsoft. Research. dynamicdatadisplay; Using Microsoft. Research. dynamicdatadisplay. CES; Namespace Wpfperformance { Public partial class  Mainwindow : Window { Private  Observabledatasource < Point > Datasource =New  Observabledatasource < Point > (); Private  Performancecounter Cpuperformance = New  Performancecounter (); Private  Dispatchertimer Timer = New  Dispatchertimer (); Private int I = 0; Public Mainwindow () {initializecomponent ();} 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 ++ ;} Private void Window_loaded ( Object Sender, Routedeventargs E) {plotter. addlinegraph (datasource, Colors . Green, 2, "Percentage" ); Timer. interval =Timespan . Fromseconds (1); timer. Tick + = New  Eventhandler (Animatedplot); timer. isenabled = True ; Plotter. viewport. fittoview ();}}}

Use observabledatasource <point> to dynamically store the coordinate points of the chart, and performancecounter to obtain the CPU usage value. The dispatchertimer timer performs the Count operation at the specified interval, and the integer I acts as the X-axis value of the CPU usage coordinate point.

PrivateObservabledatasource<Point> Datasource =NewObservabledatasource<Point> ();PrivatePerformancecounterCpuperformance =NewPerformancecounter();PrivateDispatchertimerTimer =NewDispatchertimer();Private intI = 0;
 

The animatedplot event is used to construct coordinate points. You can set CPU performance parameters and use the nextvalue () method to obtain the current CPU usage data as the Y value, and integer I as the X value. Construct x and y values as coordinate points and store them in datasource asynchronously.

  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, load the event to <WINDOW> using window_loaded. The addlinegraph method draws the coordinate point in datasource to the chart. The curve color is green and the width is set to 2, the curve name is "percentage ". Set the timer interval to 1 second, and continuously execute the animatedplot event to draw new coordinate points in real time.

 
Private voidWindow_loaded (ObjectSender,RoutedeventargsE) {plotter. addlinegraph (datasource,Colors. Green, 2,"Percentage"); Timer. interval =Timespan. Fromseconds (1); timer. Tick + =NewEventhandler(Animatedplot); timer. isenabled =True; Plotter. viewport. fittoview ();}
 

Right-click a chart to copy it to another document:

Dynamic demonstration

Move the left mouse button to browse the curve data at any position. You can zoom in or out the curve.

Source code Download

Wpfperformance.zip