<p><a href="http://www.chart2music.com" target="_blank">Chart2Music</a> lets you explore a chart using sound. To hear the chart, either tab to it or click on it, and use the arrow keys. If you're running a screen reader, it will speak after the sounds play. Press H to learn about other hotkeys available for each chart.</p>
<p>This chart is a reproduction of <a href="https://markets.ft.com/data">the <i>Financial Times</i> Markets Data page's Equity indices</a>. The chart was visually reproduced as closely as possible, to show how sonification can be seamlessly incorporated into existing complex data visualizations with no loss of functionality or change to visuals.</p>
<p><b>Special feature:</b> In this chart, the lines can be hidden by activating each line's label in the legend. After hiding a line from the view, that line will also be hidden from the sonification. Try it out by tabbing to the legend, using the arrow keys to navigate between legend items, and using the spacebar to show/hide individual lines. When you shift+tab back to the chart, notice how the group is no longer available. You can Page Up / Page Down to travel between lines, skipping the line you just hid.</p>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
<div id="cc"></div>#cc {
position: absolute;
bottom: 10px;
right: 10px;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
background-color: #ddd;
max-width: 400px;
}
#cc:not(:has(div)){
display: none;
}import {c2mChart} from "https://cdn.skypack.dev/chart2music@1";
import {DateTime} from "https://cdn.skypack.dev/luxon@3.2.1";
// The chart title (shared between HighChart's visuals and C2M's screen reader text)
const title = "Equity Indices";
// Raw data to populate the graph
const sp_data = [
{
time: "2023-01-25T14:30:00",
value: 0.0
},
{
time: "2023-01-25T14:35:00.01",
value: -1.19
},
{
time: "2023-01-25T14:39:59.99",
value: -1.1
},
{
time: "2023-01-25T14:44:59.971",
value: -1.06
},
{
time: "2023-01-25T14:50:00.038",
value: -1.16
},
{
time: "2023-01-25T14:55:00.019",
value: -1.36
},
{
time: "2023-01-25T15:00:00",
value: -1.5
},
{
time: "2023-01-25T15:04:59.981",
value: -1.4
},
{
time: "2023-01-25T15:09:59.962",
value: -1.24
},
{
time: "2023-01-25T15:15:00.029",
value: -1.4
},
{
time: "2023-01-25T15:20:00.01",
value: -1.32
},
{
time: "2023-01-25T15:24:59.99",
value: -1.47
},
{
time: "2023-01-25T15:29:59.971",
value: -1.39
},
{
time: "2023-01-25T15:35:00.038",
value: -1.53
},
{
time: "2023-01-25T15:40:00.019",
value: -1.65
},
{
time: "2023-01-25T15:45:00",
value: -1.53
},
{
time: "2023-01-25T15:49:59.981",
value: -1.52
},
{
time: "2023-01-25T15:54:59.962",
value: -1.52
},
{
time: "2023-01-25T16:00:00.029",
value: -1.37
},
{
time: "2023-01-25T16:05:00.01",
value: -1.32
},
{
time: "2023-01-25T16:09:59.99",
value: -1.41
},
{
time: "2023-01-25T16:14:59.971",
value: -1.25
},
{
time: "2023-01-25T16:20:00.038",
value: -1.12
},
{
time: "2023-01-25T16:25:00.019",
value: -1.1
},
{
time: "2023-01-25T16:30:00",
value: -1.08
},
{
time: "2023-01-25T16:34:59.981",
value: -1.03
},
{
time: "2023-01-25T16:39:59.962",
value: -0.99
},
{
time: "2023-01-25T16:45:00.029",
value: -1.05
},
{
time: "2023-01-25T16:50:00.01",
value: -0.99
},
{
time: "2023-01-25T16:54:59.99",
value: -0.77
},
{
time: "2023-01-25T16:59:59.971",
value: -0.8
},
{
time: "2023-01-25T17:05:00.038",
value: -0.84
},
{
time: "2023-01-25T17:10:00.019",
value: -0.84
},
{
time: "2023-01-25T17:15:00",
value: -0.84
},
{
time: "2023-01-25T17:19:59.981",
value: -0.84
},
{
time: "2023-01-25T17:24:59.962",
value: -0.9
},
{
time: "2023-01-25T17:30:00.029",
value: -0.94
},
{
time: "2023-01-25T17:35:00.01",
value: -0.92
},
{
time: "2023-01-25T17:39:59.99",
value: -0.85
},
{
time: "2023-01-25T17:44:59.971",
value: -0.8
},
{
time: "2023-01-25T17:50:00.038",
value: -0.8
},
{
time: "2023-01-25T17:55:00.019",
value: -0.78
},
{
time: "2023-01-25T18:00:00",
value: -0.8
},
{
time: "2023-01-25T18:04:59.981",
value: -0.74
},
{
time: "2023-01-25T18:09:59.962",
value: -0.66
},
{
time: "2023-01-25T18:15:00.029",
value: -0.57
},
{
time: "2023-01-25T18:20:00.01",
value: -0.54
},
{
time: "2023-01-25T18:24:59.99",
value: -0.48
},
{
time: "2023-01-25T18:29:59.971",
value: -0.41
},
{
time: "2023-01-25T18:35:00.038",
value: -0.48
},
{
time: "2023-01-25T18:40:00.019",
value: -0.45
},
{
time: "2023-01-25T18:45:00",
value: -0.45
},
{
time: "2023-01-25T18:49:59.981",
value: -0.29
},
{
time: "2023-01-25T18:54:59.962",
value: -0.37
},
{
time: "2023-01-25T19:00:00.029",
value: -0.36
},
{
time: "2023-01-25T19:05:00.01",
value: -0.38
},
{
time: "2023-01-25T19:09:59.99",
value: -0.35
},
{
time: "2023-01-25T19:14:59.971",
value: -0.21
},
{
time: "2023-01-25T19:20:00.038",
value: -0.07
},
{
time: "2023-01-25T19:25:00.019",
value: -0.2
},
{
time: "2023-01-25T19:30:00",
value: -0.27
},
{
time: "2023-01-25T19:34:59.981",
value: -0.39
},
{
time: "2023-01-25T19:39:59.962",
value: -0.33
},
{
time: "2023-01-25T19:45:00.029",
value: -0.25
},
{
time: "2023-01-25T19:50:00.01",
value: -0.24
},
{
time: "2023-01-25T19:54:59.99",
value: -0.17
},
{
time: "2023-01-25T19:59:59.971",
value: -0.16
},
{
time: "2023-01-25T20:05:00.038",
value: 0.0
},
{
time: "2023-01-25T20:10:00.019",
value: 0.04
},
{
time: "2023-01-25T20:15:00",
value: -0.07
},
{
time: "2023-01-25T20:19:59.981",
value: -0.11
},
{
time: "2023-01-25T20:24:59.962",
value: -0.19
},
{
time: "2023-01-25T20:30:00.029",
value: -0.11
},
{
time: "2023-01-25T20:35:00.01",
value: -0.09
},
{
time: "2023-01-25T20:39:59.99",
value: -0.08
},
{
time: "2023-01-25T20:44:59.971",
value: -0.16
},
{
time: "2023-01-25T20:50:00.038",
value: -0.18
},
{
time: "2023-01-25T20:55:00.019",
value: -0.19
},
{
time: "2023-01-25T21:00:00",
value: -0.02
}
].map(({ time, value }) => [new Date(time).valueOf(), value]);
const dow_data = [
{
time: "2023-01-25T14:30:00",
value: 0.0
},
{
time: "2023-01-25T14:35:00.01",
value: -0.71
},
{
time: "2023-01-25T14:39:59.99",
value: -0.72
},
{
time: "2023-01-25T14:44:59.971",
value: -0.62
},
{
time: "2023-01-25T14:50:00.038",
value: -0.7
},
{
time: "2023-01-25T14:55:00.019",
value: -0.82
},
{
time: "2023-01-25T15:00:00",
value: -0.9
},
{
time: "2023-01-25T15:04:59.981",
value: -0.91
},
{
time: "2023-01-25T15:09:59.962",
value: -0.74
},
{
time: "2023-01-25T15:15:00.029",
value: -0.84
},
{
time: "2023-01-25T15:20:00.01",
value: -0.83
},
{
time: "2023-01-25T15:24:59.99",
value: -0.97
},
{
time: "2023-01-25T15:29:59.971",
value: -0.99
},
{
time: "2023-01-25T15:35:00.038",
value: -1.16
},
{
time: "2023-01-25T15:40:00.019",
value: -1.33
},
{
time: "2023-01-25T15:45:00",
value: -1.22
},
{
time: "2023-01-25T15:49:59.981",
value: -1.22
},
{
time: "2023-01-25T15:54:59.962",
value: -1.27
},
{
time: "2023-01-25T16:00:00.029",
value: -1.12
},
{
time: "2023-01-25T16:05:00.01",
value: -1.08
},
{
time: "2023-01-25T16:09:59.99",
value: -1.13
},
{
time: "2023-01-25T16:14:59.971",
value: -1.06
},
{
time: "2023-01-25T16:20:00.038",
value: -0.95
},
{
time: "2023-01-25T16:25:00.019",
value: -0.91
},
{
time: "2023-01-25T16:30:00",
value: -0.88
},
{
time: "2023-01-25T16:34:59.981",
value: -0.85
},
{
time: "2023-01-25T16:39:59.962",
value: -0.81
},
{
time: "2023-01-25T16:45:00.029",
value: -0.84
},
{
time: "2023-01-25T16:50:00.01",
value: -0.8
},
{
time: "2023-01-25T16:54:59.99",
value: -0.58
},
{
time: "2023-01-25T16:59:59.971",
value: -0.61
},
{
time: "2023-01-25T17:05:00.038",
value: -0.61
},
{
time: "2023-01-25T17:10:00.019",
value: -0.59
},
{
time: "2023-01-25T17:15:00",
value: -0.64
},
{
time: "2023-01-25T17:19:59.981",
value: -0.62
},
{
time: "2023-01-25T17:24:59.962",
value: -0.66
},
{
time: "2023-01-25T17:30:00.029",
value: -0.69
},
{
time: "2023-01-25T17:35:00.01",
value: -0.65
},
{
time: "2023-01-25T17:39:59.99",
value: -0.6
},
{
time: "2023-01-25T17:44:59.971",
value: -0.56
},
{
time: "2023-01-25T17:50:00.038",
value: -0.54
},
{
time: "2023-01-25T17:55:00.019",
value: -0.53
},
{
time: "2023-01-25T18:00:00",
value: -0.57
},
{
time: "2023-01-25T18:04:59.981",
value: -0.52
},
{
time: "2023-01-25T18:09:59.962",
value: -0.44
},
{
time: "2023-01-25T18:15:00.029",
value: -0.35
},
{
time: "2023-01-25T18:20:00.01",
value: -0.32
},
{
time: "2023-01-25T18:24:59.99",
value: -0.27
},
{
time: "2023-01-25T18:29:59.971",
value: -0.23
},
{
time: "2023-01-25T18:35:00.038",
value: -0.27
},
{
time: "2023-01-25T18:40:00.019",
value: -0.27
},
{
time: "2023-01-25T18:45:00",
value: -0.26
},
{
time: "2023-01-25T18:49:59.981",
value: -0.12
},
{
time: "2023-01-25T18:54:59.962",
value: -0.23
},
{
time: "2023-01-25T19:00:00.029",
value: -0.22
},
{
time: "2023-01-25T19:05:00.01",
value: -0.26
},
{
time: "2023-01-25T19:09:59.99",
value: -0.2
},
{
time: "2023-01-25T19:14:59.971",
value: -0.12
},
{
time: "2023-01-25T19:20:00.038",
value: -0.02
},
{
time: "2023-01-25T19:25:00.019",
value: -0.13
},
{
time: "2023-01-25T19:30:00",
value: -0.19
},
{
time: "2023-01-25T19:34:59.981",
value: -0.29
},
{
time: "2023-01-25T19:39:59.962",
value: -0.22
},
{
time: "2023-01-25T19:45:00.029",
value: -0.14
},
{
time: "2023-01-25T19:50:00.01",
value: -0.12
},
{
time: "2023-01-25T19:54:59.99",
value: -0.09
},
{
time: "2023-01-25T19:59:59.971",
value: -0.06
},
{
time: "2023-01-25T20:05:00.038",
value: 0.06
},
{
time: "2023-01-25T20:10:00.019",
value: 0.09
},
{
time: "2023-01-25T20:15:00",
value: -0.02
},
{
time: "2023-01-25T20:19:59.981",
value: -0.05
},
{
time: "2023-01-25T20:24:59.962",
value: -0.11
},
{
time: "2023-01-25T20:30:00.029",
value: -0.05
},
{
time: "2023-01-25T20:35:00.01",
value: -0.04
},
{
time: "2023-01-25T20:39:59.99",
value: -0.03
},
{
time: "2023-01-25T20:44:59.971",
value: -0.09
},
{
time: "2023-01-25T20:50:00.038",
value: -0.12
},
{
time: "2023-01-25T20:55:00.019",
value: -0.12
},
{
time: "2023-01-25T21:00:00",
value: 0.03
}
].map(({ time, value }) => [new Date(time).valueOf(), value]);
const tsx_data = [
{
time: "2023-01-25T14:30:00",
value: 0.0
},
{
time: "2023-01-25T14:35:00.01",
value: -0.85
},
{
time: "2023-01-25T14:39:59.99",
value: -0.72
},
{
time: "2023-01-25T14:44:59.971",
value: -0.66
},
{
time: "2023-01-25T14:50:00.038",
value: -0.8
},
{
time: "2023-01-25T14:55:00.019",
value: -0.96
},
{
time: "2023-01-25T15:00:00",
value: -1.04
},
{
time: "2023-01-25T15:04:59.981",
value: -0.87
},
{
time: "2023-01-25T15:09:59.962",
value: -0.73
},
{
time: "2023-01-25T15:15:00.029",
value: -0.81
},
{
time: "2023-01-25T15:20:00.01",
value: -0.77
},
{
time: "2023-01-25T15:24:59.99",
value: -0.8
},
{
time: "2023-01-25T15:29:59.971",
value: -0.75
},
{
time: "2023-01-25T15:35:00.038",
value: -0.75
},
{
time: "2023-01-25T15:40:00.019",
value: -0.83
},
{
time: "2023-01-25T15:45:00",
value: -0.73
},
{
time: "2023-01-25T15:49:59.981",
value: -0.64
},
{
time: "2023-01-25T15:54:59.962",
value: -0.69
},
{
time: "2023-01-25T16:00:00.029",
value: -0.65
},
{
time: "2023-01-25T16:05:00.01",
value: -0.65
},
{
time: "2023-01-25T16:09:59.99",
value: -0.68
},
{
time: "2023-01-25T16:14:59.971",
value: -0.66
},
{
time: "2023-01-25T16:20:00.038",
value: -0.58
},
{
time: "2023-01-25T16:25:00.019",
value: -0.55
},
{
time: "2023-01-25T16:30:00",
value: -0.52
},
{
time: "2023-01-25T16:34:59.981",
value: -0.45
},
{
time: "2023-01-25T16:39:59.962",
value: -0.41
},
{
time: "2023-01-25T16:45:00.029",
value: -0.4
},
{
time: "2023-01-25T16:50:00.01",
value: -0.46
},
{
time: "2023-01-25T16:54:59.99",
value: -0.37
},
{
time: "2023-01-25T16:59:59.971",
value: -0.38
},
{
time: "2023-01-25T17:05:00.038",
value: -0.42
},
{
time: "2023-01-25T17:10:00.019",
value: -0.37
},
{
time: "2023-01-25T17:15:00",
value: -0.37
},
{
time: "2023-01-25T17:19:59.981",
value: -0.37
},
{
time: "2023-01-25T17:24:59.962",
value: -0.38
},
{
time: "2023-01-25T17:30:00.029",
value: -0.39
},
{
time: "2023-01-25T17:35:00.01",
value: -0.39
},
{
time: "2023-01-25T17:39:59.99",
value: -0.36
},
{
time: "2023-01-25T17:44:59.971",
value: -0.32
},
{
time: "2023-01-25T17:50:00.038",
value: -0.34
},
{
time: "2023-01-25T17:55:00.019",
value: -0.34
},
{
time: "2023-01-25T18:00:00",
value: -0.33
},
{
time: "2023-01-25T18:04:59.981",
value: -0.32
},
{
time: "2023-01-25T18:09:59.962",
value: -0.26
},
{
time: "2023-01-25T18:15:00.029",
value: -0.22
},
{
time: "2023-01-25T18:20:00.01",
value: -0.2
},
{
time: "2023-01-25T18:24:59.99",
value: -0.2
},
{
time: "2023-01-25T18:29:59.971",
value: -0.15
},
{
time: "2023-01-25T18:35:00.038",
value: -0.18
},
{
time: "2023-01-25T18:40:00.019",
value: -0.16
},
{
time: "2023-01-25T18:45:00",
value: -0.18
},
{
time: "2023-01-25T18:49:59.981",
value: -0.1
},
{
time: "2023-01-25T18:54:59.962",
value: -0.13
},
{
time: "2023-01-25T19:00:00.029",
value: -0.17
},
{
time: "2023-01-25T19:05:00.01",
value: -0.21
},
{
time: "2023-01-25T19:09:59.99",
value: -0.18
},
{
time: "2023-01-25T19:14:59.971",
value: -0.1
},
{
time: "2023-01-25T19:20:00.038",
value: -0.05
},
{
time: "2023-01-25T19:25:00.019",
value: -0.14
},
{
time: "2023-01-25T19:30:00",
value: -0.22
},
{
time: "2023-01-25T19:34:59.981",
value: -0.23
},
{
time: "2023-01-25T19:39:59.962",
value: -0.18
},
{
time: "2023-01-25T19:45:00.029",
value: -0.14
},
{
time: "2023-01-25T19:50:00.01",
value: -0.09
},
{
time: "2023-01-25T19:54:59.99",
value: -0.07
},
{
time: "2023-01-25T19:59:59.971",
value: -0.06
},
{
time: "2023-01-25T20:05:00.038",
value: -0.02
},
{
time: "2023-01-25T20:10:00.019",
value: 0.01
},
{
time: "2023-01-25T20:15:00",
value: -0.06
},
{
time: "2023-01-25T20:19:59.981",
value: -0.13
},
{
time: "2023-01-25T20:24:59.962",
value: -0.17
},
{
time: "2023-01-25T20:30:00.029",
value: -0.11
},
{
time: "2023-01-25T20:35:00.01",
value: -0.1
},
{
time: "2023-01-25T20:39:59.99",
value: -0.11
},
{
time: "2023-01-25T20:44:59.971",
value: -0.15
},
{
time: "2023-01-25T20:50:00.038",
value: -0.15
},
{
time: "2023-01-25T20:55:00.019",
value: -0.19
},
{
time: "2023-01-25T21:00:00",
value: -0.15
}
].map(({ time, value }) => [new Date(time).valueOf(), value]);
const ibovespa_data = [
{
time: "2023-01-25T13:05:00.01",
value: 0.02
},
{
time: "2023-01-25T13:09:59.99",
value: -0.13
},
{
time: "2023-01-25T13:14:59.971",
value: -0.22
},
{
time: "2023-01-25T13:20:00.038",
value: -0.37
},
{
time: "2023-01-25T13:25:00.019",
value: -0.41
},
{
time: "2023-01-25T13:30:00",
value: -0.52
},
{
time: "2023-01-25T13:34:59.981",
value: -0.78
},
{
time: "2023-01-25T13:39:59.962",
value: -0.91
},
{
time: "2023-01-25T13:45:00.029",
value: -0.71
},
{
time: "2023-01-25T13:50:00.01",
value: -0.56
},
{
time: "2023-01-25T13:54:59.99",
value: -0.49
},
{
time: "2023-01-25T13:59:59.971",
value: -0.54
},
{
time: "2023-01-25T14:05:00.038",
value: -0.65
},
{
time: "2023-01-25T14:10:00.019",
value: -0.44
},
{
time: "2023-01-25T14:15:00",
value: -0.51
},
{
time: "2023-01-25T14:19:59.981",
value: -0.68
},
{
time: "2023-01-25T14:24:59.962",
value: -0.7
},
{
time: "2023-01-25T14:30:00.029",
value: -0.59
},
{
time: "2023-01-25T14:35:00.01",
value: -0.52
},
{
time: "2023-01-25T14:39:59.99",
value: -0.76
},
{
time: "2023-01-25T14:44:59.971",
value: -0.48
},
{
time: "2023-01-25T14:50:00.038",
value: -0.48
},
{
time: "2023-01-25T14:55:00.019",
value: -0.62
},
{
time: "2023-01-25T15:00:00",
value: -0.74
},
{
time: "2023-01-25T15:04:59.981",
value: -0.7
},
{
time: "2023-01-25T15:09:59.962",
value: -0.63
},
{
time: "2023-01-25T15:15:00.029",
value: -0.49
},
{
time: "2023-01-25T15:20:00.01",
value: -0.5
},
{
time: "2023-01-25T15:24:59.99",
value: -0.4
},
{
time: "2023-01-25T15:29:59.971",
value: -0.45
},
{
time: "2023-01-25T15:35:00.038",
value: -0.3
},
{
time: "2023-01-25T15:40:00.019",
value: -0.23
},
{
time: "2023-01-25T15:45:00",
value: 0.09
},
{
time: "2023-01-25T15:49:59.981",
value: 0.45
},
{
time: "2023-01-25T15:54:59.962",
value: 0.47
},
{
time: "2023-01-25T16:00:00.029",
value: 0.66
},
{
time: "2023-01-25T16:05:00.01",
value: 0.68
},
{
time: "2023-01-25T16:09:59.99",
value: 0.85
},
{
time: "2023-01-25T16:14:59.971",
value: 0.81
},
{
time: "2023-01-25T16:20:00.038",
value: 0.78
},
{
time: "2023-01-25T16:25:00.019",
value: 0.82
},
{
time: "2023-01-25T16:30:00",
value: 0.7
},
{
time: "2023-01-25T16:34:59.981",
value: 0.58
},
{
time: "2023-01-25T16:39:59.962",
value: 0.5
},
{
time: "2023-01-25T16:45:00.029",
value: 0.54
},
{
time: "2023-01-25T16:50:00.01",
value: 0.51
},
{
time: "2023-01-25T16:54:59.99",
value: 0.54
},
{
time: "2023-01-25T16:59:59.971",
value: 0.46
},
{
time: "2023-01-25T17:05:00.038",
value: 0.52
},
{
time: "2023-01-25T17:10:00.019",
value: 0.6
},
{
time: "2023-01-25T17:15:00",
value: 0.63
},
{
time: "2023-01-25T17:19:59.981",
value: 0.67
},
{
time: "2023-01-25T17:24:59.962",
value: 0.64
},
{
time: "2023-01-25T17:30:00.029",
value: 0.62
},
{
time: "2023-01-25T17:35:00.01",
value: 0.65
},
{
time: "2023-01-25T17:39:59.99",
value: 0.65
},
{
time: "2023-01-25T17:44:59.971",
value: 0.74
},
{
time: "2023-01-25T17:50:00.038",
value: 0.59
},
{
time: "2023-01-25T17:55:00.019",
value: 0.56
},
{
time: "2023-01-25T18:00:00",
value: 0.48
},
{
time: "2023-01-25T18:04:59.981",
value: 0.57
},
{
time: "2023-01-25T18:09:59.962",
value: 0.59
},
{
time: "2023-01-25T18:15:00.029",
value: 0.49
},
{
time: "2023-01-25T18:20:00.01",
value: 0.59
},
{
time: "2023-01-25T18:24:59.99",
value: 0.59
},
{
time: "2023-01-25T18:29:59.971",
value: 0.67
},
{
time: "2023-01-25T18:35:00.038",
value: 0.66
},
{
time: "2023-01-25T18:40:00.019",
value: 0.71
},
{
time: "2023-01-25T18:45:00",
value: 0.72
},
{
time: "2023-01-25T18:49:59.981",
value: 0.82
},
{
time: "2023-01-25T18:54:59.962",
value: 0.78
},
{
time: "2023-01-25T19:00:00.029",
value: 0.75
},
{
time: "2023-01-25T19:05:00.01",
value: 0.74
},
{
time: "2023-01-25T19:09:59.99",
value: 0.79
},
{
time: "2023-01-25T19:14:59.971",
value: 1.03
},
{
time: "2023-01-25T19:20:00.038",
value: 0.99
},
{
time: "2023-01-25T19:25:00.019",
value: 0.98
},
{
time: "2023-01-25T19:30:00",
value: 1.0
},
{
time: "2023-01-25T19:34:59.981",
value: 1.0
},
{
time: "2023-01-25T19:39:59.962",
value: 1.16
},
{
time: "2023-01-25T19:45:00.029",
value: 1.13
},
{
time: "2023-01-25T19:50:00.01",
value: 1.14
},
{
time: "2023-01-25T19:54:59.99",
value: 1.11
},
{
time: "2023-01-25T19:59:59.971",
value: 1.16
},
{
time: "2023-01-25T20:05:00.038",
value: 1.13
},
{
time: "2023-01-25T20:10:00.019",
value: 1.19
},
{
time: "2023-01-25T20:15:00",
value: 1.1
}
].map(({ time, value }) => [new Date(time).valueOf(), value]);
const mxse_data = [
{
time: "2023-01-25T13:30:00",
value: 0.0
},
{
time: "2023-01-25T14:35:00.01",
value: -0.28
},
{
time: "2023-01-25T14:39:59.99",
value: -0.41
},
{
time: "2023-01-25T14:44:59.971",
value: -0.59
},
{
time: "2023-01-25T14:50:00.038",
value: -0.42
},
{
time: "2023-01-25T14:55:00.019",
value: -0.54
},
{
time: "2023-01-25T15:00:00",
value: -0.57
},
{
time: "2023-01-25T15:04:59.981",
value: -0.55
},
{
time: "2023-01-25T15:09:59.962",
value: -0.48
},
{
time: "2023-01-25T15:15:00.029",
value: -0.54
},
{
time: "2023-01-25T15:20:00.01",
value: -0.6
},
{
time: "2023-01-25T15:24:59.99",
value: -0.61
},
{
time: "2023-01-25T15:29:59.971",
value: -0.65
},
{
time: "2023-01-25T15:35:00.038",
value: -0.43
},
{
time: "2023-01-25T15:40:00.019",
value: -0.54
},
{
time: "2023-01-25T15:45:00",
value: -0.48
},
{
time: "2023-01-25T15:49:59.981",
value: -0.32
},
{
time: "2023-01-25T15:54:59.962",
value: -0.23
},
{
time: "2023-01-25T16:00:00.029",
value: -0.05
},
{
time: "2023-01-25T16:05:00.01",
value: -0.06
},
{
time: "2023-01-25T16:09:59.99",
value: 0.04
},
{
time: "2023-01-25T16:14:59.971",
value: -0.01
},
{
time: "2023-01-25T16:20:00.038",
value: 0.04
},
{
time: "2023-01-25T16:25:00.019",
value: 0.13
},
{
time: "2023-01-25T16:30:00",
value: 0.07
},
{
time: "2023-01-25T16:34:59.981",
value: 0.11
},
{
time: "2023-01-25T16:39:59.962",
value: 0.07
},
{
time: "2023-01-25T16:45:00.029",
value: -0.03
},
{
time: "2023-01-25T16:50:00.01",
value: -0.03
},
{
time: "2023-01-25T16:54:59.99",
value: 0.0
},
{
time: "2023-01-25T16:59:59.971",
value: -0.09
},
{
time: "2023-01-25T17:05:00.038",
value: -0.06
},
{
time: "2023-01-25T17:10:00.019",
value: -0.04
},
{
time: "2023-01-25T17:15:00",
value: -0.03
},
{
time: "2023-01-25T17:19:59.981",
value: -0.1
},
{
time: "2023-01-25T17:24:59.962",
value: -0.05
},
{
time: "2023-01-25T17:30:00.029",
value: -0.01
},
{
time: "2023-01-25T17:35:00.01",
value: -0.08
},
{
time: "2023-01-25T17:39:59.99",
value: -0.08
},
{
time: "2023-01-25T17:44:59.971",
value: -0.17
},
{
time: "2023-01-25T17:50:00.038",
value: -0.11
},
{
time: "2023-01-25T17:55:00.019",
value: -0.12
},
{
time: "2023-01-25T18:00:00",
value: -0.21
},
{
time: "2023-01-25T18:04:59.981",
value: -0.21
},
{
time: "2023-01-25T18:09:59.962",
value: -0.34
},
{
time: "2023-01-25T18:15:00.029",
value: -0.31
},
{
time: "2023-01-25T18:20:00.01",
value: -0.42
},
{
time: "2023-01-25T18:24:59.99",
value: -0.34
},
{
time: "2023-01-25T18:29:59.971",
value: -0.37
},
{
time: "2023-01-25T18:35:00.038",
value: -0.29
},
{
time: "2023-01-25T18:40:00.019",
value: -0.28
},
{
time: "2023-01-25T18:45:00",
value: -0.3
},
{
time: "2023-01-25T18:49:59.981",
value: -0.28
},
{
time: "2023-01-25T18:54:59.962",
value: -0.23
},
{
time: "2023-01-25T19:00:00.029",
value: -0.21
},
{
time: "2023-01-25T19:05:00.01",
value: -0.22
},
{
time: "2023-01-25T19:09:59.99",
value: -0.19
},
{
time: "2023-01-25T19:14:59.971",
value: -0.19
},
{
time: "2023-01-25T19:20:00.038",
value: -0.18
},
{
time: "2023-01-25T19:25:00.019",
value: -0.23
},
{
time: "2023-01-25T19:30:00",
value: -0.25
},
{
time: "2023-01-25T19:34:59.981",
value: -0.29
},
{
time: "2023-01-25T19:39:59.962",
value: -0.28
},
{
time: "2023-01-25T19:45:00.029",
value: -0.18
},
{
time: "2023-01-25T19:50:00.01",
value: -0.17
},
{
time: "2023-01-25T19:54:59.99",
value: -0.15
},
{
time: "2023-01-25T19:59:59.971",
value: -0.17
},
{
time: "2023-01-25T20:05:00.038",
value: -0.17
},
{
time: "2023-01-25T20:10:00.019",
value: -0.11
},
{
time: "2023-01-25T20:15:00",
value: -0.12
},
{
time: "2023-01-25T20:19:59.981",
value: -0.16
},
{
time: "2023-01-25T20:24:59.962",
value: -0.15
},
{
time: "2023-01-25T20:30:00.029",
value: -0.1
},
{
time: "2023-01-25T20:35:00.01",
value: -0.1
},
{
time: "2023-01-25T20:39:59.99",
value: -0.08
},
{
time: "2023-01-25T20:44:59.971",
value: -0.02
},
{
time: "2023-01-25T20:50:00.038",
value: -0.03
},
{
time: "2023-01-25T20:55:00.019",
value: -0.01
},
{
time: "2023-01-25T21:00:00",
value: 0.0
}
].map(({ time, value }) => [new Date(time).valueOf(), value]);
const nasdaq_data = [
{
time: "2023-01-25T14:30:00",
value: 0.0
},
{
time: "2023-01-25T14:35:00.01",
value: -1.77
},
{
time: "2023-01-25T14:39:59.99",
value: -1.62
},
{
time: "2023-01-25T14:44:59.971",
value: -1.69
},
{
time: "2023-01-25T14:50:00.038",
value: -1.73
},
{
time: "2023-01-25T14:55:00.019",
value: -1.97
},
{
time: "2023-01-25T15:00:00",
value: -2.21
},
{
time: "2023-01-25T15:04:59.981",
value: -2.12
},
{
time: "2023-01-25T15:09:59.962",
value: -2.0
},
{
time: "2023-01-25T15:15:00.029",
value: -2.19
},
{
time: "2023-01-25T15:20:00.01",
value: -2.02
},
{
time: "2023-01-25T15:24:59.99",
value: -2.17
},
{
time: "2023-01-25T15:29:59.971",
value: -2.04
},
{
time: "2023-01-25T15:35:00.038",
value: -2.2
},
{
time: "2023-01-25T15:40:00.019",
value: -2.27
},
{
time: "2023-01-25T15:45:00",
value: -2.14
},
{
time: "2023-01-25T15:49:59.981",
value: -2.12
},
{
time: "2023-01-25T15:54:59.962",
value: -2.06
},
{
time: "2023-01-25T16:00:00.029",
value: -1.89
},
{
time: "2023-01-25T16:05:00.01",
value: -1.82
},
{
time: "2023-01-25T16:09:59.99",
value: -1.9
},
{
time: "2023-01-25T16:14:59.971",
value: -1.61
},
{
time: "2023-01-25T16:20:00.038",
value: -1.42
},
{
time: "2023-01-25T16:25:00.019",
value: -1.44
},
{
time: "2023-01-25T16:30:00",
value: -1.44
},
{
time: "2023-01-25T16:34:59.981",
value: -1.35
},
{
time: "2023-01-25T16:39:59.962",
value: -1.28
},
{
time: "2023-01-25T16:45:00.029",
value: -1.36
},
{
time: "2023-01-25T16:50:00.01",
value: -1.29
},
{
time: "2023-01-25T16:54:59.99",
value: -1.05
},
{
time: "2023-01-25T16:59:59.971",
value: -1.09
},
{
time: "2023-01-25T17:05:00.038",
value: -1.15
},
{
time: "2023-01-25T17:10:00.019",
value: -1.19
},
{
time: "2023-01-25T17:15:00",
value: -1.15
},
{
time: "2023-01-25T17:19:59.981",
value: -1.18
},
{
time: "2023-01-25T17:24:59.962",
value: -1.26
},
{
time: "2023-01-25T17:30:00.029",
value: -1.32
},
{
time: "2023-01-25T17:35:00.01",
value: -1.34
},
{
time: "2023-01-25T17:39:59.99",
value: -1.24
},
{
time: "2023-01-25T17:44:59.971",
value: -1.18
},
{
time: "2023-01-25T17:50:00.038",
value: -1.17
},
{
time: "2023-01-25T17:55:00.019",
value: -1.16
},
{
time: "2023-01-25T18:00:00",
value: -1.16
},
{
time: "2023-01-25T18:04:59.981",
value: -1.09
},
{
time: "2023-01-25T18:09:59.962",
value: -1.0
},
{
time: "2023-01-25T18:15:00.029",
value: -0.89
},
{
time: "2023-01-25T18:20:00.01",
value: -0.87
},
{
time: "2023-01-25T18:24:59.99",
value: -0.78
},
{
time: "2023-01-25T18:29:59.971",
value: -0.68
},
{
time: "2023-01-25T18:35:00.038",
value: -0.78
},
{
time: "2023-01-25T18:40:00.019",
value: -0.75
},
{
time: "2023-01-25T18:45:00",
value: -0.72
},
{
time: "2023-01-25T18:49:59.981",
value: -0.56
},
{
time: "2023-01-25T18:54:59.962",
value: -0.64
},
{
time: "2023-01-25T19:00:00.029",
value: -0.66
},
{
time: "2023-01-25T19:05:00.01",
value: -0.67
},
{
time: "2023-01-25T19:09:59.99",
value: -0.65
},
{
time: "2023-01-25T19:14:59.971",
value: -0.47
},
{
time: "2023-01-25T19:20:00.038",
value: -0.23
},
{
time: "2023-01-25T19:25:00.019",
value: -0.33
},
{
time: "2023-01-25T19:30:00",
value: -0.4
},
{
time: "2023-01-25T19:34:59.981",
value: -0.54
},
{
time: "2023-01-25T19:39:59.962",
value: -0.5
},
{
time: "2023-01-25T19:45:00.029",
value: -0.41
},
{
time: "2023-01-25T19:50:00.01",
value: -0.42
},
{
time: "2023-01-25T19:54:59.99",
value: -0.31
},
{
time: "2023-01-25T19:59:59.971",
value: -0.3
},
{
time: "2023-01-25T20:05:00.038",
value: -0.11
},
{
time: "2023-01-25T20:10:00.019",
value: -0.05
},
{
time: "2023-01-25T20:15:00",
value: -0.15
},
{
time: "2023-01-25T20:19:59.981",
value: -0.21
},
{
time: "2023-01-25T20:24:59.962",
value: -0.31
},
{
time: "2023-01-25T20:30:00.029",
value: -0.25
},
{
time: "2023-01-25T20:35:00.01",
value: -0.23
},
{
time: "2023-01-25T20:39:59.99",
value: -0.23
},
{
time: "2023-01-25T20:44:59.971",
value: -0.33
},
{
time: "2023-01-25T20:50:00.038",
value: -0.32
},
{
time: "2023-01-25T20:55:00.019",
value: -0.33
},
{
time: "2023-01-25T21:00:00",
value: -0.18
}
].map(({ time, value }) => [new Date(time).valueOf(), value]);
const wilshire_data = [
{
time: "2023-01-25T14:30:00",
value: 0.0
},
{
time: "2023-01-25T14:35:00.01",
value: -1.2
},
{
time: "2023-01-25T14:39:59.99",
value: -1.12
},
{
time: "2023-01-25T14:44:59.971",
value: -1.04
},
{
time: "2023-01-25T14:50:00.038",
value: -1.17
},
{
time: "2023-01-25T14:55:00.019",
value: -1.37
},
{
time: "2023-01-25T15:00:00",
value: -1.53
},
{
time: "2023-01-25T15:04:59.981",
value: -1.43
},
{
time: "2023-01-25T15:09:59.962",
value: -1.26
},
{
time: "2023-01-25T15:15:00.029",
value: -1.41
},
{
time: "2023-01-25T15:20:00.01",
value: -1.33
},
{
time: "2023-01-25T15:24:59.99",
value: -1.45
},
{
time: "2023-01-25T15:29:59.971",
value: -1.42
},
{
time: "2023-01-25T15:35:00.038",
value: -1.51
},
{
time: "2023-01-25T15:40:00.019",
value: -1.65
},
{
time: "2023-01-25T15:45:00",
value: -1.52
},
{
time: "2023-01-25T15:49:59.981",
value: -1.48
},
{
time: "2023-01-25T15:54:59.962",
value: -1.53
},
{
time: "2023-01-25T16:00:00.029",
value: -1.37
},
{
time: "2023-01-25T16:05:00.01",
value: -1.34
},
{
time: "2023-01-25T16:09:59.99",
value: -1.37
},
{
time: "2023-01-25T16:14:59.971",
value: -1.26
},
{
time: "2023-01-25T16:20:00.038",
value: -1.21
},
{
time: "2023-01-25T16:25:00.019",
value: -1.11
},
{
time: "2023-01-25T16:30:00",
value: -1.05
},
{
time: "2023-01-25T16:34:59.981",
value: -1.03
},
{
time: "2023-01-25T16:39:59.962",
value: -0.97
},
{
time: "2023-01-25T16:45:00.029",
value: -1.03
},
{
time: "2023-01-25T16:50:00.01",
value: -1.01
},
{
time: "2023-01-25T16:54:59.99",
value: -0.76
},
{
time: "2023-01-25T16:59:59.971",
value: -0.78
},
{
time: "2023-01-25T17:05:00.038",
value: -0.84
},
{
time: "2023-01-25T17:10:00.019",
value: -0.83
},
{
time: "2023-01-25T17:15:00",
value: -0.85
},
{
time: "2023-01-25T17:19:59.981",
value: -0.83
},
{
time: "2023-01-25T17:24:59.962",
value: -0.9
},
{
time: "2023-01-25T17:30:00.029",
value: -0.95
},
{
time: "2023-01-25T17:35:00.01",
value: -0.92
},
{
time: "2023-01-25T17:39:59.99",
value: -0.84
},
{
time: "2023-01-25T17:44:59.971",
value: -0.79
},
{
time: "2023-01-25T17:50:00.038",
value: -0.79
},
{
time: "2023-01-25T17:55:00.019",
value: -0.79
},
{
time: "2023-01-25T18:00:00",
value: -0.78
},
{
time: "2023-01-25T18:04:59.981",
value: -0.74
},
{
time: "2023-01-25T18:09:59.962",
value: -0.66
},
{
time: "2023-01-25T18:15:00.029",
value: -0.57
},
{
time: "2023-01-25T18:20:00.01",
value: -0.53
},
{
time: "2023-01-25T18:24:59.99",
value: -0.49
},
{
time: "2023-01-25T18:29:59.971",
value: -0.4
},
{
time: "2023-01-25T18:35:00.038",
value: -0.49
},
{
time: "2023-01-25T18:40:00.019",
value: -0.43
},
{
time: "2023-01-25T18:45:00",
value: -0.43
},
{
time: "2023-01-25T18:49:59.981",
value: -0.28
},
{
time: "2023-01-25T18:54:59.962",
value: -0.34
},
{
time: "2023-01-25T19:00:00.029",
value: -0.36
},
{
time: "2023-01-25T19:05:00.01",
value: -0.37
},
{
time: "2023-01-25T19:09:59.99",
value: -0.34
},
{
time: "2023-01-25T19:14:59.971",
value: -0.21
},
{
time: "2023-01-25T19:20:00.038",
value: -0.06
},
{
time: "2023-01-25T19:25:00.019",
value: -0.17
},
{
time: "2023-01-25T19:30:00",
value: -0.25
},
{
time: "2023-01-25T19:34:59.981",
value: -0.33
},
{
time: "2023-01-25T19:39:59.962",
value: -0.31
},
{
time: "2023-01-25T19:45:00.029",
value: -0.24
},
{
time: "2023-01-25T19:50:00.01",
value: -0.21
},
{
time: "2023-01-25T19:54:59.99",
value: -0.15
},
{
time: "2023-01-25T19:59:59.971",
value: -0.1
},
{
time: "2023-01-25T20:05:00.038",
value: 0.02
},
{
time: "2023-01-25T20:10:00.019",
value: 0.07
},
{
time: "2023-01-25T20:15:00",
value: -0.04
},
{
time: "2023-01-25T20:19:59.981",
value: -0.08
},
{
time: "2023-01-25T20:24:59.962",
value: -0.14
},
{
time: "2023-01-25T20:30:00.029",
value: -0.09
},
{
time: "2023-01-25T20:35:00.01",
value: -0.04
},
{
time: "2023-01-25T20:39:59.99",
value: -0.04
},
{
time: "2023-01-25T20:44:59.971",
value: -0.13
},
{
time: "2023-01-25T20:50:00.038",
value: -0.12
},
{
time: "2023-01-25T20:55:00.019",
value: -0.21
},
{
time: "2023-01-25T21:00:00",
value: 0.01
}
].map(({ time, value }) => [new Date(time).valueOf(), value]);
// Collect the data in an object for easy reference
const data = {
"S&P 500": sp_data.map(([x, y]) => {
return { x, y, custom: {group: 0} };
}),
Dow: dow_data.map(([x, y]) => {
return { x, y, custom: {group: 1} };
}),
"S&P/TSX Comp": tsx_data.map(([x, y]) => {
return { x, y, custom: {group: 2} };
}),
Ibovespa: ibovespa_data.map(([x, y]) => {
return { x, y, custom: {group: 3} };
}),
"MXSE IPC": mxse_data.map(([x, y]) => {
return { x, y, custom: {group: 4} };
}),
"NASDAQ Comp": nasdaq_data.map(([x, y]) => {
return { x, y, custom: {group: 5} };
}),
"FT Wilshire 5000 Index": wilshire_data.map(([x, y]) => {
return { x, y, custom: {group: 6} };
})
};
// Config for HighCharts
const myChart = Highcharts.chart("container", {
accessibility: {
keyboardNavigation: {
order: ["legend", "chartMenu"]
}
},
chart: {
type: "line"
},
title: {
text: title
},
xAxis: {
type: "datetime",
labels: {
// format looks like "2:05 PM"
format: "{value:%l:%M %P}"
}
},
yAxis: {
title: {
text: null
},
opposite: true,
labels: {
format: "{value}%"
}
},
legend: {
layout: "horizontal",
align: "left",
verticalAlign: "top"
},
plotOptions: {
series: {
events: {
// If anyone clicks a legend item to show/hide a particular line, the show/hide event will be fired
// When those lines are being shown/hidden, we'll update our C2M instance, so that our blind users stays up-to-date with our visuals
hide: ({ target }) => {
const { err } = c2m.setCategoryVisibility(
categories[target.index],
false
);
if (err) {
console.error(err);
}
},
show: ({ target }) => {
const { err } = c2m.setCategoryVisibility(
categories[target.index],
true
);
if (err) {
console.error(err);
}
}
},
// Hide the individual markers on the line
marker: {
enabled: false
},
// Hide the floating line labels
label: {
enabled: false
}
}
},
colors: [
"#22757b",
"#eea45f",
"#94826b",
"#eed485",
"#a6a371",
"#819e9a",
"#746e7f"
],
series: [
{
name: "S&P 500",
data: sp_data
},
{
name: "Dow",
data: dow_data
},
{
name: "S&P/TSX Comp",
data: tsx_data
},
{
name: "Ibovespa",
data: ibovespa_data
},
{
name: "MXSE IPC",
data: mxse_data
},
{
name: "NASDAQ Comp",
data: nasdaq_data
},
{
name: "FT Wilshire 5000 Index",
data: wilshire_data
}
]
});
// Generate a C2M chart
const { err, data: c2m } = c2mChart({
// Line chart
type: "line",
title,
// The container for the chart (where the user puts their focus)
element: document.getElementById("container"),
// The "closed caption" where the screen reader's text goes.
cc: document.getElementById("cc"),
axes: {
x: {
label: "Time",
// Format information for a screen reader user. This format looks like: "2:05 PM"
format: (ms) => DateTime.fromMillis(ms).toFormat("h:mm a"),
continuous: true
},
y: {
label: "Change",
format: (value) => `${value}%`
}
},
data,
options: {
// When the C2M user moves around the chart, this callback is fired with details about where they went.
// This helps keep the C2M user's position, and the chart's visual cursor, aligned.
onFocusCallback: ({ point, index }) => {
// Tell HighCharts to move visual focus to the user's current data point
const ref =
myChart.series[point.custom.group].points[index];
ref.onMouseOver();
}
}
});
// Optional - C2M returns error messages in the event that C2M receives invalid input.
// Keep this un-commented if you want access to those error messages.
if (err) {
console.error(err);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.