lixinru
/
YtIoT


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
							<!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 {
	min-width: 320px;
	max-width: 900px;
	height: 500px;
	margin: 0 auto
}

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


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

<div id="container"></div>

<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>