Apryse WebViewer

Class: ChartManager

Core.SpreadsheetEditor. ChartManager

A manager class that creates, displays, updates, and saves charts within the spreadsheet editor.

new ChartManager()

Methods

deselectChart()

Deselects the currently selected chart.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
      spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
      const chartManager = spreadsheetEditorManager.getChartManager();
      const selectedChart = chartManager.getSelectedChart();
      if (selectedChart) {
        chartManager.deselectChart();
      }
    });
  });

getChartsFromSheet(sheetIndex)

Returns all charts filtered by sheet index.
Parameters:
Name Type Description
sheetIndex number The worksheet index.
Returns:
Array of Chart instances for the specified sheet.
Type
Array.<Core.SpreadsheetEditor.Chart>
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
      const chartManager = spreadsheetEditorManager.getChartManager();
      const activeSheetIndex = 0;
      const charts = chartManager.getChartsFromSheet(activeSheetIndex);
      console.log(`Found ${charts.length} chart(s) on active sheet`);
    });
  });

getSelectedChart()

Returns the currently selected chart, or null if none is selected.
Returns:
The selected chart instance or null.
Type
Core.SpreadsheetEditor.Chart | null
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
      spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
      const chartManager = spreadsheetEditorManager.getChartManager();
      const charts = chartManager.getChartsFromSheet(0);
      if (charts.length) {
        chartManager.selectChart(charts[0].Id);
      }
      const selectedChart = chartManager.getSelectedChart();
      if (selectedChart) {
        console.log('Selected chart:', selectedChart.Id);
      }
    });
  });

moveChart(chartId, position)

Moves a chart to a new position.
Parameters:
Name Type Description
chartId string The chart identifier.
position object The new position in page units.
Properties
Name Type Description
x number The x-coordinate of the new position in page units.
y number The y-coordinate of the new position in page units.
Returns:
Type
Promise.<void>
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, async () => {
      spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
      const chartManager = spreadsheetEditorManager.getChartManager();
      const charts = chartManager.getChartsFromSheet(0);
      if (charts.length) {
        await chartManager.moveChart(charts[0].Id, { x: 100, y: 200 });
      }
    });
  });

resizeChart(chartId, dimension)

Resizes a chart to the specified dimensions.
Parameters:
Name Type Description
chartId string The chart identifier.
dimension object The new dimensions in page units.
Properties
Name Type Description
width number The new width in page units.
height number The new height in page units.
Returns:
Type
Promise.<void>
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, async () => {
      spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
      const chartManager = spreadsheetEditorManager.getChartManager();
      const charts = chartManager.getChartsFromSheet(0);
      if (charts.length) {
        await chartManager.resizeChart(charts[0].Id, { width: 400, height: 300 });
      }
    });
  });

selectChart(chartId)

Selects a chart by chart ID.
Parameters:
Name Type Description
chartId string The chart identifier.
Example
WebViewer(...)
  .then(instance => {
    const { documentViewer, SpreadsheetEditor } = instance.Core;
    const SpreadsheetEditorEvents = SpreadsheetEditor.SpreadsheetEditorManager.Events;
    const spreadsheetEditorManager = documentViewer.getSpreadsheetEditorManager();

    spreadsheetEditorManager.addEventListener(SpreadsheetEditorEvents.SPREADSHEET_EDITOR_READY, () => {
      spreadsheetEditorManager.setEditMode(SpreadsheetEditor.SpreadsheetEditorEditMode.EDITING);
      const chartManager = spreadsheetEditorManager.getChartManager();
      const charts = chartManager.getChartsFromSheet(0);
      if (charts.length) {
        chartManager.selectChart(charts[0].Id);
      }
    });
  });