MAIDR Documentation - v3.73.0
    Preparing search index...

    Function createMaidrFromGoogleCharts

    • Creates a single multi-panel MAIDR figure from several rendered Google Charts instances (Google Charts has no native facet/trellis concept — a "faceted" page is N chart instances in N containers).

      Users navigate the resulting figure at subplot level first (arrow keys move between panels, Enter drills into a panel, Esc returns).

      Grid shape, in priority order:

      1. panels is a 2D array (GoogleChartPanel[][]) — used directly as the subplot grid (rows may be ragged, but never empty).
      2. panels is flat and options.layout is given — chunked row-major.
      3. Otherwise the grid is inferred from the containers' on-screen geometry (clustered into rows by top edge, sorted left-to-right within a row).

      Always supply the grid in visual reading order (top-left panel first).

      Call this after every panel has finished rendering — see whenGoogleChartsReady — then set the returned object as the maidr attribute on options.root (NOT on the individual panel containers):

      Parameters

      Returns Maidr

      A single Maidr object spanning all panels.

      whenGoogleChartsReady(charts, google.visualization.events, () => {
        const maidr = createMaidrFromGoogleCharts(
          panels, // [{ chart, dataTable, container, chartType, title }, …]
          { root: document.getElementById('grid'), layout: { columns: 2 } },
        );
        root.setAttribute('maidr', JSON.stringify(maidr));
      });
      charts.forEach((chart, i) => chart.draw(dataTables[i], drawOptions[i]));

    Settings

    Member Visibility