Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Powershell WPF Charts dashboard demo

I was preparing for some dashboards using Powershell WPF GUI and was looking for some charts and graph to show on my GUI, I tried utilizing data visualization charts but I was looking for more cooler ways to show them and was looking for interactive ones which can complement my dashboards. To achieve this I have created html files using Chart.js and bootstrap html codes and used WPF webbrowser controls to project them.

 

There are multiple script files and folders involved in this project. Once the  main script with name WPF-WebBrowser.ps1 is executed, it shows the GUI. Here for blue circle information I used eclipse control and Textblock on top of it to show my data.

      
  

To show example here I am only taking Bart chart here and how it is created, recipe for other charts are similar. I have added webbrowser controls and whatever default browser you have set, it will use the same here to show your html file, for example google chrome is my default browser, Web browser will use Chrome to show the html chart data. Below is one of the webbrowser control example I am using for bar chart.

Data is collected in below format to show on html file.

#This will collect the all processes information form remote computer and get the first 5 top processes by number.
$AllProcesses = Get-Process -ComputerName $ComputerName.Text
$ProcessByCount = $AllProcesses| Group-Object -Property Name | Sort-Object -Property Count -Descending | Select-Object -First 5  

#These are the bar chart labels info and data collected to feed up in chart.js format, I need this information in example format of 'label1','label2','label3'
$Top5ProcName = ($ProcessByCount.Name | ForEach-Object {"'{0}'" -f $_}) -join ', '  

#This is the actual data from where bars are generated on chart. Data output looks like for example 90,80,30.
$Top5ProcCount = ($ProcessByCount | Select-Object -ExpandProperty Count) -join ', '  

#All the gathered data is used as parameter value in another script file and it generates html file, webbrowser control use this file to show on the gui screen.
& "$ScriptPath\Psscripts\New-BarChart.ps1" -Top5ProcName $Top5ProcName -Top5ProcCount $Top5ProcCount -LegendLabel Count  
$WebBrowser2.Navigate("file:///$HtmlCharts\Bar.html")

1:  ##########################################  
2:  # Created by http://vcloud-lab.com  
3:  # Created using chart.js html  
4:  # Tested on Windows 10  
5:  ##########################################  
6:  #Load required libraries  
7:  Add-Type -AssemblyName PresentationFramework, PresentationCore, WindowsBase, System.Windows.Forms, System.Drawing   
8:  $ScriptPath = Split-Path -Parent $MyInvocation.MyCommand.Path  
9:  #$AssemblyLocation = Join-Path -Path $ScriptPath -ChildPath Charts  
10:    
11:  $Global:AllChartsPath = $ScriptPath  
12:  [xml]$xaml = @"  
13:    
21:      
22:        
23:        
24:        
25:        
26:        
27:        
28:        
29:        
30:         
31:        
32:        
33:        
34:            
35:        
36:        
37:        
38:        
39:        
40:        
41:        
42:        
43:      
44:    
45:  "@  
46:    
47:  #Read the form  
48:  $Reader = (New-Object System.Xml.XmlNodeReader $xaml)   
49:  $Form = [Windows.Markup.XamlReader]::Load($reader)   
50:    
51:  #AutoFind all controls  
52:  $xaml.SelectNodes("//*[@*[contains(translate(name(.),'n','N'),'Name')]]") | ForEach-Object {   
53:    New-Variable -Name $_.Name -Value $Form.FindName($_.Name) -Force   
54:  }  
55:    
56:  $CornerImaage.Source = "$ScriptPath\PsScripts\corner.png"  
57:    
58:  $HtmlCharts = "$ScriptPath\htmlCharts"  
59:  $Button.Add_Click({  
60:    $Label1.Content = "$((Get-WmiObject Win32_PhysicalMemory -ComputerName $ComputerName.Text | Select-Object -ExpandProperty Capacity | Measure-Object -Sum).Sum / 1GB)" + " GB"  
61:    $Label2.Content = $(Get-WmiObject Win32_Processor -ComputerName $ComputerName.Text).NumberOfLogicalProcessors  
62:    $Label3.Content = "$([System.Math]::Round((get-wmiobject Win32_DiskDrive -ComputerName $ComputerName.Text).size / 1gb))" + " GB"  
63:    $Label4.Content = (Get-WmiObject win32_NetworkAdapter -ComputerName $ComputerName.Text | Where-Object {$_.PhysicalAdapter}).Count  
64:    
65:    $AllProcesses = Get-Process -ComputerName $ComputerName.Text  
66:    $ProcessByCpu = $AllProcesses | Group-object -Property Name  
67:    $Top5ProcessesByCPU = $ProcessByCpu | Select-Object Name, @{N='CpuUsage';E={$_.Group.cpu | Measure-Object -Sum | Select-Object -ExpandProperty Sum}} | Sort-Object -Property CpuUsage -Descending | Select-Object -First 5  
68:    $TopCpuNames = ($Top5ProcessesByCPU.Name | ForEach-Object {"'{0}'" -f $_}) -join ', '  
69:    $TopCpuUsage = ($Top5ProcessesByCPU | Select-Object -ExpandProperty CpuUsage) -join ', '  
70:    & "$ScriptPath\Psscripts\New-LineChart.ps1" -TopCpuNames $TopCpuNames -TopCpuUsage $TopCpuUsage -LegendLabel CpuUsage  
71:    $WebBrowser3.Navigate("file:///$HtmlCharts\Line.html")  
72:    
73:    $Form.Height="620"   
74:    $Form.Width="1016"  
75:    
76:    $ProcessByCount = $AllProcesses| Group-Object -Property Name | Sort-Object -Property Count -Descending | Select-Object -First 5  
77:    $Top5ProcName = ($ProcessByCount.Name | ForEach-Object {"'{0}'" -f $_}) -join ', '  
78:    $Top5ProcCount = ($ProcessByCount | Select-Object -ExpandProperty Count) -join ', '  
79:    & "$ScriptPath\Psscripts\New-BarChart.ps1" -Top5ProcName $Top5ProcName -Top5ProcCount $Top5ProcCount -LegendLabel Count  
80:    $WebBrowser2.Navigate("file:///$HtmlCharts\Bar.html")  
81:    
82:    $AllServices = Get-Service -ComputerName $ComputerName.Text  
83:    $ServicesByCount = $AllServices | Group-Object -Property Status  
84:    $ServicesNames = ($ServicesByCount.Name | ForEach-Object {"'{0}'" -f $_}) -join ', '  
85:    $ServicesStatusCount = ($ServicesByCount | Select-Object -ExpandProperty Count) -join ', '  
86:    & "$ScriptPath\Psscripts\New-DoughnutChart.ps1" -ServicesNames $ServicesNames -ServicesCount $ServicesStatusCount -LegendLabel Status  
87:    $WebBrowser1.Navigate("file:///$HtmlCharts\Doughnut.html")  
88:    
89:  })  
90:    
91:  #Mandetory last line of every script to load form  
92:  [void]$Form.ShowDialog()   
93:    

Below is example of Bar charts script and it creates a html file, I highly recommend you read chart.js documentation, I have intermediate level of knowledge on it but everything is written and build reading docs only, and nothing else, I found them very easy, Chart scripts folder location is .\PSscripts. Below data fields are used to fill up data from earlier script as shown above.

   labels:[$Top5ProcName],  
     datasets:[{  
      label: `"$LegendLabel`" ,  
      data:[$Top5ProcCount],  

For each different chart I have a separate script, And I wrote it like that way so each chart I can modify easily disturbing other file. The given charts are very basic charts and there few more different charts available as per your need, you just have to add few information.

1:  [CmdletBinding(SupportsShouldProcess=$True,  
2:    ConfirmImpact='Medium',  
3:    HelpURI='http://vcloud-lab.com')]  
4:  Param  
5:  (  
6:    [parameter(Position=0, Mandatory=$true, ValueFromPipelineByPropertyName=$true)]  
7:    [string]$Top5ProcName,  
8:    [parameter(Position=1, Mandatory=$true, ValueFromPipelineByPropertyName=$true)]  
9:    [string]$Top5ProcCount,  
10:    [parameter(Position=2, Mandatory=$true, ValueFromPipeline=$true)]  
11:    [string]$LegendLabel  
12:  )  
13:    
14:  $Chart = @"  
15:    
16:    
17:    
18:     
19:     
20:     
21:     
22:     
23:     
24:     
25:   Bar Chart  
26:    
27:    
28:   
29: 30:
31: 32: 109: 110: 111: "@ 112: 113: $Chart | Out-File -FilePath $Global:AllChartsPath\HtmlCharts\Bar.html 114: #Invoke-Expression C:\temp\test.html

Download these complete script here, This is also available on github.com.

Useful Articles
Part 1: Create WPF XAML powershell GUI form with Visual studio
Part 2: Powershell and WPF: Build GUI applications tutorial
Part 3: Create shorter Microsoft Powershell WPF automated clean script
Powershell PoshGUI: Convert user to SID and vice versa using
Microsoft Powershell GUI: Change Internet Options connections Lan settings proxy server grayed out



This post first appeared on Tales From Real IT System Administrators World And Non-production Environment, please read the originial post: here

Share the post

Powershell WPF Charts dashboard demo

×

Subscribe to Tales From Real It System Administrators World And Non-production Environment

Get updates delivered right to your inbox!

Thank you for your subscription

×