Highcharts Demo

author(s): Torstein Hønsi

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://highcharts.github.io/export-csv/export-csv.js"></script>

<!-- Load developer version of accessibility module to support 3D pie. This URL should not be used in production because of slow loading times. -->
<script src="http://github.highcharts.com/hc5-fixes/modules/accessibility.js"></script> 

<div id="container-line" class="container"></div>
<div id="container-pie" class="container"></div>
<div id="container-column" class="container"></div>
<div id="container-pie-3d" class="container"></div>

CSS

.container {
    max-width: 800px;
    height: 400px;
    margin: 3em auto;
}

caption {
	padding-bottom: 5px;
	font-family: 'Verdana';
	font-size: 14pt;
	font-weight: bold;
	color:#555555;
}

table {
	font-family: 'Verdana';
	font-size: 12pt;
	color:#555555;              
	border-collapse: collapse;
	border: 3px solid #CCCCCC;
	margin: 2px auto;	
}

tr {
  	border-bottom: 2px solid #EEEEEE;
}

th {
	border-left: 2px solid #EEEEEE;
	border-right: 2px solid #EEEEEE;
	padding: 12px 15px;
	border-collapse: collapse;
}

th[scope="col"] {
	background-color: #ffffee;
}

th[scope="row"] {
	background-color: #f0fcff;
	text-align:left;
}

td {
  	border-left: 2px solid #EEEEEE;
  	border-right: 2px solid #EEEEEE;
  	padding: 12px 15px;
  	border-collapse: collapse;
}

JavaScript

// First chart
Highcharts.chart('container-line', {
    chart: {
        type: 'spline',
        description: 'Commonly used desktop and laptop screen readers from January 2009 to July 2015 as reported in the Webaim Survey. JAWS remains the most used screen reader, but is steadily declining. ZoomText and WindowEyes are both displaying large growth from 2014 to 2015.'
    },

    legend: {
        symbolWidth: 40
    },

    title: {
        text: 'Commonly used screen readers from 2009 to 2015'
    },

    yAxis: {
        title: {
            text: 'Percentage of respondents'
        },
        labels: {
            format: '{value}%'
        },
        max: 75,
        tickInterval: 25
    },

    xAxis: {
        title: {
            text: 'Time'
        },
        categories: ['January 2009', 'December 2010', 'May 2012', 'January 2014', 'July 2015']
    },

    tooltip: {
        split: true,
        valueSuffix: '%'
    },

    series: [{
        name: 'JAWS',
        data: [74, 69.6, 63.7, 63.9, 43.7]
    }, {
        name: 'NVDA',
        data: [8, 34.8, 43.0, 51.2, 41.4],
        dashStyle: 'Dot'
    }, {
        name: 'VoiceOver',
        data: [6, 20.2, 30.7, 36.8, 30.9],
        dashStyle: 'ShortDot',
        color: Highcharts.getOptions().colors[7]
    }, {
        name: 'Window-Eyes',
        data: [23, 19.0, 20.7, 13.9, 29.6],
        dashStyle: 'Dash',
        color: Highcharts.getOptions().colors[0]
    }, {
        name: 'ZoomText',
        data: [0, 6.1, 6.8, 5.3, 27.5],
        dashStyle: 'ShortDashDot',
        color: Highcharts.getOptions().colors[8]
    }, {
        name: 'System Access To Go',
        data: [0, 16.2, 22.1, 26.2, 6.9],
        dashStyle: 'ShortDash',
        color: Highcharts.getOptions().colors[1]
    }, {
        name: 'ChromeVox',
        data: [0, 0, 2.8, 4.8, 2.8],
        dashStyle: 'DotDash',
        color: Highcharts.getOptions().colors[4]
    }, {
        name: 'Other',
        data: [0, 7.4, 5.9, 9.3, 6.5],
       ...