Talking Chart

Overview

Talking Chart is a JavaScript library that provides an audio representation of a chart. It can be used by non-visual users of the internet to summarize a chart's message. Here's a demo.

The library uses the oscillator features in HTML 5's Web Audio API, which are available in the latest versions of the Chrome, Safari, and Firefox browsers. To use the library, create a TalkingChart object and pass in a JavaScript reference to the chart's data. The library is open source and free to use under the MIT license.

Examples

Simple Example

var talkingChartParameters = {
  containerId: 'talkingChartLocation',
  announcement: 'Press play to hear the chart showing the average daily temperature in your area over the last 12 months',
  voice1: {
    data: myXmlDataSource.data
  }
};
var talkingChart = new TalkingChart(talkingChartParameters);

More Detailed Examples

• Integration with HighCharts
• Script example of using the configuration parameters below

Configuration Parameters

Top-level Configuration Parameters

Parameter	Type	Default Value	Role
announcement	String	Optional, defaults to an empty string.	The text label that will be read first when a browser reaches the talking chart.
containerId	String	Required.	ID of the html container in which the library will place insert its hidden buttons and labels.
debugMode	Boolean	Optional, defaults to false.	When true, warnings and errors will display in the browser's console window.
maxPlayTimeInMilliseconds	Integer	Optional, defaults to 5000.	The longest amount of time the audio will play, in milliseconds.
minNoteDuration	Integer	Optional, defaults to 200.	The shortest amount of time an individual note can play. Values under 50 milliseconds are unreliable.
playButtonText	String	Optional, defaults to "Play chart as audio".	The text of the hidden button to play the chart audio.
playVoicesConcurrently	Boolean	Optional, defaults to true.	Whether to play audio for both data series at the same time (true), or one after another (false). Only used when two series of data are present.
separateVoicesInStereo	Boolean	Optional, defaults to true.	Whether to play each voice in a separate speaker. Only used when two series of data are present.
voice1	Object	Required.	Settings to play the first data series. See table below.
voice2	Object	Optional, defaults to null.	Settings to play a second data series. See table below.
volume	Float	Optional, defaults to 1.	Global volume setting for both voices. The value can range from 0 to 1.

Voice Object Configuration Parameters

Parameter	Type	Default Value	Role
data	Array	Required.	A reference to the data to be played as audio. This is intended to be the same data that is used to generate the graphical chart.
minFrequency	Integer	Optional, defaults to 300 for voice1 and 800 for voice2.	The lowest frequency sound that can be played in a voice.
frequencyRange	Integer	Optional, defaults to 300.	The distance between the highest and lowest frequencies that can be played in a voice.
playVoiceAsPulse	Boolean	Optional, defaults to true for voice1 and false for voice2.	Whether the audio is played as a pulse rather than a steady tone. Having one voice played as a pulse can help the listener differentiate between two concurrently playing voices.

Screen Reader Support

Talking Chart has been tested with NV Access's NVDA, Freedom Scientific's Jaws 12.0, and Apple's VoiceOver.

License

Talking Chart is a free library, under the MIT license. Details here. Its code is open source and available on Github.

Support

The library is provided as-is and is generally not supported, but you can post questions on Github.

Developers

The library was written by Di Ren and Haik Sahakian.