-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
recieve.csv.html
103 lines (83 loc) · 2.86 KB
/
recieve.csv.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<html>
<head>
<meta charset='UTF-8'>
<title>CSV To Chart javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
width: 100%;
height: 100%;
}
</style>
<script src="http://www.amcharts.com/lib/4/core.js"></script>
<script src="http://www.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/themes/animated.js"></script>
</head>
<body>
takes some time to load CSV <br>
<div id="chartdiv"></div>
<script>
/**
* ---------------------------------------
* This demo was created using amCharts 4.
*
* For more information visit:
* https://www.amcharts.com/
*
* Documentation is available at:
* https://www.amcharts.com/docs/v4/
* ---------------------------------------
*/
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Set up data source
chart.dataSource.url = "https://raw.githubusercontent.com/ldijkman/Arduino_Plant_Watering_System/main/CSV_received.CSV";
chart.dataSource.parser = new am4core.CSVParser();
chart.dataSource.parser.options.useColumnNames = true;
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "time";
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series1 = chart.series.push(new am4charts.LineSeries());
series1.dataFields.valueY = "ValveStatus";
series1.dataFields.categoryX = "time";
series1.name = "ValveStatus";
series1.strokeWidth = 1;
series1.tensionX = 0.7;
series1.bullets.push(new am4charts.CircleBullet());
series1.tooltipText = "{name}: [b]{ValveStatus}[/]";
var series2 = chart.series.push(new am4charts.LineSeries());
series2.dataFields.valueY = "watergifttimer";
series2.dataFields.categoryX = "time";
series2.name = "watergifttimer";
series2.strokeWidth = 1;
series2.tensionX = 12.7;
series2.bullets.push(new am4charts.CircleBullet());
series2.tooltipText = "{name}: [b]{watergifttimer}[/]";
var series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "pauzetimer";
series3.dataFields.categoryX = "time";
series3.name = "pauzetimer";
series3.strokeWidth = 1;
series3.tensionX = 0.7;
series3.bullets.push(new am4charts.CircleBullet());
series3.tooltipText = "{name}: [b]{pauzetimer}[/]";
var series4 = chart.series.push(new am4charts.LineSeries());
series4.dataFields.valueY = "jobcounter";
series4.dataFields.categoryX = "time";
series4.name = "jobcounter";
series4.strokeWidth = 1;
series4.tensionX = 0.7;
series4.bullets.push(new am4charts.CircleBullet());
series4.tooltipText = "{name}: [b]{jobcounter}[/]";
// Add legend
chart.legend = new am4charts.Legend();
chart.cursor = new am4charts.XYCursor();
</script>
</body>
</html>