Graph 2

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<h1>Table and SVG Chart Depicting Fictional Data</h1>
<h2>Chart 3</h2>
<div id="container" tabindex="1" style="height: 400px; margin: auto; min-width: 510px;"></div>
<br>
<h2>Table 3</h2>
<table border="0" cellspacing="6" cellpadding="0">
<caption>Daily company fruit consumption 2015</caption>	
	<tbody>
  <tr>
		<th scope="col">&nbsp;</th>
		<th scope="col" colspan="9">Number of Fruits Eaten</th>
	</tr>
	<tr>
		<th scope="row">Fruit Type</th>
		<th scope="col" colspan="3">Plums</th>
		<th scope="col" colspan="3">Bananas</th>
		<th scope="col" colspan="3">Apples</th>
	</tr>
	<tr>
		<th scope="col">Month</th>
		<th scope="col">Low</th>
		<th scope="col">Average</th>
		<th scope="col">High</th>
		<th scope="col">Low</th>
		<th scope="col">Average</th>
		<th scope="col">High</th>
		<th scope="col">Low</th>
		<th scope="col">Average</th>
		<th scope="col">High</th>
	</tr>
	<tr>
		<th scope="row">January</th>
		<td>0</td>
		<td>8</td>
		<td>19</td>
		<td>0</td>
		<td>3</td>
		<td>6</td>
		<td>1</td>
		<td>4</td>
		<td>6</td>
	</tr>
	<tr>
		<th scope="row">February</th>
		<td>1</td>
		<td>11</td>
		<td>23</td>
		<td>1</td>
		<td>2</td>
		<td>4</td>
		<td>2</td>
		<td>4</td>
		<td>5</td>
	</tr>
	<tr>
		<th scope="row">March</th>
		<td>3</td>
		<td>16</td>
		<td>28</td>
		<td>0</td>
		<td>2</td>
		<td>5</td>
		<td>1</td>
		<td>3</td>
		<td>6</td>
	</tr>
	<tr>
		<th scope="row">April</th>
		<td>2</td>
		<td>15</td>
		<td>28</td>
		<td>2</td>
		<td>2</td>
		<td>5</td>
		<td>2</td>
		<td>3</td>
		<td>6</td>
	</tr>
	<tr>
		<th scope="row">May</th>
		<td>1</td>
		<td>15</td>
		<td>27</td>
		<td>1</td>
		<td>3</td>
		<td>6</td>
		<td>1</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<th...

JavaScript

$(function () {

    // Plugin for increasing chart accessibility
    (function (H) {
        H.Chart.prototype.callbacks.push(function (chart) {
            var options = chart.options,
                acsOptions = options.accessibility || {},
                series = chart.series,
                numSeries = series.length,
                numXAxes = chart.xAxis.length,
                numYAxes = chart.yAxis.length,
                titleElement = document.createElementNS('http://www.w3.org/2000/svg', 'title'),
                descElement = chart.container.getElementsByTagName('desc')[0],
                textElements = chart.container.getElementsByTagName('text'),
                titleId = 'highcharts-title-' + chart.index,
                descId = 'highcharts-desc-' + chart.index,
                chartDesc,
                chartTypes = [],
                i;

            // Get label for axis (x or y)
            function getAxisLabel(axis) {
                return axis.userOptions && axis.userOptions.description || axis.axisTitle && axis.axisTitle.textStr ||
                        axis.options.id || axis.categories && 'categories' || 'Undeclared';
            }

            if (!acsOptions.enabled) {
                return;
            }

            // Hide text elements from screen readers
            for (i = 0; i < textElements.length; ++i) {
                textElements[i].setAttribute('aria-hidden', 'true');
            }

            // Enumerate chart types
            for (i = 0; i < numSeries; ++i) {
                if (chartTypes.indexOf(series[i].type) < 0) {
                    chartTypes.push(series[i].type);
                }
            }

            // Build chart description
            chartDesc = (chartTypes.length === 1 ? chartTypes[0] + ' chart, ' : '') +
                        (options.title.text ? ' Title: ' + options.title.text + '.' : '') +
                        (options.subtitle.text ? ' ' + options.subtitle.text + '.' : '') +
  ...