← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to timeline/index.php

  • 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/index.php
 
1
<!DOCTYPE HTML>
 
2
<html>
 
3
    <head>
 
4
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
5
        <title>Data Coverage Stacked Histogram</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
    var seriesOptions = [],
 
12
        yAxisOptions = [],
 
13
        count = 0, baseSeriesIndex,
 
14
        colors = Highcharts.getOptions().colors;
 
15
 
 
16
 
 
17
        Highcharts.setOptions({
 
18
            global: {
 
19
                useUTC: true,
 
20
                timezoneOffset: 0 * 60
 
21
            },
 
22
            lang: {
 
23
                contextButtonTitle: 'Chart save & print options...',
 
24
                downloadJPEG: 'Download JPG image',
 
25
                loading: 'Loading Timeline Data...',
 
26
                rangeSelectorZoom: 'Range:'
 
27
            }
 
28
        });
 
29
 
 
30
 
 
31
    $.getJSON('http://dev4.helioviewer.org/api/v1/getDataCoverage/?imageLayers=[SDO,AIA,AIA,94,1,100],[SDO,AIA,AIA,171,1,100],[SDO,AIA,AIA,193,1,100],[SDO,AIA,AIA,211,1,100],[SDO,AIA,AIA,304,1,100]', function(data) {
 
32
 
 
33
        count = 0;
 
34
        $.each(data, function (sourceId, series) {
 
35
            seriesOptions[count] = {
 
36
                name: series['label'],
 
37
                data: series['data']
 
38
            };
 
39
            count++;
 
40
        });
 
41
 
 
42
        baseSeriesIndex = count - 1;
 
43
        createChart(baseSeriesIndex);
 
44
    });
 
45
 
 
46
 
 
47
    // create the chart when all data is loaded
 
48
    function createChart(baseSeriesIndex) {
 
49
 
 
50
        $('#data-coverage-timeline').highcharts('StockChart', {
 
51
            colors: [
 
52
                '#FF8F97',
 
53
            //    '#FFB294',
 
54
            //    '#FFD391',
 
55
                '#FEF38E',
 
56
            //    '#E8FF8C',
 
57
            //    '#C8FF8D',
 
58
                '#A3FF8D',
 
59
            //    '#7BFF8E',
 
60
            //    '#7AFFAE',
 
61
                '#7CFFC9',
 
62
                // '#81FFFC',
 
63
                // '#8CE6FF',
 
64
                '#95C6FF',
 
65
                // '#9DA4FF',
 
66
                // '#AB8CFF',
 
67
                '#CA89FF',
 
68
                // '#E986FF',
 
69
                // '#FF82FF',
 
70
                '#FF85FF',
 
71
                // '#FF8ACC',
 
72
                // '#FF8DAD'
 
73
            ],
 
74
 
 
75
            title: {
 
76
                text: 'Image Data Coverage',
 
77
                align: 'center',
 
78
                style: {
 
79
                    color: '#000'
 
80
                }
 
81
            },
 
82
 
 
83
            subtitle: {
 
84
                text: 'Number of Images per Layer',
 
85
                align: 'center',
 
86
                style: {
 
87
                    color: '#ccc'
 
88
                }
 
89
            },
 
90
 
 
91
            chart: {
 
92
                type: 'column',
 
93
                stacking: 'normal',
 
94
                zoomType: 'x',
 
95
                height: 900
 
96
            },
 
97
 
 
98
            credits: {
 
99
                enabled: false
 
100
            },
 
101
 
 
102
            rangeSelector: {
 
103
                selected: 3,
 
104
                buttons: [{
 
105
                    type: 'hour',
 
106
                    count: 1,
 
107
                    text: '1h'
 
108
                }, {
 
109
                    type: 'day',
 
110
                    count: 1,
 
111
                    text: '1d'
 
112
                }, {
 
113
                    type: 'week',
 
114
                    count: 1,
 
115
                    text: '1w'
 
116
                }, {
 
117
                    type: 'month',
 
118
                    count: 1,
 
119
                    text: '1m'
 
120
                }, {
 
121
                    type: 'ytd',
 
122
                    text: 'YTD'
 
123
                }, {
 
124
                    type: 'year',
 
125
                    count: 1,
 
126
                    text: '1y'
 
127
                }, {
 
128
                    type: 'all',
 
129
                    text: 'All'
 
130
                }]
 
131
            },
 
132
 
 
133
            xAxis: {
 
134
                plotLines: [{
 
135
                    value: 1396000000000,
 
136
                    width: 2,
 
137
                    color: 'black',
 
138
                    dashStyle: 'solid',
 
139
                    zIndex: 5,
 
140
                    label: {
 
141
                        text: 'Viewport',
 
142
                        verticalAlign: 'top',
 
143
                        align: 'center',
 
144
                        y: 30,
 
145
                        x: -5,
 
146
                        rotation: 270
 
147
                    }
 
148
                }]
 
149
            },
 
150
 
 
151
            yAxis: {
 
152
                labels: {
 
153
 
 
154
                }
 
155
            },
 
156
 
 
157
            loading: {
 
158
                style: {
 
159
                    position: 'absolute',
 
160
                    backgroundColor: 'white',
 
161
                    opacity: 0.5,
 
162
                    textAlign: 'center'
 
163
                }
 
164
            },
 
165
 
 
166
            plotOptions: {
 
167
                column: {
 
168
                    animation: false,
 
169
                    stacking: 'normal',
 
170
                    pointPadding: 0,
 
171
                    borderWidth: 1,
 
172
                    groupPadding: 0,
 
173
                    shadow: false,
 
174
                    dataLabels: {
 
175
                        enabled: false,
 
176
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black'
 
177
                    },
 
178
                    dataGrouping: {
 
179
                        groupPixelWidth: 20
 
180
                    }
 
181
                }
 
182
            },
 
183
 
 
184
            tooltip: {
 
185
                pointFormat: '<span style="color:{series.color}; font-weight: bold;">{series.name}:</span> {point.y} images<br/>',
 
186
                valueDecimals: 0,
 
187
                crosshairs: true,
 
188
                followPointer: false,
 
189
                shared: true,
 
190
                xDateFormat: "%A, %b %e, %H:%M UTC"
 
191
            },
 
192
 
 
193
            navigator: {
 
194
                baseSeries: baseSeriesIndex,
 
195
                maskFill: 'rgba(180, 198, 220, 0.5)',
 
196
                series: {
 
197
                    type: 'column',
 
198
                    color: '#ddd',
 
199
                    fillOpacity: 0.4
 
200
                }
 
201
            },
 
202
 
 
203
            legend: {
 
204
                enabled: true,
 
205
                itemDistance: 12,
 
206
            },
 
207
 
 
208
            series: seriesOptions
 
209
        });
 
210
 
 
211
        // Hide last series (sum of aother series, for Navigator pane)
 
212
        //var chart = $('#data-coverage-timeline').highcharts();
 
213
        //chart.series[baseSeriesIndex].hide();
 
214
    }
 
215
 
 
216
});
 
217
        </script>
 
218
    </head>
 
219
    <body>
 
220
<script src="js/highstock.js"></script>
 
221
<script src="js/modules/exporting.js"></script>
 
222
 
 
223
<div id="data-coverage-timeline" style="height: 500px; min-width: 600px"></div>
 
224
    </body>
 
225
</html>