← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

Viewing changes to timeline/js/themes/dark-blue.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/dark-blue.js
 
1
/**
 
2
 * Dark blue theme for Highcharts JS
 
3
 * @author Torstein Honsi
 
4
 */
 
5
 
 
6
Highcharts.theme = {
 
7
        colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
 
8
                "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
 
9
        chart: {
 
10
                backgroundColor: {
 
11
                        linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
 
12
                        stops: [
 
13
                                [0, 'rgb(48, 48, 96)'],
 
14
                                [1, 'rgb(0, 0, 0)']
 
15
                        ]
 
16
                },
 
17
                borderColor: '#000000',
 
18
                borderWidth: 2,
 
19
                className: 'dark-container',
 
20
                plotBackgroundColor: 'rgba(255, 255, 255, .1)',
 
21
                plotBorderColor: '#CCCCCC',
 
22
                plotBorderWidth: 1
 
23
        },
 
24
        title: {
 
25
                style: {
 
26
                        color: '#C0C0C0',
 
27
                        font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
 
28
                }
 
29
        },
 
30
        subtitle: {
 
31
                style: {
 
32
                        color: '#666666',
 
33
                        font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
 
34
                }
 
35
        },
 
36
        xAxis: {
 
37
                gridLineColor: '#333333',
 
38
                gridLineWidth: 1,
 
39
                labels: {
 
40
                        style: {
 
41
                                color: '#A0A0A0'
 
42
                        }
 
43
                },
 
44
                lineColor: '#A0A0A0',
 
45
                tickColor: '#A0A0A0',
 
46
                title: {
 
47
                        style: {
 
48
                                color: '#CCC',
 
49
                                fontWeight: 'bold',
 
50
                                fontSize: '12px',
 
51
                                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
 
52
 
 
53
                        }
 
54
                }
 
55
        },
 
56
        yAxis: {
 
57
                gridLineColor: '#333333',
 
58
                labels: {
 
59
                        style: {
 
60
                                color: '#A0A0A0'
 
61
                        }
 
62
                },
 
63
                lineColor: '#A0A0A0',
 
64
                minorTickInterval: null,
 
65
                tickColor: '#A0A0A0',
 
66
                tickWidth: 1,
 
67
                title: {
 
68
                        style: {
 
69
                                color: '#CCC',
 
70
                                fontWeight: 'bold',
 
71
                                fontSize: '12px',
 
72
                                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
 
73
                        }
 
74
                }
 
75
        },
 
76
        tooltip: {
 
77
                backgroundColor: 'rgba(0, 0, 0, 0.75)',
 
78
                style: {
 
79
                        color: '#F0F0F0'
 
80
                }
 
81
        },
 
82
        toolbar: {
 
83
                itemStyle: {
 
84
                        color: 'silver'
 
85
                }
 
86
        },
 
87
        plotOptions: {
 
88
                line: {
 
89
                        dataLabels: {
 
90
                                color: '#CCC'
 
91
                        },
 
92
                        marker: {
 
93
                                lineColor: '#333'
 
94
                        }
 
95
                },
 
96
                spline: {
 
97
                        marker: {
 
98
                                lineColor: '#333'
 
99
                        }
 
100
                },
 
101
                scatter: {
 
102
                        marker: {
 
103
                                lineColor: '#333'
 
104
                        }
 
105
                },
 
106
                candlestick: {
 
107
                        lineColor: 'white'
 
108
                }
 
109
        },
 
110
        legend: {
 
111
                itemStyle: {
 
112
                        font: '9pt Trebuchet MS, Verdana, sans-serif',
 
113
                        color: '#A0A0A0'
 
114
                },
 
115
                itemHoverStyle: {
 
116
                        color: '#FFF'
 
117
                },
 
118
                itemHiddenStyle: {
 
119
                        color: '#444'
 
120
                }
 
121
        },
 
122
        credits: {
 
123
                style: {
 
124
                        color: '#666'
 
125
                }
 
126
        },
 
127
        labels: {
 
128
                style: {
 
129
                        color: '#CCC'
 
130
                }
 
131
        },
 
132
 
 
133
        navigation: {
 
134
                buttonOptions: {
 
135
                        symbolStroke: '#DDDDDD',
 
136
                        hoverSymbolStroke: '#FFFFFF',
 
137
                        theme: {
 
138
                                fill: {
 
139
                                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 
140
                                        stops: [
 
141
                                                [0.4, '#606060'],
 
142
                                                [0.6, '#333333']
 
143
                                        ]
 
144
                                },
 
145
                                stroke: '#000000'
 
146
                        }
 
147
                }
 
148
        },
 
149
 
 
150
        // scroll charts
 
151
        rangeSelector: {
 
152
                buttonTheme: {
 
153
                        fill: {
 
154
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 
155
                                stops: [
 
156
                                        [0.4, '#888'],
 
157
                                        [0.6, '#555']
 
158
                                ]
 
159
                        },
 
160
                        stroke: '#000000',
 
161
                        style: {
 
162
                                color: '#CCC',
 
163
                                fontWeight: 'bold'
 
164
                        },
 
165
                        states: {
 
166
                                hover: {
 
167
                                        fill: {
 
168
                                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 
169
                                                stops: [
 
170
                                                        [0.4, '#BBB'],
 
171
                                                        [0.6, '#888']
 
172
                                                ]
 
173
                                        },
 
174
                                        stroke: '#000000',
 
175
                                        style: {
 
176
                                                color: 'white'
 
177
                                        }
 
178
                                },
 
179
                                select: {
 
180
                                        fill: {
 
181
                                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 
182
                                                stops: [
 
183
                                                        [0.1, '#000'],
 
184
                                                        [0.3, '#333']
 
185
                                                ]
 
186
                                        },
 
187
                                        stroke: '#000000',
 
188
                                        style: {
 
189
                                                color: 'yellow'
 
190
                                        }
 
191
                                }
 
192
                        }
 
193
                },
 
194
                inputStyle: {
 
195
                        backgroundColor: '#333',
 
196
                        color: 'silver'
 
197
                },
 
198
                labelStyle: {
 
199
                        color: 'silver'
 
200
                }
 
201
        },
 
202
 
 
203
        navigator: {
 
204
                handles: {
 
205
                        backgroundColor: '#666',
 
206
                        borderColor: '#AAA'
 
207
                },
 
208
                outlineColor: '#CCC',
 
209
                maskFill: 'rgba(16, 16, 16, 0.5)',
 
210
                series: {
 
211
                        color: '#7798BF',
 
212
                        lineColor: '#A6C7ED'
 
213
                }
 
214
        },
 
215
 
 
216
        scrollbar: {
 
217
                barBackgroundColor: {
 
218
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 
219
                                stops: [
 
220
                                        [0.4, '#888'],
 
221
                                        [0.6, '#555']
 
222
                                ]
 
223
                        },
 
224
                barBorderColor: '#CCC',
 
225
                buttonArrowColor: '#CCC',
 
226
                buttonBackgroundColor: {
 
227
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 
228
                                stops: [
 
229
                                        [0.4, '#888'],
 
230
                                        [0.6, '#555']
 
231
                                ]
 
232
                        },
 
233
                buttonBorderColor: '#CCC',
 
234
                rifleColor: '#FFF',
 
235
                trackBackgroundColor: {
 
236
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
 
237
                        stops: [
 
238
                                [0, '#000'],
 
239
                                [1, '#333']
 
240
                        ]
 
241
                },
 
242
                trackBorderColor: '#666'
 
243
        },
 
244
 
 
245
        // special colors for some of the
 
246
        legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
 
247
        legendBackgroundColorSolid: 'rgb(35, 35, 70)',
 
248
        dataLabelsColor: '#444',
 
249
        textColor: '#C0C0C0',
 
250
        maskColor: 'rgba(255,255,255,0.3)'
 
251
};
 
252
 
 
253
// Apply the theme
 
254
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);