LightSystem/highchart.html at master · codingXiang/LightSystem · GitHub

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
<html>
  <head>
    <title>Light Value</title>
    <meta name = "viewport" content = "width=device-width, initial-scale = 1">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <!-- JQuery -->
    <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- HighChart -->
    <script src = "http://code.highcharts.com/stock/highstock.js"></script>
    <script src = "http://code.highcharts.com/stock/modules/exporting.js"></script>

    <script language = "javascript">
      function initialize(){
        var param = location.search.split("?");
        console.log(decodeURI(param[1]))
        $.ajax({
          type: 'GET',
          url : 'database.php',
          data: decodeURI(param[1]),
          dataType: 'json',
          success : getDataSuccess
        });
      }
      function getDataSuccess(data){
        console.log(data)
        console.log(" light value = " + data[0][2] + " , location name = " + data[0][3])
        $("#con").empty();
        var val = []; // 存放光敏電阻值
        var stime = [];
        var dataNum = data.length;
        for (var i = 0 ; i < dataNum ; i++){
          val.push(parseInt(data[i][2]));
          stime.push(data[i][1].toString());
        }
        var ads = data[0][3].toString()
        console.log(stime)
        Highcharts.chart('con', {
            title: {
                text: "光度變化",
            },
            subtitle: {
                text: ads,
            },
            scrollbar : {
               enabled : true
            },
            chart : {
               type: 'spline',
               zoomType : 'x'
            },
            xAxis : {
               tickInteral : 1,
               labels : {
                  enabled : true,
                  formatter : function(){
                     return stime[this.value];
                  }
               }
            },
            yAxis: {
                title: {
                    text: 'light Value'
                },
            },
            tooltip : {
                formatter : function(){
                   return '<b>' + stime[this.x] + '</b><br><li>' + this.series.name + ": <b>" + this.y + '</b></li>';
                }
            },
            series: [
              {
                  name: ads,
                  data: val
              }
            ],
            plotOptions: {
                spline : {
                    lineWidth : 3,
                    states : {
                        hover : {
                            lineWidth : 5
                        }
                    },
                },
                marker : {
                   enables : true
                }
            }
        });
      }
      initialize();
    </script>
  </head>
  <body>
    <div id = "con"></div>
  </bodu>
</html>