Highcharts Demo
by Ryan Brackett
HTML
<script src="http://www.nghs.com/includes/js/highcharts/highcharts.js"></script>
<script src="http://www.nghs.com/includes/js/highcharts/exporting.js"></script>
<!-- start GRAPH -->
<div class="highcharts-graph">
<script type="text/javascript">
$(function () {
$('#graph-003').highcharts({
chart: {
style: {fontFamily: 'Arial, sans-serif'}
},
title: {
text: 'Cardiovascular Care Unit (CVU)',
style: {
fontSize: '18px',
fontWeight: 'bold'
}
},
subtitle: {text: 'Lower numbers are better. Blue line shows national average.'},
legend: {itemDistance: 50},
xAxis: {
categories: [
'Jan - Mar 2012 (0/415)',
'Apr - Jun 2012 (0/462)',
'Jul - Sep 2012 (0/488)',
'Oct - Dec 2012 (0/499)',
'Jan - Mar 2013 (0/445)',
'Apr - Jun 2013 (1/679)',
'Jul - Sep 2013 (0/442)',
'Oct - Dec 2013 (0/485)']
},
yAxis: {
min: 0,
title: {text: 'Occurrences'},
gridLineColor: '#ededed'
},
tooltip: {
pointFormat: '<b>{point.y:.2f}%</b>',
borderWidth: 0,
shadow: false,
style: {padding: '10px'}
},
series: [{
type: 'column',
name: 'Infection Rate per 1000 central line days',
color: '#B7BF1C',
data: [0, 0, 0, 0, 0, 1.5, 0, 0],
pointWidth: 60,
dataLabels: {enabled: true},
},
{
type: 'spline',
name: 'NHSN Average',
data: [1.4, 1.4, 1.4, 1.4, 1.4, 1.2, 1.2, 1.2],
lineWidth: '2px',
marker: {enabled: false},
enableMouseTracking: false
}],
credits: {enabled: false},
});
});
</script>
<div class="graph-container"...
CSS
body {
font-family: arial
}