Basic example

Chart

First, let's assume you already have a chart on your webpage. It might be a static image (like a .png), an SVG element (like with D3.js or Google Charts), or a canvas element (like with Chart.js or Tabelau). The HTML may look like any of these items:

<img src="barChart.png" />
<svg id="generated-with-d3">...</svg>
<canvas id="myChartjsTarget"></canvas>

When we initialize chart2music, we are going to pass along its visual, so that it can best coordinate with the flow of the page.

To music

When you initialize chart2music, you need to provide at least 3 things:

1. What type of chart?
2. Where is the visual?
3. What is the data?

Here is a basic example:

<img src="lineGoesUp.png" id="myChart" />
<div id="screenReaderText"></div>

c2mChart({
  type: "line",
  element: document.getElementById("myChart"),
  cc: document.getElementById("screenReaderText"),
  data: [8, 9, 6],
});

note

Chart2Music will modify the provided element in order to optimize the experience for screen reader users. After the above javascript runs, the img tag will look like this:

<img
  src="lineGoesUp.png"
  id="myChart"
  tabindex="0"
  role="application"
  aria-label="Sonified line chart"
/>

While not required, it is recommended that you provide a title when creating a chart. For example, this javascript code:

c2mChart({
  type: "line",
  title: "Quality of Terminator movies",
  element: document.getElementById("myChart"),
  cc: document.getElementById("screenReaderText"),
  data: [8, 9, 6],
});

would give this more informative text for screen readers:

<img
  src="lineGoesUp.png"
  id="myChart"
  tabindex="0"
  role="application"
  aria-label="Quality of Terminator movies, sonified line chart"
/>

For more details on the provided element, see the Element page.