Highsmorks Angular Directive

I was not very happy with how the highcharts-ng, which uses its own pretty much undocumented version of chartConfig for some bizarre reason.

The directive is called Highsmorks, only to create a fun unique name.

References

I highly recommend you go through the examples and API to learn how to use chartConfig.

HighStock API - http://api.highcharts.com/highstock HighStock Demos - http://www.highcharts.com/stock/demo

HighChart API - http://api.highcharts.com/highcharts HighChart Demos - http://www.highcharts.com/demo

HTML

Setting up a chart is easy.

<highsmorks id="chart1" chart-config="{{chartConfig}}" type="StockChart"></highsmorks>

Note "chart-config" this translates to chartConfig on the angular side.

JavaScript

To setup the chart, you will need to create a chartConfig. The chartConfig I'm using is exactly the same as defined in the reference.

Here is a very simple one for example:

$scope.chartConfig = {
	title: {
		text: 'Chart Title'
	},
	subtitle: {
		text: 'Chart Subtitle'
	},
	xAxis: {
		gapGridLineWidth: 0
	},
	scrollbar: {
		enabled: false
	},
	navigator: {
		enabled: false
	},
	rangeSelector: {
		enabled: false
	},
	series : [{
		name : 'Series Name',
		data: [[1420088400000,0.89],[1388552400000,47.56],[1357016400000,39.29]],
		tooltip: {
			valueDecimals: 2
		}
	}]
};

$broadcast Methods

There is two ways to pass in data to the chartConfig or you can use a $broadcast method if you are loading the data via AJAX.

addSeries

This adds a series to a chart, the object is as defined in the HighStocks API.

$scope.$broadcast('highsmorks',{
	id: 'chart1',
	method: 'addSeries',
	obj: {
		data: [[1420088400000,0.89],[1388552400000,47.56],[1357016400000,39.29],[1325394000000,25.16],[1293858000000,7.73]],
		name: 'ytds',
		type: 'area',
		gapSize: 5,
		tooltip: {
			valueDecimals: 2,
			valueSuffix: '%'
		}
	}
});

setTitle

Sets the title and/or subtitle dynamically.

$scope.$broadcast('highsmorks',{
	id: 'chart1',
	method: 'setTitle',
	obj: {
		title: 'New Title',
		subtitle: 'New Subtitle'
	}
});

redraw

Redraws the chart.

$scope.$broadcast('highsmorks',{
	id: 'chart1',
	method: 'redraw'
});

addPoint

Adds another point to a specific series.

$scope.$broadcast('highsmorks',{
	id: 'chart1',
	method: 'addPoint',
	seriesName: 'ytds',
	obj: {
		x: 1520088400000,
		y: -25.0
	}
});

Themes

If you want all of your charts in your app to follow the same theme, you may use a theme file along with the setOptions() method.

Example:

// Global Theme for Highcharts
Highcharts.theme = {
	colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
	credits: { enabled: false }
};
// Apply the theme with setOptions().
Highcharts.setOptions(Highcharts.theme);

Comprehensive instructions are available from highcharts directly.

http://www.highcharts.com/docs/chart-design-and-style/themes

Examples

Doughnut chart for Market Capitalization

$scope.marketCapConfig = {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: 0,
		plotShadow: false
	},
	title: {
		text: 'Market<br/>Capitalization',
		align: 'center',
		verticalAlign: 'middle',
		y: -15
	},
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	},
	plotOptions: {
		pie: {
			dataLabels: {
				enabled: true,
				distance: -50,
				style: {
					fontWeight: 'bold',
					color: 'white',
					textShadow: '0px 1px 2px black'
				}
			},
			startAngle: 0,
			endAngle: 360,
			center: ['50%', '50%']
		}
	},
	series: [{
		type: 'pie',
		name: 'Account Percent',
		innerSize: '50%',
		data: [
			['Small Cap',   10.38],
			['Other',       56.33],
			['Large Cap',   24.03],
			['Other',        9.26]
		]
	}]
};

Simple Line Chart

Data gets added in later by using the broadcast method addSeries above.

$scope.chartCfg = {
	title: {
		text: ''
	},
	subtitle: {
		text: ''
	},
	xAxis: {
		gapGridLineWidth: 0
	},
	scrollbar: {
		enabled: false
	},
	navigator: {
		enabled: false
	},
	rangeSelector: {
		enabled: false
	}
};

// Later after ytds data is generated from an AJAX call.
$scope.$broadcast('highsmorks',{
	id: account.number,
	method: 'addSeries',
	obj: {
		data: ytds,
		name: 'ytds',
		type: 'area',
		gapSize: 5,
		tooltip: {
			valueDecimals: 2,
			valueSuffix: '%'
		}
	}
});