← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to timeline/js/themes/skies.js

  • 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/js/themes/skies.js
 
1
/**
 
2
 * Skies theme for Highcharts JS
 
3
 * @author Torstein Honsi
 
4
 */
 
5
 
 
6
Highcharts.theme = {
 
7
        colors: ["#514F78", "#42A07B", "#9B5E4A", "#72727F", "#1F949A", "#82914E", "#86777F", "#42A07B"],
 
8
        chart: {
 
9
                className: 'skies',
 
10
                borderWidth: 0,
 
11
                plotShadow: true,
 
12
                plotBackgroundImage: 'http://www.highcharts.com/demo/gfx/skies.jpg',
 
13
                plotBackgroundColor: {
 
14
                        linearGradient: [0, 0, 250, 500],
 
15
                        stops: [
 
16
                                [0, 'rgba(255, 255, 255, 1)'],
 
17
                                [1, 'rgba(255, 255, 255, 0)']
 
18
                        ]
 
19
                },
 
20
                plotBorderWidth: 1
 
21
        },
 
22
        title: {
 
23
                style: {
 
24
                        color: '#3E576F',
 
25
                        font: '16px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
 
26
                }
 
27
        },
 
28
        subtitle: {
 
29
                style: {
 
30
                        color: '#6D869F',
 
31
                        font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
 
32
                }
 
33
        },
 
34
        xAxis: {
 
35
                gridLineWidth: 0,
 
36
                lineColor: '#C0D0E0',
 
37
                tickColor: '#C0D0E0',
 
38
                labels: {
 
39
                        style: {
 
40
                                color: '#666',
 
41
                                fontWeight: 'bold'
 
42
                        }
 
43
                },
 
44
                title: {
 
45
                        style: {
 
46
                                color: '#666',
 
47
                                font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
 
48
                        }
 
49
                }
 
50
        },
 
51
        yAxis: {
 
52
                alternateGridColor: 'rgba(255, 255, 255, .5)',
 
53
                lineColor: '#C0D0E0',
 
54
                tickColor: '#C0D0E0',
 
55
                tickWidth: 1,
 
56
                labels: {
 
57
                        style: {
 
58
                                color: '#666',
 
59
                                fontWeight: 'bold'
 
60
                        }
 
61
                },
 
62
                title: {
 
63
                        style: {
 
64
                                color: '#666',
 
65
                                font: '12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
 
66
                        }
 
67
                }
 
68
        },
 
69
        legend: {
 
70
                itemStyle: {
 
71
                        font: '9pt Trebuchet MS, Verdana, sans-serif',
 
72
                        color: '#3E576F'
 
73
                },
 
74
                itemHoverStyle: {
 
75
                        color: 'black'
 
76
                },
 
77
                itemHiddenStyle: {
 
78
                        color: 'silver'
 
79
                }
 
80
        },
 
81
        labels: {
 
82
                style: {
 
83
                        color: '#3E576F'
 
84
                }
 
85
        }
 
86
};
 
87
 
 
88
// Apply the theme
 
89
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);