← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to timeline/coverage/compare/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/coverage/compare/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
        var seriesOptions = [],
 
11
                yAxisOptions = [],
 
12
                seriesCounter = 0,
 
13
                names = [14, 13, 12, 11, 10],
 
14
                colors = Highcharts.getOptions().colors;
 
15
 
 
16
        $.each(names, function(i, name) {
 
17
 
 
18
                $.getJSON('http://dev4.helioviewer.org/timeline/'+ name +'.txt',        function(data) {
 
19
 
 
20
                        seriesOptions[i] = {
 
21
                                name: name,
 
22
                                data: data,
 
23
                        step: true
 
24
                        };
 
25
 
 
26
                        // As we're loading the data asynchronously, we don't know what order it will arrive. So
 
27
                        // we keep a counter and create the chart when all the data is loaded.
 
28
                        seriesCounter++;
 
29
 
 
30
                        if (seriesCounter == names.length) {
 
31
                                createChart();
 
32
                        }
 
33
                });
 
34
        });
 
35
 
 
36
 
 
37
 
 
38
        // create the chart when all data is loaded
 
39
        function createChart() {
 
40
 
 
41
                $('#container').highcharts('StockChart', {
 
42
                    chart: {
 
43
                    },
 
44
 
 
45
                    rangeSelector: {
 
46
                        selected: 3
 
47
                    },
 
48
 
 
49
                    yAxis: {
 
50
                        labels: {
 
51
 
 
52
                        },
 
53
                        plotLines: [{
 
54
                                value: 0,
 
55
                                width: 1,
 
56
                                color: 'silver'
 
57
                        }]
 
58
                    },
 
59
 
 
60
                    plotOptions: {
 
61
 
 
62
                    },
 
63
 
 
64
                    tooltip: {
 
65
                        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
 
66
                        valueDecimals: 0
 
67
                    },
 
68
 
 
69
                    series: seriesOptions
 
70
                });
 
71
        }
 
72
 
 
73
});
 
74
                </script>
 
75
        </head>
 
76
        <body>
 
77
<script src="../../js/highstock.js"></script>
 
78
<script src="../../js/modules/exporting.js"></script>
 
79
 
 
80
<div id="container" style="height: 500px; min-width: 600px"></div>
 
81
        </body>
 
82
</html>