Examples/Charts/Chart04/4Charts.ps1

<# $Searcher = New-Object -ComObject Microsoft.Update.Searcher;
        $Searcher.GetTotalHistoryCount()
        $AllUpdatesInstalled = $Searcher.GetTotalHistoryCount()
        $Updates = $Searcher.QueryHistory(0,$AllUpdatesInstalled)
        #>

import-module C:\Users\taavast3\OneDrive\Repo\Projects\OpenSource\PSHTML\PSHTML\PSHTML.psd1 -force
#. "C:\Users\taavast3\OneDrive\Repo\Projects\OpenSource\PSHTML\PSHTML\Examples\Charts\Chart04\Chart.ps1"

$BarCanvasID = "barcanvas"
$PieCanvasID = "piecanvas"
$lineCanvasID = "linecanvas"
$DoughnutCanvasID = "doughnutcanvas"
$HTMLPage = html { 
    head {
        title 'Chart JS Demonstration'
        
    }
    body {
        
        h1 "PSHTML Graph"

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

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

            p {
                "This is a Line graph"
            }
            canvas -Height 400px -Width 400px -Id $LineCanvasID {
    
            }
            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 = @(34,7,11,19)
            $Data2 = @(40,2,13,17)
            $Data3 = @(53,0,0,4)
            $Labels = @("Closed","Unresolved","Pending","Open")

        
            $dsb1 = New-PSHTMLChartBarDataSet -Data $data1 -label "March" -BackgroundColor ([Color]::Orange)
            $dsb2 = New-PSHTMLChartBarDataSet -Data $data2 -label "April" -BackgroundColor ([Color]::red)
            $dsb3 = New-PSHTMLChartBarDataSet -Data $data3 -label "Mai" -BackgroundColor ([Color]::Green )

            New-PSHTMLChart -type bar -DataSet $dsb1,$dsb2,$dsb3 -title "Bar Chart v2" -Labels $Labels -CanvasID $BarCanvasID
      
            $red = [Color]::red
            $dsl1 = New-PSHTMLChartLineDataSet -lineColor "cyan" -Data $data1 -label "March" 

            $dsl2 = New-PSHTMLChartLineDataSet -Data $data2 -label "April" -LineColor ([Color]::Orange )
            $dsl3 = New-PSHTMLChartLineDataSet -Data $data3 -label "Mai" -LineColor ([Color]::Green)
            #@($dsl1,$dsl2,$dsl3)
            
            
            New-PSHTMLChart -type Line -DataSet @($dsl1,$dsl2,$dsl3) -title "Line Chart v2" -Labels $Labels -CanvasID $lineCanvasID 

            #>
            $colors = @("yellow","red","green","orange")
            $dsp1 = New-PSHTMLChartPieDataSet -Data $data1 -label "March" -BackgroundColor $colors
            #$dsp2 = New-PSHTMLChartPieDataSet -Data $data2 -label "April" -BackgroundColor ([Color]::red )
            #$dsp3 = New-PSHTMLChartPieDataSet -Data $data3 -label "Mai" -BackgroundColor ([Color]::Green )

            New-PSHTMLChart -type pie -DataSet $dsp1 -title "Pie Chart v2" -Labels $Labels -CanvasID $PieCanvasID 

           

            $colors = @("yellow","red","green","orange")
            $dsd1 = New-PSHTMLChartDoughnutDataSet -Data $data1 -label "March" -backgroundcolor $colors -hoverbackgroundColor $Colors
            $dsd2 = New-PSHTMLChartDoughnutDataSet -Data $data2 -label "April" -BackgroundColor ([Color]::red)
            $dsd3 = New-PSHTMLChartDoughnutDataSet -Data $data3 -label "Mai" -BackgroundColor ([Color]::Green )


            New-PSHTMLChart -type doughnut -DataSet @($dsd1) -title "Doughnut Chart v2" -Labels $Labels -CanvasID $DoughnutCanvasID
 
            
        }

         
    }
}


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