Highcharts Demo

by oysteinmoseng

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <button id="sonify">Click to play chart</button>
    <div id="container"></div>
    <p class="highcharts-description">This chart's series are sonified simultaneously.</p>
</figure>

CSS

* {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

.highcharts-figure {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

#sonify {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    background-color: #fff;
    border: 1px solid #25386f;
    color: #25386f;
    font-size: 0.9rem;
    min-height: 30px;
    font-weight: 500;
    border-radius: 4px;
    padding: 0.375rem 0;
    width: 10rem;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
    text-align: center;
    cursor: pointer;
}

#sonify:hover {
    background-color: #25386f;
    color: #fff;
}

.highcharts-description {
    margin: 0.3rem 10px;
}

JavaScript

const chart = Highcharts.chart('container', {
    title: {
        text: 'Series sonified simultaneously',
        align: 'left',
        margin: 25
    },

    subtitle: {
        text: 'Earcon when finished',
        align: 'left'
    },

    tooltip: {
        shared: true,
        valueDecimals: 3
    },

    sonification: {
        order: 'sequential',
        duration: 4000,
        events: {
            onEnd: function (e) {
                const s = e.chart.sonification;
                s.playNote('vibraphone', { note: 'G4' });
                s.playNote('vibraphone', { note: 'C4', pan: -1 });
                s.playNote('vibraphone', { note: 'E4', pan: 0 }, 200);
                s.playNote('vibraphone', { note: 'C5', pan: 1 }, 400);
            }
        }
    },

    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    },

    xAxis: {
        crosshair: {
            enabled: true,
            width: 3,
            color: '#9088b0'
        }
    },

    series: [{
        sonification: {
            tracks: [{
                instrument: 'flute',
                mapping: {
                    pan: -1 // Pan this series left
                }
            }]
        },
        // Generate some data for series 1
        data: (function () {
            const data = [];
            for (let i = 0; i < 100; ++i) {
                data.push(Math.sin(i / 30) * 5);
            }
            return data;
        }())
    }, {
        sonification: {
            tracks: [{
                instrument: 'piano',
                mapping: {
                    pan: 1 // Pan this series right
                }
            }]
        },
        // Generate some data for series 2
        data: (function () {
            const data = [];
            for (let i = 0; i < 100; ++i) {
                data.push(Math.sin((i + 30) / 20) * 6);
            }
            return data;
        }())
    }]
});

// Click...