Generate interactive line graphics, pie charts and much more with IE and chart.js

[qsek 19]

Just wanted to share a quick proof of concept with some performance testing.

GraphGDIPlus lacked performance and interactivity for me so i searched new way to generate graphs.

Potential is huge especially when you consider using d3.js instead of chart.js

 

 

expandcollapse popup

#include <WindowsConstants.au3>
#include <GUIConstantsEx.au3>
#include <Array.au3>
#include <File.au3>
#include <Date.au3>
#include <IE.au3>


Opt("GuiOnEventMode", 1)

$oIE = ObjCreate("Shell.Explorer.2")
$Form1 = GUICreate("Embedded Web control Test", 1140, 380, _
        (@DesktopWidth - 1140) / 2, (@DesktopHeight - 380) / 2, _
        $WS_OVERLAPPEDWINDOW + $WS_CLIPSIBLINGS + $WS_CLIPCHILDREN)

GUICtrlCreateObj($oIE, 10, 10, 1120, 360)
GUICtrlSetResizing ( -1, 1 )
GUISetOnEvent(-3, "_MyExit", $Form1)
GUISetState()

Func _MyExit()
    Exit
EndFunc


ConsoleWrite("generating dataset..." & @CRLF)
; generate a 5k line dataset
;   string
$datastr = ""
For $i = 0 To 2000
    $date = _DateAdd("n", $i, "2021/02/14 00:00:00")
    $datastr &= $date&","&Random(1,500,1)& @CRLF
next
$datastr = StringTrimRight($datastr, 2)
;   array
Dim $dataarr[0][2]
_ArrayAdd ( $dataarr, $datastr, 0, ",", @CRLF)
ConsoleWrite("finished." & @CRLF& @CRLF)


$oIE.navigate( "about:blank")

$html = ""
Sethtml()
_IEDocWriteHTML($oIE, $html)

_IEAction ( $oIE, "refresh" )


_IELoadWait($oIE)

;~ ; watch your variable/function case with that notation!
$ohJS = $oIE.document.parentwindow.JSglobal

;~ ; need to eval [0], javascript arrays are not compatible with autoit arrays or object collections
$dset = $ohJS.eval("myChart.data.datasets[0]")


$dset.label = "Test1: init dataset with jsvariable.push()"
$ohJS.myChart.update()

ConsoleWrite("Test1: init dataset with jsvariable.push()"& @CRLF)
$ti = TimerInit()
; Test1
$glabels = $ohJS.myChart.data.labels
For $i = 0 To UBound($dataarr)-1
    If Mod($i,1000) = 0 then ConsoleWrite($i & @CRLF)
    $glabels.push($dataarr[$i][0])
    $dset.data.push($dataarr[$i][1])
next
$ohJS.myChart.update()

ConsoleWrite("Test1: "&Round(TimerDiff($ti),1)&" ms"& @CRLF)
Sleep(2000)
$ohJS.GraphClearData()
Sleep(1000)

ConsoleWrite("Test2: init dataset with passing datastring to js function"& @CRLF)
$ti = TimerInit()
; Test2
$ohJS.InitGraphWithData($datastr)
$ohJS.myChart.update()

ConsoleWrite("Test2: "&Round(TimerDiff($ti),1)&" ms"& @CRLF)
Sleep(2000)
$ohJS.GraphClearData()


$dset.label = "Test3: add data with jsvariable.push()"
$ohJS.myChart.update()
ConsoleWrite("Test3: add data with jsvariable.push()"& @CRLF)
$ti = TimerInit()
; Test3
$glabels = $ohJS.myChart.data.labels
For $i = 0 To 500
    If Mod($i,100) = 0 then $dset.label = "Test3: add data with jsvariable.push() ("&$i&"/500)"
    $date = _DateAdd("n", $i, "2021/02/14 00:00:00")
    $glabels.push($date)
    $dset.data.push(Random(1,500+$i,1))
    $ohJS.myChart.update()
Next

ConsoleWrite("Test3: "&Round(TimerDiff($ti),1)&" ms"& @CRLF)

$ohJS.GraphClearData()



ConsoleWrite("Test4: add data with passing datastring to js function" & @CRLF)
$ti = TimerInit()
; Test4
For $i = 0 To 500
    If Mod($i,100) = 0 then $dset.label = "Test4: add data with passing datastring to js function ("&$i&"/500)"
    $date = _DateAdd("n", $i, "2021/02/14 00:00:00")
    $ohJS.GraphAddData($date&","&Random(1,500+$i,1))
    If Mod($i,100) = 0 then $dset.label = "Test4: add data with passing datastring to js function ("&$i&"/500)"
Next

ConsoleWrite("Test4: "&Round(TimerDiff($ti),1)&" ms"& @CRLF)
ConsoleWrite("testing ended" & @CRLF)

$dset.label = "You can click on points"
$ohJS.myChart.update()

While 1
    For $i = 0 To $ohJS.clickedPoints.length -1
        $label = $ohJS.eval("myChart.data.labels[clickedPoints["&$i&"]._index].format('YYYY/MM/DD hh:mm:ss');")
        $value = $ohJS.eval("myChart.data.datasets[clickedPoints["&$i&"]._datasetIndex].data[clickedPoints["&$i&"]._index];")
        ConsoleWrite("You clicked at " & $label & ", "&$value & @CRLF)
    Next
    $ohJS.clickedPoints = ""

    Sleep(10)
WEnd

exit





Func Sethtml()

$html = "<!DOCTYPE html>" & @CRLF & _
"<html lang='en'>" & @CRLF & _
"" & @CRLF & _
"<head>" & @CRLF & _
"    <meta charset='UTF-8'>" & @CRLF & _
"   <meta http-equiv='X-UA-Compatible' content='IE=edge' >" & @CRLF & _
"    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>" & @CRLF & _
"    <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js'></script>" & @CRLF & _
"    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js'></script>" & @CRLF & _
"    <title>My Chart</title>" & @CRLF & _
"</head>" & @CRLF & _
"" & @CRLF & _
"<body>" & @CRLF & _
"    <div class='container'> <canvas id='myChart' width='100' height='30'></canvas></div>" & @CRLF & _
"" & @CRLF & _
"    <script>" & @CRLF & _
"       var JSglobal = (1,eval)('this');" & @CRLF & _
"       var au3data = ['test','123'];" & @CRLF & _
"       var clickedPoints = '';" & @CRLF & _
"        Chart.defaults.global.animation.duration = 0;" & @CRLF & _
"       Chart.defaults.global.hover.animationDuration = 0;" & @CRLF & _
"        Chart.defaults.global.animation.easing = 'linear';" & @CRLF & _
"        Chart.defaults.global.elements.line.tension = 0;" & @CRLF & _
"        Chart.defaults.global.elements.line.backgroundColor = 'rgba(255, 99, 132, 0.2)';" & @CRLF & _
"        Chart.defaults.global.elements.line.borderColor = 'rgba(255, 99, 132, 1)';" & @CRLF & _
"" & @CRLF & _
"       Chart.defaults.global.responsiveAnimationDuration = 0;" & @CRLF & _
"        //Chart.defaults.line.showLines = false;" & @CRLF & _
"        Chart.defaults.line.spanGaps = false;" & @CRLF & _
"" & @CRLF & _
"       function GraphClearData() {" & @CRLF & _
"           myChart.data.datasets[0].data = [];" & @CRLF & _
"            myChart.data.labels = [];" & @CRLF & _
"           myChart.update(0);" & @CRLF & _
"       }" & @CRLF & _
"" & @CRLF & _
"       function InitGraphWithData(datastring, rowdelim, coldelim) {" & @CRLF & _
"           rowdelim = typeof rowdelim !== 'undefined' ? rowdelim : '\n';" & @CRLF & _
"           coldelim = typeof coldelim !== 'undefined' ? coldelim : ',';" & @CRLF & _
"           GraphClearData();" & @CRLF & _
"" & @CRLF & _
"           var allLinesArray = datastring.split('\n');" & @CRLF & _
"           if (allLinesArray.length > 0) {" & @CRLF & _
"               for (var i = 0; i < allLinesArray.length; i++) {" & @CRLF & _
"                   var rowData = allLinesArray[i].split(',');" & @CRLF & _
"                   if (rowData[0] != '') {" & @CRLF & _
"                       myChart.data.labels.push(moment(rowData[0], 'YYYY/MM/DD hh:mm:ss'));" & @CRLF & _
"                       myChart.data.datasets[0].data.push(rowData[1]);" & @CRLF & _
"                   }" & @CRLF & _
"               }" & @CRLF & _
"           }" & @CRLF & _
"           myChart.update();" & @CRLF & _
"       }" & @CRLF & _
"" & @CRLF & _
"" & @CRLF & _
"       function GraphAddData(datastring, rowdelim, coldelim) {" & @CRLF & _
"           rowdelim = typeof rowdelim !== 'undefined' ? rowdelim : '\n';" & @CRLF & _
"           coldelim = typeof coldelim !== 'undefined' ? coldelim : ',';" & @CRLF & _
"" & @CRLF & _
"           var allLinesArray = datastring.split('\n');" & @CRLF & _
"           if (allLinesArray.length > 0) {" & @CRLF & _
"               for (var i = 0; i < allLinesArray.length; i++) {" & @CRLF & _
"                   var rowData = allLinesArray[i].split(',');" & @CRLF & _
"                   if (rowData[0] != '') {" & @CRLF & _
"                       //alert('adding '+rowData[0]+', '+rowData[1]);" & @CRLF & _
"                       myChart.data.labels.push(moment(rowData[0], 'YYYY/MM/DD hh:mm:ss'));" & @CRLF & _
"                       myChart.data.datasets[0].data.push(rowData[1]);" & @CRLF & _
"                   }" & @CRLF & _
"               }" & @CRLF & _
"           }" & @CRLF & _
"           myChart.update();" & @CRLF & _
"       }" & @CRLF & _
"" & @CRLF & _
"        var ctx = document.getElementById('myChart').getContext('2d');" & @CRLF & _
"" & @CRLF & _
"       document.getElementById('myChart').onclick = function(evt) {" & @CRLF & _
"           clickedPoints = myChart.getElementsAtEvent(evt);" & @CRLF & _
"       };" & @CRLF & _
"" & @CRLF & _
"        var myChart = new Chart(ctx, {" & @CRLF & _
"            type: 'line'," & @CRLF & _
"            data: {" & @CRLF & _
"                datasets: [{" & @CRLF & _
"                    label: ''," & @CRLF & _
"                }]" & @CRLF & _
"            }," & @CRLF & _
"            options: {" & @CRLF & _
"                responsive: 'true'," & @CRLF & _
"                scales: {" & @CRLF & _
"                    xAxes: [{" & @CRLF & _
"                        type: 'time'," & @CRLF & _
"                        time: {" & @CRLF & _
"                            displayFormats: {" & @CRLF & _
"                                minute: 'DD.MMM H:m'" & @CRLF & _
"                            }" & @CRLF & _
"                        }," & @CRLF & _
"                        distribution: 'linear'," & @CRLF & _
"                        ticks: {" & @CRLF & _
"                            source: 'auto'" & @CRLF & _
"                        }," & @CRLF & _
"                        bounds: 'bounds'" & @CRLF & _
"                    }]" & @CRLF & _
"                }" & @CRLF & _
"            }" & @CRLF & _
"        });" & @CRLF & _
"" & @CRLF & _
"       myChart.update();" & @CRLF & _
"" & @CRLF & _
"        <!-- setInterval(function() { -->" & @CRLF & _
"            <!-- updateChart() -->" & @CRLF & _
"        <!-- }, 5000); -->" & @CRLF & _
"    </script>" & @CRLF & _
"</body>" & @CRLF & _
"" & @CRLF & _
"</html>" & @CRLF

EndFunc

 

Edited February 17, 2021 by qsek