~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to timeline/Highstock-1.3.10/examples/flags-placement/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:
 
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=usdeur.json&callback=?', function(data) {
 
11
                
 
12
                // Create the chart
 
13
                $('#container').highcharts('StockChart', {
 
14
                    chart: {
 
15
                    },
 
16
 
 
17
                    rangeSelector: {
 
18
                        selected: 1
 
19
                    },
 
20
 
 
21
                    title: {
 
22
                        text: 'USD to EUR exchange rate'
 
23
                    },
 
24
 
 
25
                    yAxis: {
 
26
                        title: {
 
27
                            text: 'Exchange rate'
 
28
                        }
 
29
                    },
 
30
 
 
31
                        series: [{
 
32
                        name: 'USD to EUR',
 
33
                        data: data,
 
34
                                id: 'dataseries',
 
35
                                tooltip: {
 
36
                                        valueDecimals: 4
 
37
                                }
 
38
                    }, {
 
39
                        type: 'flags',
 
40
                        name: 'Flags on series',
 
41
                        data: [{
 
42
                                        x: Date.UTC(2011, 1, 14),
 
43
                                        title: 'On series'
 
44
                                }, {
 
45
                                        x: Date.UTC(2011, 3, 28),
 
46
                                        title: 'On series'
 
47
                                }],
 
48
                        onSeries: 'dataseries',
 
49
                        shape: 'squarepin'
 
50
                    }, {
 
51
                        type: 'flags',
 
52
                        name: 'Flags on axis',
 
53
                        data: [{
 
54
                                        x: Date.UTC(2011, 2, 1),
 
55
                                        title: 'On axis'
 
56
                                }, {
 
57
                                        x: Date.UTC(2011, 3, 1),
 
58
                                        title: 'On axis'
 
59
                                }],
 
60
                        shape: 'squarepin'
 
61
                    }]
 
62
                });
 
63
        });
 
64
});
 
65
                </script>
 
66
        </head>
 
67
        <body>
 
68
<script src="../../js/highstock.js"></script>
 
69
<script src="../../js/modules/exporting.js"></script>
 
70
 
 
71
<div id="container" style="height: 500px; min-width: 500px"></div>
 
72
        </body>
 
73
</html>