Module adapters/google-charts

Google Charts adapter for MAIDR.

Provides utilities to convert Google Charts data and SVG structure into MAIDR's accessible format for audio sonification, text descriptions, braille output, and keyboard navigation.

Remarks

Google Charts loads asynchronously via google.charts.load(). The adapter must be called after the chart has finished rendering — typically inside a google.visualization.events.addListener(chart, 'ready', …) callback.

Example

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="maidr.js"></script>
<script type="module">
  import { createMaidrFromGoogleChart } from 'maidr/google-charts';

  google.charts.load('current', { packages: ['corechart'] });
  google.charts.setOnLoadCallback(() => {
    const data = google.visualization.arrayToDataTable([
      ['City', 'Population'],
      ['New York', 8336817],
      ['Los Angeles', 3979576],
    ]);
    const container = document.getElementById('chart');
    const chart = new google.visualization.ColumnChart(container);

    google.visualization.events.addListener(chart, 'ready', () => {
      const maidrData = createMaidrFromGoogleChart(chart, data, container, {
        chartType: 'ColumnChart',
        title: 'US City Populations',
      });
      container.setAttribute('maidr', JSON.stringify(maidrData));
    });

    chart.draw(data);
  });
</script>

References

createMaidrFromGoogleChart → createMaidrFromGoogleChart
GoogleChartAdapterOptions → GoogleChartAdapterOptions
GoogleChart → GoogleChart
GoogleChartType → GoogleChartType
GoogleDataTable → GoogleDataTable
GoogleEvents → GoogleEvents
GoogleSelectionItem → GoogleSelectionItem

Module adapters/google-charts

Remarks

Example

References

Settings

On This Page