← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to timeline/coverage/candlestick-and-volume/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/candlestick-and-volume/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://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
 
11
 
 
12
                // split the data set into ohlc and volume
 
13
                var ohlc = [],
 
14
                        volume = [],
 
15
                        dataLength = data.length;
 
16
                        
 
17
                for (i = 0; i < dataLength; i++) {
 
18
                        ohlc.push([
 
19
                                data[i][0], // the date
 
20
                                data[i][1], // open
 
21
                                data[i][2], // high
 
22
                                data[i][3], // low
 
23
                                data[i][4] // close
 
24
                        ]);
 
25
                        
 
26
                        volume.push([
 
27
                                data[i][0], // the date
 
28
                                data[i][5] // the volume
 
29
                        ])
 
30
                }
 
31
 
 
32
                // set the allowed units for data grouping
 
33
                var groupingUnits = [[
 
34
                        'week',                         // unit name
 
35
                        [1]                             // allowed multiples
 
36
                ], [
 
37
                        'month',
 
38
                        [1, 2, 3, 4, 6]
 
39
                ]];
 
40
 
 
41
                // create the chart
 
42
                $('#container').highcharts('StockChart', {
 
43
                    
 
44
                    rangeSelector: {
 
45
                        selected: 1
 
46
                    },
 
47
 
 
48
                    title: {
 
49
                        text: 'AAPL Historical'
 
50
                    },
 
51
 
 
52
                    yAxis: [{
 
53
                        title: {
 
54
                            text: 'OHLC'
 
55
                        },
 
56
                        height: 200,
 
57
                        lineWidth: 2
 
58
                    }, {
 
59
                        title: {
 
60
                            text: 'Volume'
 
61
                        },
 
62
                        top: 300,
 
63
                        height: 100,
 
64
                        offset: 0,
 
65
                        lineWidth: 2
 
66
                    }],
 
67
                    
 
68
                    series: [{
 
69
                        type: 'candlestick',
 
70
                        name: 'AAPL',
 
71
                        data: ohlc,
 
72
                        dataGrouping: {
 
73
                                        units: groupingUnits
 
74
                        }
 
75
                    }, {
 
76
                        type: 'column',
 
77
                        name: 'Volume',
 
78
                        data: volume,
 
79
                        yAxis: 1,
 
80
                        dataGrouping: {
 
81
                                        units: groupingUnits
 
82
                        }
 
83
                    }]
 
84
                });
 
85
        });
 
86
});
 
87
                </script>
 
88
        </head>
 
89
        <body>
 
90
<script src="../../js/highstock.js"></script>
 
91
<script src="../../js/modules/exporting.js"></script>
 
92
 
 
93
<div id="container" style="height: 500px; min-width: 500px"></div>
 
94
        </body>
 
95
</html>