PingMon/javascript.rb at master · biggz/PingMon · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
def print_graph
	graph = "
var bAutoRefresh = true;
$(function () {
    var chart;

    $(document).ready(function() {
        //Disable auto refresh on left mouse click on graph
        $('#container').mousedown(function() {
            bAutoRefresh = false;
        });
        //Enable auto refresh on left mouse click on Zoom button
        $('resetZoomButton').mousedown(function() {
            bAutoRefresh = true;
        });

        //Create chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'areaspline',
                animation: false,
                zoomType: 'x',
                events: {
                    load: function() {
                        // set up the updating of the chart every 5 seconds
                        setInterval(function() {
                            var date_obj = new Date;
                            $.getJSON('data.json?' + date_obj.getTime(), function(data) {
                                if (bAutoRefresh){
                                    chart.series[0].setData(data);
                                };
                            });
                        }, 5000);
                    }
                }
            },
            credits: { enabled: false},
            plotOptions: {
                series: {
                  animation: false,
                  lineWidth: 2,
                  shadow: false,
                  stickyTracking: false,
                },
                spline: {
                  marker: {
                    enabled: true,
                    fillColor: '#535353',
                    lineColor: null,
                    lineWidth: 2,
                    radius: 3,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                  }
                },
                areaspline: {
                    marker: {
                    enabled: true,
                    fillColor: '#535353',
                    lineColor: null,
                    lineWidth: 2,
                    radius: 3,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                  }
                },
            },
            title: {
                text: '#{@@host}'
            },
            xAxis: {
                type: 'datetime',
                maxZoom: 60000 , // 1 Minute
                dateTimeLabelFormats: { // don't display the dummy year
                    second: '%H:%M:%S',
                    minute: '%H:%M',
                    hour: '%H:%M',
                    day: '%e of %b',
                    week: '%e. %b',
                }
            },
            yAxis: {
                title: {
                    text: '(ms)'
                },
                min: 0
            },
            tooltip: {
                formatter: function() {
                        return '<b>'+ this.y +'ms</b><br/>'+
                        Highcharts.dateFormat('%a %d %b<br/>%H:%M:%S', this.x);
                }
            },
            series: [{
                name: 'Ping (ms)',
                color: '#89A54E',
                data: #{@@data}

            }]
        });
    });
});"
	return graph
end