PowerShellPSHTML

PSHTML now supports charts – Version 0.7.0

In my last blog post I shared the upcoming feature of PSHTML which is Charts – Stéphane van Gulick has done an impressive work – All his effort made our job easy. Yes, now I can do chart in Polaris or in node.js in PowerShell way. This blog post is to share the snippet for using PSHTML in node.js to demo two charts which are Bar and Doughnut.

Output for your reference

I am great fan of PSHTML module and I demoed its salient features at my workplace as well as in PowerShell community. Follow me on twitter to get more use cases.

All node.js lovers – See here, I am using only express package – charts comes from PSHTML module.

{
  "name": "ipshtmlcharts",
  "version": "1.0.0",
  "description": "A demo web application to explore PSHTML charts in node.js",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Chendrayan Venkatesan (Chen V)",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.4"
  }
}

That’s amazing right? Yes, I reduced loads of dependent files in my solution. Which is indeed a good benefit for me.

The below code is my server.js which is my main file

var express = require('express');
var app = express();
var spawn = require('child_process').spawn;
app.use(express.static('assets'))

app.get("/", function (_request, response) {
    response.send('Hello World!')
})

app.get("/iBarChart", function (_request, response) {
    var child = spawn('powershell.exe', ["C:\\Projects\\iPSHTMLCharts\\scripts\\iBarChart.ps1"]);
    child.stdout.on('data', function (data) {
        var result = data.toString()
        response.send(result)
    })
})

app.get("/iDoughnutChart", function (_request, response) {
    var child = spawn('powershell.exe', ["C:\\Projects\\iPSHTMLCharts\\scripts\\iDoughnutChart.ps1"]);
    child.stdout.on('data', function (data) {
        var result = data.toString()
        response.send(result)
    })
})

app.listen(3000)
console.log('Application is started on port 3000...')

If you are all set – You see the charts rendering in your browser. Yes, you are correct the data source is from PowerShell – It can be anything you could think of. In my case it’s simple file and folder start. Here is the PowerShell code for the routes.

Bar Chart

import-module PSHTML
$BarCanvasID = "barcanvas"
$HTMLPage = html { 
    head {
        title 'Bar Chart'
        Link -rel 'stylesheet' -href "mystyle.css" -type 'text/css'
    }
    body {

        h1 "PSHTML Graph"

        div {

            p {
                "This is a bar graph"
            }
            canvas -Height 400px -Width 400px -Id $BarCanvasID {

            }

        }

        script -src "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" -type "text/javascript"

        script -content {


            $Data3 = @([System.IO.Directory]::GetDirectories("C:\Temp").Length , [System.IO.Directory]::GetFiles("C:\Temp").Length)
            $Labels = @('Folders' , 'Files')

            $dsb3 = New-PSHTMLChartBarDataSet -Data $data3 -label "2018" -BackgroundColor ([Color]::blue )

            New-PSHTMLChart -type bar -DataSet $dsb3 -title "Bar Chart Example" -Labels $Labels -CanvasID $BarCanvasID

        }

    }
}

$HTMLPage 
#$OutPath = "$Home\BarChart1.html"
#$HTMLPage | out-file -FilePath $OutPath -Encoding utf8
#start $outpath

Doughnut Chart

import-module PSHTML -force

$DoughnutCanvasID = "doughnutcanvas"
$HTMLPage = html { 
    head {
        title 'Chart JS Demonstration'
        Link -href "./../assets/mystyle.css" -type "text/css" -rel stylesheet
    }
    body {

        h1 "PSHTML Chart"

        div {


            p {
                "This is a Doughnut graph"
            }
            canvas -Height 400px -Width 400px -Id $DoughnutCanvasID {

            }
       }

         script -src "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" -type "text/javascript"


        script -content {

            $Data1 = @([System.IO.Directory]::GetDirectories("C:\Temp").Length , [System.IO.Directory]::GetFiles("C:\Temp").Length)


            $colors = @("LightGreen","Red")
            $dsd1 = New-PSHTMLChartDoughnutDataSet -Data $data1 -label "March" -backgroundcolor $colors -hoverbackgroundColor $Colors
            New-PSHTMLChart -type doughnut -DataSet @($dsd1) -title "Doughnut Chart v2" -Labels $Labels -CanvasID $DoughnutCanvasID
        }


    } -style "font-family:candara"
}


<#$OutPath = "$Home\BasicDoughnutChart.html"
$HTMLPage | out-file -FilePath $OutPath -Encoding utf8
start $outpath#>
$HTMLPage

Leave a Reply

Your e-mail address will not be published. Required fields are marked *