highstocks-rails 0.0.1

data/app/assets/javascripts/highstocks/modules/no-data-to-display.js

@@ -0,0 +1,12 @@
+/*
+ Highstock JS v1.3.7 (2013-10-24)
+ Plugin for displaying a message when there is no data visible in chart.
+
+ (c) 2010-2013 Highsoft AS
+ Author: Øystein Moseng
+
+ License: www.highcharts.com/license
+*/
+(function(c){function f(){return!!this.points.length}function g(){this.hasData()?this.hideNoData():this.showNoData()}var d=c.seriesTypes,e=c.Chart.prototype,h=c.getOptions(),i=c.extend;i(h.lang,{noData:"No data to display"});h.noData={position:{x:0,y:0,align:"center",verticalAlign:"middle"},attr:{},style:{fontWeight:"bold",fontSize:"12px",color:"#60606a"}};d.pie.prototype.hasData=f;if(d.gauge)d.gauge.prototype.hasData=f;if(d.waterfall)d.waterfall.prototype.hasData=f;c.Series.prototype.hasData=function(){return this.dataMax!==
+void 0&&this.dataMin!==void 0};e.showNoData=function(a){var b=this.options,a=a||b.lang.noData,b=b.noData;if(!this.noDataLabel)this.noDataLabel=this.renderer.label(a,0,0,null,null,null,null,null,"no-data").attr(b.attr).css(b.style).add(),this.noDataLabel.align(i(this.noDataLabel.getBBox(),b.position),!1,"plotBox")};e.hideNoData=function(){if(this.noDataLabel)this.noDataLabel=this.noDataLabel.destroy()};e.hasData=function(){for(var a=this.series,b=a.length;b--;)if(a[b].hasData()&&!a[b].options.isInternal)return!0;
+return!1};e.callbacks.push(function(a){c.addEvent(a,"load",g);c.addEvent(a,"redraw",g)})})(Highcharts);

data/app/assets/javascripts/highstocks/modules/no-data-to-display.src.js

@@ -0,0 +1,128 @@
+/**
+ * @license Highstock JS v1.3.7 (2013-10-24)
+ * Plugin for displaying a message when there is no data visible in chart.
+ *
+ * (c) 2010-2013 Highsoft AS
+ * Author: Øystein Moseng
+ *
+ * License: www.highcharts.com/license
+ */
+
+(function (H) { // docs
+	
+	var seriesTypes = H.seriesTypes,
+		chartPrototype = H.Chart.prototype,
+		defaultOptions = H.getOptions(),
+		extend = H.extend;
+
+	// Add language option
+	extend(defaultOptions.lang, {
+		noData: 'No data to display'
+	});
+	
+	// Add default display options for message
+	defaultOptions.noData = {
+		position: {
+			x: 0,
+			y: 0,			
+			align: 'center',
+			verticalAlign: 'middle'
+		},
+		attr: {						
+		},
+		style: {	
+			fontWeight: 'bold',		
+			fontSize: '12px',
+			color: '#60606a'		
+		}
+	};
+
+	/**
+	 * Define hasData functions for series. These return true if there are data points on this series within the plot area
+	 */	
+	function hasDataPie() {
+		return !!this.points.length; /* != 0 */
+	}
+
+	seriesTypes.pie.prototype.hasData = hasDataPie;
+
+	if (seriesTypes.gauge) {
+		seriesTypes.gauge.prototype.hasData = hasDataPie;
+	}
+
+	if (seriesTypes.waterfall) {
+		seriesTypes.waterfall.prototype.hasData = hasDataPie;
+	}
+
+	H.Series.prototype.hasData = function () {
+		return this.dataMax !== undefined && this.dataMin !== undefined;
+	};
+	
+	/**
+	 * Display a no-data message.
+	 *
+	 * @param {String} str An optional message to show in place of the default one 
+	 */
+	chartPrototype.showNoData = function (str) {
+		var chart = this,
+			options = chart.options,
+			text = str || options.lang.noData,
+			noDataOptions = options.noData;
+
+		if (!chart.noDataLabel) {
+			chart.noDataLabel = chart.renderer.label(text, 0, 0, null, null, null, null, null, 'no-data')
+				.attr(noDataOptions.attr)
+				.css(noDataOptions.style)
+				.add();
+			chart.noDataLabel.align(extend(chart.noDataLabel.getBBox(), noDataOptions.position), false, 'plotBox');
+		}
+	};
+
+	/**
+	 * Hide no-data message	
+	 */	
+	chartPrototype.hideNoData = function () {
+		var chart = this;
+		if (chart.noDataLabel) {
+			chart.noDataLabel = chart.noDataLabel.destroy();
+		}
+	};
+
+	/**
+	 * Returns true if there are data points within the plot area now
+	 */	
+	chartPrototype.hasData = function () {
+		var chart = this,
+			series = chart.series,
+			i = series.length;
+
+		while (i--) {
+			if (series[i].hasData() && !series[i].options.isInternal) { 
+				return true;
+			}	
+		}
+
+		return false;
+	};
+
+	/**
+	 * Show no-data message if there is no data in sight. Otherwise, hide it.
+	 */
+	function handleNoData() {
+		var chart = this;
+		if (chart.hasData()) {
+			chart.hideNoData();
+		} else {
+			chart.showNoData();
+		}
+	}
+
+	/**
+	 * Add event listener to handle automatic display of no-data message
+	 */
+	chartPrototype.callbacks.push(function (chart) {
+		H.addEvent(chart, 'load', handleNoData);
+		H.addEvent(chart, 'redraw', handleNoData);
+	});
+
+}(Highcharts));

data/app/assets/javascripts/highstocks/themes/dark-blue.js

@@ -0,0 +1,254 @@
+/**
+ * Dark blue theme for Highcharts JS
+ * @author Torstein Hønsi
+ */
+
+Highcharts.theme = {
+	colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
+		"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+	chart: {
+		backgroundColor: {
+			linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
+			stops: [
+				[0, 'rgb(48, 48, 96)'],
+				[1, 'rgb(0, 0, 0)']
+			]
+		},
+		borderColor: '#000000',
+		borderWidth: 2,
+		className: 'dark-container',
+		plotBackgroundColor: 'rgba(255, 255, 255, .1)',
+		plotBorderColor: '#CCCCCC',
+		plotBorderWidth: 1
+	},
+	title: {
+		style: {
+			color: '#C0C0C0',
+			font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
+		}
+	},
+	subtitle: {
+		style: {
+			color: '#666666',
+			font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
+		}
+	},
+	xAxis: {
+		gridLineColor: '#333333',
+		gridLineWidth: 1,
+		labels: {
+			style: {
+				color: '#A0A0A0'
+			}
+		},
+		lineColor: '#A0A0A0',
+		tickColor: '#A0A0A0',
+		title: {
+			style: {
+				color: '#CCC',
+				fontWeight: 'bold',
+				fontSize: '12px',
+				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
+
+			}
+		}
+	},
+	yAxis: {
+		gridLineColor: '#333333',
+		labels: {
+			style: {
+				color: '#A0A0A0'
+			}
+		},
+		lineColor: '#A0A0A0',
+		minorTickInterval: null,
+		tickColor: '#A0A0A0',
+		tickWidth: 1,
+		title: {
+			style: {
+				color: '#CCC',
+				fontWeight: 'bold',
+				fontSize: '12px',
+				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
+			}
+		}
+	},
+	tooltip: {
+		backgroundColor: 'rgba(0, 0, 0, 0.75)',
+		style: {
+			color: '#F0F0F0'
+		}
+	},
+	toolbar: {
+		itemStyle: {
+			color: 'silver'
+		}
+	},
+	plotOptions: {
+		line: {
+			dataLabels: {
+				color: '#CCC'
+			},
+			marker: {
+				lineColor: '#333'
+			}
+		},
+		spline: {
+			marker: {
+				lineColor: '#333'
+			}
+		},
+		scatter: {
+			marker: {
+				lineColor: '#333'
+			}
+		},
+		candlestick: {
+			lineColor: 'white'
+		}
+	},
+	legend: {
+		itemStyle: {
+			font: '9pt Trebuchet MS, Verdana, sans-serif',
+			color: '#A0A0A0'
+		},
+		itemHoverStyle: {
+			color: '#FFF'
+		},
+		itemHiddenStyle: {
+			color: '#444'
+		}
+	},
+	credits: {
+		style: {
+			color: '#666'
+		}
+	},
+	labels: {
+		style: {
+			color: '#CCC'
+		}
+	},
+
+	navigation: {
+		buttonOptions: {
+			symbolStroke: '#DDDDDD',
+			hoverSymbolStroke: '#FFFFFF',
+			theme: {
+				fill: {
+					linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+					stops: [
+						[0.4, '#606060'],
+						[0.6, '#333333']
+					]
+				},
+				stroke: '#000000'
+			}
+		}
+	},
+
+	// scroll charts
+	rangeSelector: {
+		buttonTheme: {
+			fill: {
+				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+				stops: [
+					[0.4, '#888'],
+					[0.6, '#555']
+				]
+			},
+			stroke: '#000000',
+			style: {
+				color: '#CCC',
+				fontWeight: 'bold'
+			},
+			states: {
+				hover: {
+					fill: {
+						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+						stops: [
+							[0.4, '#BBB'],
+							[0.6, '#888']
+						]
+					},
+					stroke: '#000000',
+					style: {
+						color: 'white'
+					}
+				},
+				select: {
+					fill: {
+						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+						stops: [
+							[0.1, '#000'],
+							[0.3, '#333']
+						]
+					},
+					stroke: '#000000',
+					style: {
+						color: 'yellow'
+					}
+				}
+			}
+		},
+		inputStyle: {
+			backgroundColor: '#333',
+			color: 'silver'
+		},
+		labelStyle: {
+			color: 'silver'
+		}
+	},
+
+	navigator: {
+		handles: {
+			backgroundColor: '#666',
+			borderColor: '#AAA'
+		},
+		outlineColor: '#CCC',
+		maskFill: 'rgba(16, 16, 16, 0.5)',
+		series: {
+			color: '#7798BF',
+			lineColor: '#A6C7ED'
+		}
+	},
+
+	scrollbar: {
+		barBackgroundColor: {
+				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+				stops: [
+					[0.4, '#888'],
+					[0.6, '#555']
+				]
+			},
+		barBorderColor: '#CCC',
+		buttonArrowColor: '#CCC',
+		buttonBackgroundColor: {
+				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+				stops: [
+					[0.4, '#888'],
+					[0.6, '#555']
+				]
+			},
+		buttonBorderColor: '#CCC',
+		rifleColor: '#FFF',
+		trackBackgroundColor: {
+			linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+			stops: [
+				[0, '#000'],
+				[1, '#333']
+			]
+		},
+		trackBorderColor: '#666'
+	},
+
+	// special colors for some of the
+	legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
+	legendBackgroundColorSolid: 'rgb(35, 35, 70)',
+	dataLabelsColor: '#444',
+	textColor: '#C0C0C0',
+	maskColor: 'rgba(255,255,255,0.3)'
+};
+
+// Apply the theme
+var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

data/app/assets/javascripts/highstocks/themes/dark-green.js

@@ -0,0 +1,255 @@
+/**
+ * Dark blue theme for Highcharts JS
+ * @author Torstein Hønsi
+ */
+
+Highcharts.theme = {
+	colors: ["#DDDF0D", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
+		"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
+	chart: {
+		backgroundColor: {
+			linearGradient: [0, 0, 250, 500],
+			stops: [
+				[0, 'rgb(48, 96, 48)'],
+				[1, 'rgb(0, 0, 0)']
+			]
+		},
+		borderColor: '#000000',
+		borderWidth: 2,
+		className: 'dark-container',
+		plotBackgroundColor: 'rgba(255, 255, 255, .1)',
+		plotBorderColor: '#CCCCCC',
+		plotBorderWidth: 1
+	},
+	title: {
+		style: {
+			color: '#C0C0C0',
+			font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
+		}
+	},
+	subtitle: {
+		style: {
+			color: '#666666',
+			font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
+		}
+	},
+	xAxis: {
+		gridLineColor: '#333333',
+		gridLineWidth: 1,
+		labels: {
+			style: {
+				color: '#A0A0A0'
+			}
+		},
+		lineColor: '#A0A0A0',
+		tickColor: '#A0A0A0',
+		title: {
+			style: {
+				color: '#CCC',
+				fontWeight: 'bold',
+				fontSize: '12px',
+				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
+
+			}
+		}
+	},
+	yAxis: {
+		gridLineColor: '#333333',
+		labels: {
+			style: {
+				color: '#A0A0A0'
+			}
+		},
+		lineColor: '#A0A0A0',
+		minorTickInterval: null,
+		tickColor: '#A0A0A0',
+		tickWidth: 1,
+		title: {
+			style: {
+				color: '#CCC',
+				fontWeight: 'bold',
+				fontSize: '12px',
+				fontFamily: 'Trebuchet MS, Verdana, sans-serif'
+			}
+		}
+	},
+	tooltip: {
+		backgroundColor: 'rgba(0, 0, 0, 0.75)',
+		style: {
+			color: '#F0F0F0'
+		}
+	},
+	toolbar: {
+		itemStyle: {
+			color: 'silver'
+		}
+	},
+	plotOptions: {
+		line: {
+			dataLabels: {
+				color: '#CCC'
+			},
+			marker: {
+				lineColor: '#333'
+			}
+		},
+		spline: {
+			marker: {
+				lineColor: '#333'
+			}
+		},
+		scatter: {
+			marker: {
+				lineColor: '#333'
+			}
+		},
+		candlestick: {
+			lineColor: 'white'
+		}
+	},
+	legend: {
+		itemStyle: {
+			font: '9pt Trebuchet MS, Verdana, sans-serif',
+			color: '#A0A0A0'
+		},
+		itemHoverStyle: {
+			color: '#FFF'
+		},
+		itemHiddenStyle: {
+			color: '#444'
+		}
+	},
+	credits: {
+		style: {
+			color: '#666'
+		}
+	},
+	labels: {
+		style: {
+			color: '#CCC'
+		}
+	},
+
+
+	navigation: {
+		buttonOptions: {
+			symbolStroke: '#DDDDDD',
+			hoverSymbolStroke: '#FFFFFF',
+			theme: {
+				fill: {
+					linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+					stops: [
+						[0.4, '#606060'],
+						[0.6, '#333333']
+					]
+				},
+				stroke: '#000000'
+			}
+		}
+	},
+
+	// scroll charts
+	rangeSelector: {
+		buttonTheme: {
+			fill: {
+				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+				stops: [
+					[0.4, '#888'],
+					[0.6, '#555']
+				]
+			},
+			stroke: '#000000',
+			style: {
+				color: '#CCC',
+				fontWeight: 'bold'
+			},
+			states: {
+				hover: {
+					fill: {
+						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+						stops: [
+							[0.4, '#BBB'],
+							[0.6, '#888']
+						]
+					},
+					stroke: '#000000',
+					style: {
+						color: 'white'
+					}
+				},
+				select: {
+					fill: {
+						linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+						stops: [
+							[0.1, '#000'],
+							[0.3, '#333']
+						]
+					},
+					stroke: '#000000',
+					style: {
+						color: 'yellow'
+					}
+				}
+			}
+		},
+		inputStyle: {
+			backgroundColor: '#333',
+			color: 'silver'
+		},
+		labelStyle: {
+			color: 'silver'
+		}
+	},
+
+	navigator: {
+		handles: {
+			backgroundColor: '#666',
+			borderColor: '#AAA'
+		},
+		outlineColor: '#CCC',
+		maskFill: 'rgba(16, 16, 16, 0.5)',
+		series: {
+			color: '#7798BF',
+			lineColor: '#A6C7ED'
+		}
+	},
+
+	scrollbar: {
+		barBackgroundColor: {
+				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+				stops: [
+					[0.4, '#888'],
+					[0.6, '#555']
+				]
+			},
+		barBorderColor: '#CCC',
+		buttonArrowColor: '#CCC',
+		buttonBackgroundColor: {
+				linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+				stops: [
+					[0.4, '#888'],
+					[0.6, '#555']
+				]
+			},
+		buttonBorderColor: '#CCC',
+		rifleColor: '#FFF',
+		trackBackgroundColor: {
+			linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+			stops: [
+				[0, '#000'],
+				[1, '#333']
+			]
+		},
+		trackBorderColor: '#666'
+	},
+
+	// special colors for some of the
+	legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
+	legendBackgroundColorSolid: 'rgb(35, 35, 70)',
+	dataLabelsColor: '#444',
+	textColor: '#C0C0C0',
+	maskColor: 'rgba(255,255,255,0.3)'
+};
+
+// Apply the theme
+var highchartsOptions = Highcharts.setOptions(Highcharts.theme);