highcharts-rails 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,268 @@
1
+ /**
2
+ * Dark blue theme for Highcharts JS
3
+ * @author Torstein Hønsi
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: [0, 0, 250, 500],
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
+ legend: {
77
+ itemStyle: {
78
+ font: '9pt Trebuchet MS, Verdana, sans-serif',
79
+ color: '#A0A0A0'
80
+ }
81
+ },
82
+ tooltip: {
83
+ backgroundColor: 'rgba(0, 0, 0, 0.75)',
84
+ style: {
85
+ color: '#F0F0F0'
86
+ }
87
+ },
88
+ toolbar: {
89
+ itemStyle: {
90
+ color: 'silver'
91
+ }
92
+ },
93
+ plotOptions: {
94
+ line: {
95
+ dataLabels: {
96
+ color: '#CCC'
97
+ },
98
+ marker: {
99
+ lineColor: '#333'
100
+ }
101
+ },
102
+ spline: {
103
+ marker: {
104
+ lineColor: '#333'
105
+ }
106
+ },
107
+ scatter: {
108
+ marker: {
109
+ lineColor: '#333'
110
+ }
111
+ },
112
+ candlestick: {
113
+ lineColor: 'white'
114
+ }
115
+ },
116
+ legend: {
117
+ itemStyle: {
118
+ color: '#CCC'
119
+ },
120
+ itemHoverStyle: {
121
+ color: '#FFF'
122
+ },
123
+ itemHiddenStyle: {
124
+ color: '#444'
125
+ }
126
+ },
127
+ credits: {
128
+ style: {
129
+ color: '#666'
130
+ }
131
+ },
132
+ labels: {
133
+ style: {
134
+ color: '#CCC'
135
+ }
136
+ },
137
+
138
+ navigation: {
139
+ buttonOptions: {
140
+ backgroundColor: {
141
+ linearGradient: [0, 0, 0, 20],
142
+ stops: [
143
+ [0.4, '#606060'],
144
+ [0.6, '#333333']
145
+ ]
146
+ },
147
+ borderColor: '#000000',
148
+ symbolStroke: '#C0C0C0',
149
+ hoverSymbolStroke: '#FFFFFF'
150
+ }
151
+ },
152
+
153
+ exporting: {
154
+ buttons: {
155
+ exportButton: {
156
+ symbolFill: '#55BE3B'
157
+ },
158
+ printButton: {
159
+ symbolFill: '#7797BE'
160
+ }
161
+ }
162
+ },
163
+
164
+ // scroll charts
165
+ rangeSelector: {
166
+ buttonTheme: {
167
+ fill: {
168
+ linearGradient: [0, 0, 0, 20],
169
+ stops: [
170
+ [0.4, '#888'],
171
+ [0.6, '#555']
172
+ ]
173
+ },
174
+ stroke: '#000000',
175
+ style: {
176
+ color: '#CCC',
177
+ fontWeight: 'bold'
178
+ },
179
+ states: {
180
+ hover: {
181
+ fill: {
182
+ linearGradient: [0, 0, 0, 20],
183
+ stops: [
184
+ [0.4, '#BBB'],
185
+ [0.6, '#888']
186
+ ]
187
+ },
188
+ stroke: '#000000',
189
+ style: {
190
+ color: 'white'
191
+ }
192
+ },
193
+ select: {
194
+ fill: {
195
+ linearGradient: [0, 0, 0, 20],
196
+ stops: [
197
+ [0.1, '#000'],
198
+ [0.3, '#333']
199
+ ]
200
+ },
201
+ stroke: '#000000',
202
+ style: {
203
+ color: 'yellow'
204
+ }
205
+ }
206
+ }
207
+ },
208
+ inputStyle: {
209
+ backgroundColor: '#333',
210
+ color: 'silver'
211
+ },
212
+ labelStyle: {
213
+ color: 'silver'
214
+ }
215
+ },
216
+
217
+ navigator: {
218
+ handles: {
219
+ backgroundColor: '#666',
220
+ borderColor: '#AAA'
221
+ },
222
+ outlineColor: '#CCC',
223
+ maskFill: 'rgba(16, 16, 16, 0.5)',
224
+ series: {
225
+ color: '#7798BF',
226
+ lineColor: '#A6C7ED'
227
+ }
228
+ },
229
+
230
+ scrollbar: {
231
+ barBackgroundColor: {
232
+ linearGradient: [0, 0, 0, 20],
233
+ stops: [
234
+ [0.4, '#888'],
235
+ [0.6, '#555']
236
+ ]
237
+ },
238
+ barBorderColor: '#CCC',
239
+ buttonArrowColor: '#CCC',
240
+ buttonBackgroundColor: {
241
+ linearGradient: [0, 0, 0, 20],
242
+ stops: [
243
+ [0.4, '#888'],
244
+ [0.6, '#555']
245
+ ]
246
+ },
247
+ buttonBorderColor: '#CCC',
248
+ rifleColor: '#FFF',
249
+ trackBackgroundColor: {
250
+ linearGradient: [0, 0, 0, 10],
251
+ stops: [
252
+ [0, '#000'],
253
+ [1, '#333']
254
+ ]
255
+ },
256
+ trackBorderColor: '#666'
257
+ },
258
+
259
+ // special colors for some of the
260
+ legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
261
+ legendBackgroundColorSolid: 'rgb(35, 35, 70)',
262
+ dataLabelsColor: '#444',
263
+ textColor: '#C0C0C0',
264
+ maskColor: 'rgba(255,255,255,0.3)'
265
+ };
266
+
267
+ // Apply the theme
268
+ var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
@@ -0,0 +1,268 @@
1
+ /**
2
+ * Dark blue theme for Highcharts JS
3
+ * @author Torstein Hønsi
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: [0, 0, 250, 500],
12
+ stops: [
13
+ [0, 'rgb(48, 96, 48)'],
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
+ legend: {
77
+ itemStyle: {
78
+ font: '9pt Trebuchet MS, Verdana, sans-serif',
79
+ color: '#A0A0A0'
80
+ }
81
+ },
82
+ tooltip: {
83
+ backgroundColor: 'rgba(0, 0, 0, 0.75)',
84
+ style: {
85
+ color: '#F0F0F0'
86
+ }
87
+ },
88
+ toolbar: {
89
+ itemStyle: {
90
+ color: 'silver'
91
+ }
92
+ },
93
+ plotOptions: {
94
+ line: {
95
+ dataLabels: {
96
+ color: '#CCC'
97
+ },
98
+ marker: {
99
+ lineColor: '#333'
100
+ }
101
+ },
102
+ spline: {
103
+ marker: {
104
+ lineColor: '#333'
105
+ }
106
+ },
107
+ scatter: {
108
+ marker: {
109
+ lineColor: '#333'
110
+ }
111
+ },
112
+ candlestick: {
113
+ lineColor: 'white'
114
+ }
115
+ },
116
+ legend: {
117
+ itemStyle: {
118
+ color: '#CCC'
119
+ },
120
+ itemHoverStyle: {
121
+ color: '#FFF'
122
+ },
123
+ itemHiddenStyle: {
124
+ color: '#444'
125
+ }
126
+ },
127
+ credits: {
128
+ style: {
129
+ color: '#666'
130
+ }
131
+ },
132
+ labels: {
133
+ style: {
134
+ color: '#CCC'
135
+ }
136
+ },
137
+
138
+ navigation: {
139
+ buttonOptions: {
140
+ backgroundColor: {
141
+ linearGradient: [0, 0, 0, 20],
142
+ stops: [
143
+ [0.4, '#606060'],
144
+ [0.6, '#333333']
145
+ ]
146
+ },
147
+ borderColor: '#000000',
148
+ symbolStroke: '#C0C0C0',
149
+ hoverSymbolStroke: '#FFFFFF'
150
+ }
151
+ },
152
+
153
+ exporting: {
154
+ buttons: {
155
+ exportButton: {
156
+ symbolFill: '#55BE3B'
157
+ },
158
+ printButton: {
159
+ symbolFill: '#7797BE'
160
+ }
161
+ }
162
+ },
163
+
164
+ // scroll charts
165
+ rangeSelector: {
166
+ buttonTheme: {
167
+ fill: {
168
+ linearGradient: [0, 0, 0, 20],
169
+ stops: [
170
+ [0.4, '#888'],
171
+ [0.6, '#555']
172
+ ]
173
+ },
174
+ stroke: '#000000',
175
+ style: {
176
+ color: '#CCC',
177
+ fontWeight: 'bold'
178
+ },
179
+ states: {
180
+ hover: {
181
+ fill: {
182
+ linearGradient: [0, 0, 0, 20],
183
+ stops: [
184
+ [0.4, '#BBB'],
185
+ [0.6, '#888']
186
+ ]
187
+ },
188
+ stroke: '#000000',
189
+ style: {
190
+ color: 'white'
191
+ }
192
+ },
193
+ select: {
194
+ fill: {
195
+ linearGradient: [0, 0, 0, 20],
196
+ stops: [
197
+ [0.1, '#000'],
198
+ [0.3, '#333']
199
+ ]
200
+ },
201
+ stroke: '#000000',
202
+ style: {
203
+ color: 'yellow'
204
+ }
205
+ }
206
+ }
207
+ },
208
+ inputStyle: {
209
+ backgroundColor: '#333',
210
+ color: 'silver'
211
+ },
212
+ labelStyle: {
213
+ color: 'silver'
214
+ }
215
+ },
216
+
217
+ navigator: {
218
+ handles: {
219
+ backgroundColor: '#666',
220
+ borderColor: '#AAA'
221
+ },
222
+ outlineColor: '#CCC',
223
+ maskFill: 'rgba(16, 16, 16, 0.5)',
224
+ series: {
225
+ color: '#7798BF',
226
+ lineColor: '#A6C7ED'
227
+ }
228
+ },
229
+
230
+ scrollbar: {
231
+ barBackgroundColor: {
232
+ linearGradient: [0, 0, 0, 20],
233
+ stops: [
234
+ [0.4, '#888'],
235
+ [0.6, '#555']
236
+ ]
237
+ },
238
+ barBorderColor: '#CCC',
239
+ buttonArrowColor: '#CCC',
240
+ buttonBackgroundColor: {
241
+ linearGradient: [0, 0, 0, 20],
242
+ stops: [
243
+ [0.4, '#888'],
244
+ [0.6, '#555']
245
+ ]
246
+ },
247
+ buttonBorderColor: '#CCC',
248
+ rifleColor: '#FFF',
249
+ trackBackgroundColor: {
250
+ linearGradient: [0, 0, 0, 10],
251
+ stops: [
252
+ [0, '#000'],
253
+ [1, '#333']
254
+ ]
255
+ },
256
+ trackBorderColor: '#666'
257
+ },
258
+
259
+ // special colors for some of the
260
+ legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
261
+ legendBackgroundColorSolid: 'rgb(35, 35, 70)',
262
+ dataLabelsColor: '#444',
263
+ textColor: '#C0C0C0',
264
+ maskColor: 'rgba(255,255,255,0.3)'
265
+ };
266
+
267
+ // Apply the theme
268
+ var highchartsOptions = Highcharts.setOptions(Highcharts.theme);