Export both grid and charts

Export and print

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div>
  <h2>How to export both grid and charts</h2>
  <p>
    To export both grid and charts, we suggest using the following approach:
  </p>
  <ol>
    <li>
      Copy current component options (line 13 in the JavaScript box). We are
      going to restore them later.
    </li>
    <li>
      Subscribe to the
      <a href="https://www.flexmonster.com/api/aftergriddraw/" target="_blank"
      >aftergriddraw</a> event (lines 21-27).
    </li>
    <li>
      Set new options for the component (lines 14-20 and 28). It is needed to
      temporarily display both grid and charts.
    </li>
    <li>
      Refresh the component (line 29). Once it is refreshed, the
      <code>aftergriddraw</code> event is triggered. In its handler, we export
      the report and restore previously saved options (lines 23-26).
    </li>
  </ol>
  <p>
    <a href="https://www.flexmonster.com/doc/export-and-print/" target="_blank"
    >Visit our documentation to learn more about export in Flexmonster</a>.
  </p>
</div>

<button onclick="exportGridAndChart()">Export Grid and Charts</button>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

JavaScript

let pivot = new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  toolbar: true,
  report: {
    dataSource: {
      filename: "data/data.csv"
    }
  }
});

function exportGridAndChart() {
  const optionsCopy = pivot.getOptions();
  const newOptions = {
    viewType: "grid_charts",
    chart: {
      type: "bar_h",
      position: "right"
    }
  };
  pivot.on("aftergriddraw", () => {
    pivot.off("aftergriddraw");
    pivot.exportTo('pdf', null, () => {
      pivot.setOptions(optionsCopy);
      pivot.refresh();
    });
  });
  pivot.setOptions(newOptions);
  pivot.refresh();
}