Data Export

SciChart Engine provides built-in methods to export your chart data to CSV, JSON, and PNG/JPEG formats. This is useful for saving experiment results, generating reports, or sharing chart snapshots.

Quick Example

// Export to CSV
const csvData = chart.exportCSV();
console.log(csvData);
// Output:
// series1_x,series1_y
// 0.000000,1.234567
// 0.100000,2.345678
// ...

// Export to JSON
const jsonData = chart.exportJSON();
console.log(jsonData);
// Output: { exportDate: "...", chartBounds: {...}, series: {...} }

// Export to Image (Raster)
const dataUrl = chart.exportImage('png');
// Output: "data:image/png;base64,..."

CSV Export

Basic Usage

const csv = chart.exportCSV();

This generates a CSV string with headers and all series data:

series1_x,series1_y,series2_x,series2_y
0.000000,0.001234,0.000000,0.002345
0.100000,0.001456,0.100000,0.002567
...

Options

interface ExportOptions {
  seriesIds?: string[];      // Export specific series
  includeHeaders?: boolean;  // Include column headers (default: true)
  precision?: number;        // Decimal places (default: 6)
  delimiter?: string;        // Column separator (default: ',')
}

Export Specific Series

const csv = chart.exportCSV({
  seriesIds: ['current', 'voltage']
});

Custom Formatting

const csv = chart.exportCSV({
  includeHeaders: true,
  precision: 3,        // 3 decimal places
  delimiter: '\t'      // Tab-separated for Excel
});

Download as File

function downloadCSV(chart, filename = 'chart-data.csv') {
  const csvData = chart.exportCSV();
  const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
  URL.revokeObjectURL(link.href);
}

// Usage
downloadCSV(chart, 'experiment-001.csv');

JSON Export

Basic Usage

const json = chart.exportJSON();

This generates a structured JSON object:

{
  "exportDate": "2025-12-31T12:00:00.000Z",
  "chartBounds": {
    "xMin": -0.5,
    "xMax": 0.5,
    "yMin": -0.00001,
    "yMax": 0.00001
  },
  "series": {
    "current": {
      "id": "current",
      "type": "line",
      "style": { "color": "#00f2ff", "width": 1.5 },
      "data": {
        "x": [0, 0.1, 0.2, ...],
        "y": [0.000001, 0.000002, ...]
      },
      "pointCount": 1000
    }
  }
}

Options

const json = chart.exportJSON({
  seriesIds: ['current'],  // Specific series
  precision: 4             // Decimal precision
});

Parse and Use

const jsonString = chart.exportJSON();
const data = JSON.parse(jsonString);

// Access series data
const currentData = data.series.current.data;
console.log(`Points: ${currentData.x.length}`);

// Access bounds
console.log(`X range: ${data.chartBounds.xMin} to ${data.chartBounds.xMax}`);

Download as File

function downloadJSON(chart, filename = 'chart-data.json') {
  const jsonData = chart.exportJSON();
  const blob = new Blob([jsonData], { type: 'application/json' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  link.click();
  URL.revokeObjectURL(link.href);
}

Image Export (Raster)

Export the current chart view as a PNG or JPEG image. The export includes all visible elements including series, axes, grid, and legend.

Basic Usage

const dataUrl = chart.exportImage('png');

Options

const dataUrl = chart.exportImage('jpeg');

Why use Image Export?

• Universal compatibility: PNG/JPEG files can be viewed anywhere.
• WYSWYG: Captures exactly what the user sees on the screen, including complex WebGL shaders.
• High Resolution: The export automatically respects the Device Pixel Ratio (DPR), ensuring sharp results on Retina displays.

React Integration

import { useRef } from 'react';
import { SciChart } from 'scichart-engine/react';

function ChartWithExport() {
  const chartRef = useRef(null);

  const handleExportCSV = () => {
    const chart = chartRef.current?.getChart();
    if (chart) {
      const csv = chart.exportCSV();
      // Download or process the CSV
      console.log(csv);
    }
  };

  const handleExportJSON = () => {
    const chart = chartRef.current?.getChart();
    if (chart) {
      const json = chart.exportJSON();
      console.log(json);
    }
  };

  return (
    <div>
      <SciChart ref={chartRef} series={[...]} />
      <button onClick={handleExportCSV}>Export CSV</button>
      <button onClick={handleExportJSON}>Export JSON</button>
    </div>
  );
}

Use Cases

Scientific Reports

Export experiment data for inclusion in papers:

const csv = chart.exportCSV({
  precision: 8,  // High precision for scientific data
  delimiter: ','
});

Excel/Spreadsheet Import

Tab-separated values work well with Excel:

const tsv = chart.exportCSV({
  delimiter: '\t',
  includeHeaders: true
});

Data Archiving

JSON format preserves all metadata:

const archive = {
  experimentName: 'CV Scan #42',
  date: new Date().toISOString(),
  parameters: { scanRate: 0.1 },
  chartData: JSON.parse(chart.exportJSON())
};

// Save to localStorage, database, or file
localStorage.setItem('experiment-42', JSON.stringify(archive));

Data Processing Pipeline

Export for further analysis in Python, R, or other tools:

// Export CSV
const csv = chart.exportCSV({ precision: 10 });

// Send to backend for processing
fetch('/api/analyze', {
  method: 'POST',
  headers: { 'Content-Type': 'text/csv' },
  body: csv
});

Type Definitions

interface ExportOptions {
  /** Series IDs to export (default: all) */
  seriesIds?: string[];
  /** Include headers in CSV (default: true) */
  includeHeaders?: boolean;
  /** Decimal precision (default: 6) */
  precision?: number;
  /** CSV delimiter (default: ',') */
  delimiter?: string;
}

interface Chart {
  exportCSV(options?: ExportOptions): string;
  exportJSON(options?: ExportOptions): string;
}

Notes

• Memory: For very large datasets (millions of points), the export string can be quite large. Consider streaming or chunked exports for such cases.
• Precision: The default precision of 6 decimal places works well for most scientific applications. Adjust as needed.
• Encoding: Both CSV and JSON outputs are UTF-8 encoded strings.