Sample charts for E-BARQ project

author: Mike Zavarello

by Mike Zavarello

HTML

<!-- standard Highcharts scripts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div class="EBARQChart" id="container_EBARQChart"></div>

CSS

.EBARQChart { height: 400px; width: 100%; margin: 0 auto; }

JavaScript

$(document).ready(function(){

	var thisChartHeight = $("#EBARQChart").height();
	var thisChartWidth = $("#EBARQChart").width();
	var chart = '';
	
	var chartOptions = {
		chart: { renderTo: 'container_EBARQChart' }, 
		credits: { enabled: false }, 
		exporting: {
			buttons: {
				contextButton: { text: 'Save' },
			},
			chartOptions: {
				chart: { marginBottom: 100, marginLeft: 250, marginTop: 60 },
				title: { width: 625 }
			},
			filename: 'ebarq-report-for-your-horse',
			plotOptions: {
				bar: {
					dataLabels: {
						allowOverlap: true, style: { fontSize: '10px', fontWeight: 'normal' }, x: 0, y: 0
					}
				}
			}, sourceHeight: 700, sourceWidth: 800
		},
		legend: { enabled: false },
		series: [
			{ 
				name: 'Scores for your horse', 
				type: 'bar', 
				color: '#e0e6ef',
				data: [40,15,20,30,35,40,45,30,25,25,15,5,50,35],
				borderWidth: 0,
				dataLabels: { enabled: false },
				groupPadding: 0.1, 
				pointPadding: 0.1
			},{ 
				name: 'Breed average', 
				type: 'line', 
				data: [13.32382,28.88278,16.45181,39.9229,25.17041,28.46184,28.23864,3.629915,30.82148,22.62143,4.443331,9.835165,37.47263,40.95991], 
				lineColor: 'rgba(120, 120, 120, .5)',	// #787878 at 50% opacity
				lineWidth: 3, 
				marker: { 
					enabled: true, 
					fillColor: 'rgba(120, 120, 120, 1)',	// #787878 at 100% opacity
					radius: 5, 
					symbol: 'square' 
				}
			}
		],
		subtitle: { enabled: false },
		title: {
			align: 'left',
			style: {
				color: '#7793BB',
				fontFamily: 'Open Sans, Arial, sans-serif',
				fontSize: '18px',
				fontWeight: 'bold'
			},
			text: 'Comparison of your horse\'s scores (colored bars) to the population average (gray line)'
		},
		tooltip: {
			formatter: function () {
				var s = '<span style="font: bold 16px Open Sans, Arial, sans-serif">' + this.x + '</span><br />';
				$.each(this.points, function () {
					if (this.y == 0.01) {
						thisLabel = '<span style="font: normal 14px Open Sans, Arial, sans-serif; color:...