highcharts-js-rails 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,263 @@
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
+ 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
+ backgroundColor: {
136
+ linearGradient: [0, 0, 0, 20],
137
+ stops: [
138
+ [0.4, '#606060'],
139
+ [0.6, '#333333']
140
+ ]
141
+ },
142
+ borderColor: '#000000',
143
+ symbolStroke: '#C0C0C0',
144
+ hoverSymbolStroke: '#FFFFFF'
145
+ }
146
+ },
147
+
148
+ exporting: {
149
+ buttons: {
150
+ exportButton: {
151
+ symbolFill: '#55BE3B'
152
+ },
153
+ printButton: {
154
+ symbolFill: '#7797BE'
155
+ }
156
+ }
157
+ },
158
+
159
+ // scroll charts
160
+ rangeSelector: {
161
+ buttonTheme: {
162
+ fill: {
163
+ linearGradient: [0, 0, 0, 20],
164
+ stops: [
165
+ [0.4, '#888'],
166
+ [0.6, '#555']
167
+ ]
168
+ },
169
+ stroke: '#000000',
170
+ style: {
171
+ color: '#CCC',
172
+ fontWeight: 'bold'
173
+ },
174
+ states: {
175
+ hover: {
176
+ fill: {
177
+ linearGradient: [0, 0, 0, 20],
178
+ stops: [
179
+ [0.4, '#BBB'],
180
+ [0.6, '#888']
181
+ ]
182
+ },
183
+ stroke: '#000000',
184
+ style: {
185
+ color: 'white'
186
+ }
187
+ },
188
+ select: {
189
+ fill: {
190
+ linearGradient: [0, 0, 0, 20],
191
+ stops: [
192
+ [0.1, '#000'],
193
+ [0.3, '#333']
194
+ ]
195
+ },
196
+ stroke: '#000000',
197
+ style: {
198
+ color: 'yellow'
199
+ }
200
+ }
201
+ }
202
+ },
203
+ inputStyle: {
204
+ backgroundColor: '#333',
205
+ color: 'silver'
206
+ },
207
+ labelStyle: {
208
+ color: 'silver'
209
+ }
210
+ },
211
+
212
+ navigator: {
213
+ handles: {
214
+ backgroundColor: '#666',
215
+ borderColor: '#AAA'
216
+ },
217
+ outlineColor: '#CCC',
218
+ maskFill: 'rgba(16, 16, 16, 0.5)',
219
+ series: {
220
+ color: '#7798BF',
221
+ lineColor: '#A6C7ED'
222
+ }
223
+ },
224
+
225
+ scrollbar: {
226
+ barBackgroundColor: {
227
+ linearGradient: [0, 0, 0, 20],
228
+ stops: [
229
+ [0.4, '#888'],
230
+ [0.6, '#555']
231
+ ]
232
+ },
233
+ barBorderColor: '#CCC',
234
+ buttonArrowColor: '#CCC',
235
+ buttonBackgroundColor: {
236
+ linearGradient: [0, 0, 0, 20],
237
+ stops: [
238
+ [0.4, '#888'],
239
+ [0.6, '#555']
240
+ ]
241
+ },
242
+ buttonBorderColor: '#CCC',
243
+ rifleColor: '#FFF',
244
+ trackBackgroundColor: {
245
+ linearGradient: [0, 0, 0, 10],
246
+ stops: [
247
+ [0, '#000'],
248
+ [1, '#333']
249
+ ]
250
+ },
251
+ trackBorderColor: '#666'
252
+ },
253
+
254
+ // special colors for some of the
255
+ legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
256
+ legendBackgroundColorSolid: 'rgb(35, 35, 70)',
257
+ dataLabelsColor: '#444',
258
+ textColor: '#C0C0C0',
259
+ maskColor: 'rgba(255,255,255,0.3)'
260
+ };
261
+
262
+ // Apply the theme
263
+ var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
@@ -0,0 +1,263 @@
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
+ 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
+ backgroundColor: {
136
+ linearGradient: [0, 0, 0, 20],
137
+ stops: [
138
+ [0.4, '#606060'],
139
+ [0.6, '#333333']
140
+ ]
141
+ },
142
+ borderColor: '#000000',
143
+ symbolStroke: '#C0C0C0',
144
+ hoverSymbolStroke: '#FFFFFF'
145
+ }
146
+ },
147
+
148
+ exporting: {
149
+ buttons: {
150
+ exportButton: {
151
+ symbolFill: '#55BE3B'
152
+ },
153
+ printButton: {
154
+ symbolFill: '#7797BE'
155
+ }
156
+ }
157
+ },
158
+
159
+ // scroll charts
160
+ rangeSelector: {
161
+ buttonTheme: {
162
+ fill: {
163
+ linearGradient: [0, 0, 0, 20],
164
+ stops: [
165
+ [0.4, '#888'],
166
+ [0.6, '#555']
167
+ ]
168
+ },
169
+ stroke: '#000000',
170
+ style: {
171
+ color: '#CCC',
172
+ fontWeight: 'bold'
173
+ },
174
+ states: {
175
+ hover: {
176
+ fill: {
177
+ linearGradient: [0, 0, 0, 20],
178
+ stops: [
179
+ [0.4, '#BBB'],
180
+ [0.6, '#888']
181
+ ]
182
+ },
183
+ stroke: '#000000',
184
+ style: {
185
+ color: 'white'
186
+ }
187
+ },
188
+ select: {
189
+ fill: {
190
+ linearGradient: [0, 0, 0, 20],
191
+ stops: [
192
+ [0.1, '#000'],
193
+ [0.3, '#333']
194
+ ]
195
+ },
196
+ stroke: '#000000',
197
+ style: {
198
+ color: 'yellow'
199
+ }
200
+ }
201
+ }
202
+ },
203
+ inputStyle: {
204
+ backgroundColor: '#333',
205
+ color: 'silver'
206
+ },
207
+ labelStyle: {
208
+ color: 'silver'
209
+ }
210
+ },
211
+
212
+ navigator: {
213
+ handles: {
214
+ backgroundColor: '#666',
215
+ borderColor: '#AAA'
216
+ },
217
+ outlineColor: '#CCC',
218
+ maskFill: 'rgba(16, 16, 16, 0.5)',
219
+ series: {
220
+ color: '#7798BF',
221
+ lineColor: '#A6C7ED'
222
+ }
223
+ },
224
+
225
+ scrollbar: {
226
+ barBackgroundColor: {
227
+ linearGradient: [0, 0, 0, 20],
228
+ stops: [
229
+ [0.4, '#888'],
230
+ [0.6, '#555']
231
+ ]
232
+ },
233
+ barBorderColor: '#CCC',
234
+ buttonArrowColor: '#CCC',
235
+ buttonBackgroundColor: {
236
+ linearGradient: [0, 0, 0, 20],
237
+ stops: [
238
+ [0.4, '#888'],
239
+ [0.6, '#555']
240
+ ]
241
+ },
242
+ buttonBorderColor: '#CCC',
243
+ rifleColor: '#FFF',
244
+ trackBackgroundColor: {
245
+ linearGradient: [0, 0, 0, 10],
246
+ stops: [
247
+ [0, '#000'],
248
+ [1, '#333']
249
+ ]
250
+ },
251
+ trackBorderColor: '#666'
252
+ },
253
+
254
+ // special colors for some of the
255
+ legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
256
+ legendBackgroundColorSolid: 'rgb(35, 35, 70)',
257
+ dataLabelsColor: '#444',
258
+ textColor: '#C0C0C0',
259
+ maskColor: 'rgba(255,255,255,0.3)'
260
+ };
261
+
262
+ // Apply the theme
263
+ var highchartsOptions = Highcharts.setOptions(Highcharts.theme);