2021-06-25 08:14:06 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>My first Chartist Tests</title>
|
|
|
|
|
<link rel="stylesheet" href="chartist.min.css.gz">
|
|
|
|
|
<style>
|
|
|
|
|
.ct-chart{
|
|
|
|
|
width: 90%;
|
|
|
|
|
height: 300px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
2021-06-27 20:44:38 +02:00
|
|
|
<body>
|
|
|
|
|
<h1> Weekly </h1>
|
|
|
|
|
<div class="ct-chart chart1"></div>
|
|
|
|
|
<h1> Monthly </h1>
|
|
|
|
|
<div class="ct-chart chart2"></div>
|
|
|
|
|
<script >
|
2021-06-30 11:20:20 +02:00
|
|
|
var chart;
|
2021-06-28 10:29:15 +02:00
|
|
|
function load_chart( url , clazz ){
|
2021-06-27 20:44:38 +02:00
|
|
|
var xhttp = new XMLHttpRequest();
|
|
|
|
|
xhttp.onreadystatechange = function() {
|
|
|
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
|
|
|
console.log(this.responseText);
|
2021-06-28 10:29:15 +02:00
|
|
|
var series = JSON.parse(this.responseText);
|
|
|
|
|
var data = { series: series };
|
2021-06-30 11:20:20 +02:00
|
|
|
chart = new Chartist.Line(clazz, data , {high: 30 , low: -25});
|
2021-06-27 20:44:38 +02:00
|
|
|
}
|
|
|
|
|
}
|
2021-06-28 10:29:15 +02:00
|
|
|
xhttp.open("GET", url, true);
|
2021-06-27 20:44:38 +02:00
|
|
|
xhttp.send();
|
|
|
|
|
};
|
2021-06-28 10:29:15 +02:00
|
|
|
function load_charts(){
|
|
|
|
|
load_chart("/weekly" , ".chart1");
|
|
|
|
|
load_chart("/monthly" , ".chart2");
|
|
|
|
|
}
|
2021-07-01 22:46:32 +02:00
|
|
|
if (!!window.EventSource) {
|
|
|
|
|
var source = new EventSource('/events');
|
|
|
|
|
|
|
|
|
|
source.addEventListener('open', function(e) {
|
|
|
|
|
console.log("Events Connected");
|
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
source.addEventListener('error', function(e) {
|
|
|
|
|
if (e.target.readyState != EventSource.OPEN) {
|
|
|
|
|
console.log("Events Disconnected");
|
|
|
|
|
}
|
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
source.addEventListener('message', function(e) {
|
|
|
|
|
console.log("message", e.data);
|
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
source.addEventListener('myevent', function(e) {
|
|
|
|
|
console.log("myevent", e.data);
|
|
|
|
|
}, false);
|
|
|
|
|
}
|
2021-06-27 20:44:38 +02:00
|
|
|
</script>
|
|
|
|
|
<script onload="load_charts();" src="/chartist.min.js.gz"> </script>
|
2021-06-25 08:14:06 +02:00
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
