← Back to branch summary

~jstys-z/helioviewer.org/timeline

« back to all changes in this revision

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