← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to timeline/examples/dynamic-update/index.htm

  • Committer: Jeff Stys
  • Date: 2014-04-21 12:46:26 UTC
  • Revision ID: jstys@sesda3.com-20140421124626-2332pb2dyjc33jxi
Proof-of-concept version of Data Coverage Timeline using Highchart/Highstock javascript library.  Changes to getDataCoverage API in order to feed the necessary data to the Timeline

Show diffs side-by-side

added added

removed removed

Lines of Context:
timeline/examples/dynamic-update/index.htm
 
1
<!DOCTYPE HTML>
 
2
<html>
 
3
        <head>
 
4
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
5
                <title>Highstock Example</title>
 
6
 
 
7
                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 
8
                <script type="text/javascript">
 
9
$(function() {
 
10
        
 
11
        Highcharts.setOptions({
 
12
                global : {
 
13
                        useUTC : false
 
14
                }
 
15
        });
 
16
        
 
17
        // Create the chart
 
18
        $('#container').highcharts('StockChart', {
 
19
                chart : {
 
20
                        events : {
 
21
                                load : function() {
 
22
 
 
23
                                        // set up the updating of the chart each second
 
24
                                        var series = this.series[0];
 
25
                                        setInterval(function() {
 
26
                                                var x = (new Date()).getTime(), // current time
 
27
                                                y = Math.round(Math.random() * 100);
 
28
                                                series.addPoint([x, y], true, true);
 
29
                                        }, 1000);
 
30
                                }
 
31
                        }
 
32
                },
 
33
                
 
34
                rangeSelector: {
 
35
                        buttons: [{
 
36
                                count: 1,
 
37
                                type: 'minute',
 
38
                                text: '1M'
 
39
                        }, {
 
40
                                count: 5,
 
41
                                type: 'minute',
 
42
                                text: '5M'
 
43
                        }, {
 
44
                                type: 'all',
 
45
                                text: 'All'
 
46
                        }],
 
47
                        inputEnabled: false,
 
48
                        selected: 0
 
49
                },
 
50
                
 
51
                title : {
 
52
                        text : 'Live random data'
 
53
                },
 
54
                
 
55
                exporting: {
 
56
                        enabled: false
 
57
                },
 
58
                
 
59
                series : [{
 
60
                        name : 'Random data',
 
61
                        data : (function() {
 
62
                                // generate an array of random data
 
63
                                var data = [], time = (new Date()).getTime(), i;
 
64
 
 
65
                                for( i = -999; i <= 0; i++) {
 
66
                                        data.push([
 
67
                                                time + i * 1000,
 
68
                                                Math.round(Math.random() * 100)
 
69
                                        ]);
 
70
                                }
 
71
                                return data;
 
72
                        })()
 
73
                }]
 
74
        });
 
75
 
 
76
});
 
77
 
 
78
                </script>
 
79
        </head>
 
80
        <body>
 
81
<script src="../../js/highstock.js"></script>
 
82
<script src="../../js/modules/exporting.js"></script>
 
83
 
 
84
<div id="container" style="height: 500px; min-width: 500px"></div>
 
85
        </body>
 
86
</html>