← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to timeline/coverage/column/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/column/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
        $.getJSON('http://dev4.helioviewer.org/timeline/14.txt', function(data) {
 
11
 
 
12
                // create the chart
 
13
                $('#container').highcharts('StockChart', {
 
14
                        plotOptions: {
 
15
                            column: {
 
16
                                pointPadding: 0,
 
17
                                borderWidth: 0,
 
18
                                groupPadding: 0,
 
19
                                shadow: false
 
20
                            }
 
21
                        },
 
22
                    chart: {
 
23
                        alignTicks: true,
 
24
                    },
 
25
 
 
26
                    rangeSelector: {
 
27
                        selected: 1
 
28
                    },
 
29
 
 
30
                    title: {
 
31
                        text: 'AAPL Stock Volume'
 
32
                    },
 
33
 
 
34
                    series: [{
 
35
                        type: 'column',
 
36
                        name: 'AAPL Stock Volume',
 
37
                        data: data,
 
38
                        dataGrouping: {
 
39
                                        units: [[
 
40
                                                'day', // unit name
 
41
                                                [1] // allowed multiples
 
42
                                        ], [
 
43
                                                'week', // unit name
 
44
                                                [1] // allowed multiples
 
45
                                        ], [
 
46
                                                'month',
 
47
                                                [1, 2, 3, 4, 6]
 
48
                                        ]]
 
49
                        }
 
50
                    }],
 
51
 
 
52
                    navigator: {
 
53
                        series: {
 
54
                                        type: 'column',
 
55
                                        fillOpacity: 0.2,
 
56
                                        dataGrouping: {
 
57
                                                smoothed: false
 
58
                                        },
 
59
                                        lineWidth: 1,
 
60
                                        marker: {
 
61
                                                enabled: false
 
62
                                        },
 
63
                                        shadow: false,
 
64
                                        column: {
 
65
                                        pointPadding: 0,
 
66
                                        borderWidth: 0,
 
67
                                        groupPadding: 0,
 
68
                                        shadow: false
 
69
                                    }
 
70
                                }
 
71
                        }
 
72
                });
 
73
        });
 
74
});
 
75
                </script>
 
76
        </head>
 
77
        <body>
 
78
<script src="../../js/highstock.js"></script>
 
79
<script src="../../js/modules/exporting.js"></script>
 
80
 
 
81
<div id="container" style="height: 500px"></div>
 
82
        </body>
 
83
</html>