<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Highcharts Example</title>

		<style type="text/css">
#container {
    height: 500px;
}

#controls {
    margin: 0 auto;
    text-align: center;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 900px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

		</style>
	</head>
	<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/data.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<script src="../../code/modules/sonification.js"></script>
<script src="../../code/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        This chart demonstrates how you can play charts as sound,
        enabling large data sets to be visualized without the need
        for sight. This technique is referred to as Sonification,
        and has many uses, including increased accessibility for
        visually impaired users.
    </p>
</figure>

<div id="controls" style="">
    <button id="play">Play</button>
    <button id="pause">Pause</button>
    <button id="rewind">Rewind</button>
    <input type="range" id="speed" name="Speed" 
         min="0.5" max="2" value="1" step="0.05">
    <label for="speed">Speed</label>
</div>

<pre id="csv_data" style="display:none">2018-01-07,61,9,61,15.85714286
2018-01-14,66,20,61,33.85714286
2018-01-21,56,41,60,31.85714286
2018-01-28,61,46,58,39.28571429
2018-02-04,63,35,65,32.14285714
2018-02-11,61,47,61,35.85714286
2018-02-18,61,37,62,40.42857143
2018-02-25,55,44,54,45
2018-03-04,57,41,56,43.42857143
2018-03-11,62,38,61,36.57142857
2018-03-18,57,36,60,36.57142857
2018-03-25,59,40,61,38.14285714
2018-04-01,60,48,60,43.28571429
2018-04-08,64,38,62,41.14285714
2018-04-15,68,43,66,45.85714286
2018-04-22,64,51,61,46
2018-04-29,62,54,62,53.28571429
2018-05-06,67,60,62,62.57142857
2018-05-13,63,53,62,58.42857143
2018-05-20,62,67,63,60.14285714
2018-05-27,63,65,63,67.71428571
2018-06-03,67,63,65,65.14285714
2018-06-10,68,68,66,64
2018-06-17,65,74,67,68.57142857
2018-06-24,65,69,66,71.42857143
2018-07-01,66,82,67,75.14285714
2018-07-08,78,69,72,76.57142857
2018-07-15,74,75,74,75.14285714
2018-07-22,76,73,73,74.85714286
2018-07-29,76,77,75,76.57142857
2018-08-05,76,81,77,77.42857143
2018-08-12,80,76,81,79
2018-08-19,76,71,76,77
2018-08-26,74,73,75,73
2018-09-02,71,72,74,78.28571429
2018-09-09,70,61,72,75
2018-09-16,74,72,72,69.71428571
2018-09-23,71,63,71,70.42857143
2018-09-30,71,63,69,65.71428571
2018-10-07,68,71,71,68.14285714
2018-10-14,68,53,68,64
</pre>



		<script type="text/javascript">
// Sonification options
var sdInstruments = [{
        instrument: 'sineMajor',
        instrumentMapping: {
            duration: 200,
            frequency: 'y',
            volume: 0.7,
            pan: -1
        },
        instrumentOptions: {
            minFrequency: 220,
            maxFrequency: 1900
        }
    }],
    nyInstruments = [{
        instrument: 'triangleMajor',
        instrumentMapping: {
            duration: 200,
            frequency: 'y',
            volume: 0.6,
            pan: 1
        },
        instrumentOptions: {
            minFrequency: 220,
            maxFrequency: 1900
        }
    }];

// Point of interest options
var poiTime = Date.UTC(2018, 4, 6),
    poiEarcon = {
        // Define the earcon we want to play for the point of interest
        earcon: new Highcharts.sonification.Earcon({
            instruments: [{
                instrument: 'squareMajor',
                playOptions: {
                    // Play a quick rising frequency
                    frequency: function (time) {
                        return time * 1760 + 440;
                    },
                    volume: 0.1,
                    duration: 200
                }
            }]
        }),
        // Play this earcon if we hit the point of interest
        condition: function (point) {
            return point.x === poiTime;
        }
    };

// Create the chart
var chart = Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Play chart as sound'
    },
    subtitle: {
        text: 'Weekly temperature averages'
    },
    yAxis: {
        title: {
            text: 'Temperature (°F)'
        }
    },
    xAxis: {
        type: 'datetime',
        plotLines: [{
            value: poiTime,
            dashStyle: 'dash',
            width: 1,
            color: '#d33'
        }]
    },
    tooltip: {
        split: true,
        valueDecimals: 0,
        valueSuffix: '°F'
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false
            },
            cursor: 'pointer',
            // Sonify points on click
            point: {
                events: {
                    click: function () {
                        // Sonify all points at this x value
                        var targetX = this.x,
                            chart = this.series.chart;
                        chart.series.forEach(function (series) {
                            // Map instruments to the options for this series
                            var instruments = series.options.id === 'sd' ?
                                sdInstruments : nyInstruments;
                            // See if we have a point with the targetX
                            series.points.some(function (point) {
                                if (point.x === targetX) {
                                    point.sonify({
                                        instruments: instruments
                                    });
                                    return true;
                                }
                                return false;
                            });
                        });
                    }
                }
            }
        }
    },
    // Data source: https://www.ncdc.noaa.gov
    data: {
        csv: document.getElementById('csv_data').innerHTML,
        firstRowAsNames: false,
        parsed: function (columns) {
            columns.splice(1, 2); // Remove the non-average columns
        }
    },
    series: [{
        name: 'San Diego',
        id: 'sd',
        color: '#f4b042'
    }, {
        name: 'New York',
        id: 'ny',
        color: '#41aff4'
    }]
});


// Utility function that highlights a point
function highlightPoint(event, point) {
    var chart = point.series.chart,
        hasVisibleSeries = chart.series.some(function (series) {
            return series.visible;
        });
    if (!point.isNull && hasVisibleSeries) {
        point.onMouseOver(); // Show the hover marker and tooltip
    } else {
        if (chart.tooltip) {
            chart.tooltip.hide(0);
        }
    }
}


// On speed change we reset the sonification
document.getElementById('speed').onchange = function () {
    chart.cancelSonify();
};


// Add sonification button handlers
document.getElementById('play').onclick = function () {
    if (!chart.sonification.timeline || chart.sonification.timeline.atStart()) {
        chart.sonify({
            duration: 5000 / document.getElementById('speed').value,
            order: 'simultaneous',
            pointPlayTime: 'x',
            seriesOptions: [{
                id: 'sd',
                instruments: sdInstruments,
                onPointStart: highlightPoint,
                // Play earcon at point of interest
                earcons: [poiEarcon]
            }, {
                id: 'ny',
                instruments: nyInstruments,
                onPointStart: highlightPoint
            }],
            // Delete timeline on end
            onEnd: function () {
                if (chart.sonification.timeline) {
                    delete chart.sonification.timeline;
                }
            }
        });
    } else {
        chart.resumeSonify();
    }
};
document.getElementById('pause').onclick = function () {
    chart.pauseSonify();
};
document.getElementById('rewind').onclick = function () {
    chart.rewindSonify();
};

		</script>
	</body>
</html>
