74 lines
2.1 KiB
HTML
74 lines
2.1 KiB
HTML
<%frame "frame.html"%>
|
|
|
|
<h1>Checks</h1>
|
|
|
|
<div class="flex row">
|
|
<div>
|
|
<select size="25" id="perfList"></select>
|
|
</div>
|
|
<div>
|
|
<canvas id="perfChart" width="1000" height="500"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
moment.defaultFormat = "DD.MM.YYYY HH:mm";
|
|
|
|
var chartCTX = $("#perfChart");
|
|
var chart = new Chart( chartCTX, {
|
|
type: 'bar',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: "-",
|
|
data: []
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'time',
|
|
time: {
|
|
unit: "minute",
|
|
tooltipFormat: "DD.MM.YYYY HH:mm",
|
|
displayFormats: {
|
|
minute: "DD.MM.YYYY HH:mm"
|
|
},
|
|
parser: moment.unix
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
} );
|
|
|
|
function drawChart(perfValues)
|
|
{
|
|
}
|
|
|
|
var perfList = skyapi().getJson("api/checker/checks", function(checks){
|
|
$.each( checks, function(){
|
|
$("#perfList").append( $( "<option value='"+ this +"'>" + this + "</option>" ) );
|
|
});
|
|
});
|
|
|
|
$("#perfList").change( function(e){
|
|
var perfName = $(this).children("option:selected").val();
|
|
skyapi().getJson("api/checker/checks/" + perfName, function(perfValues){
|
|
chart.data.labels.length = 0;
|
|
chart.data.datasets[0].data.length = 0;
|
|
chart.data.datasets[0].label = perfName;
|
|
$.each( perfValues, function(){
|
|
if (this.TimeStamp != 0)
|
|
{
|
|
//chart.data.labels.push(this.TimeStamp);
|
|
chart.data.datasets[0].data.push( { x: this.TimeStamp, y: this.Value } );
|
|
};
|
|
});
|
|
|
|
chart.update();
|
|
});
|
|
});
|
|
|
|
</script>
|