Just a quick update on our progress on SciChart.js - a Fast Realtime JavaScript Chart component.

Earlier in the year we published that we were working on a JavaScript chart library. Our aim is to port our Award Winning, Best-in-class Windows and Mobile Chart library to JavaScript, but because we wanted to achieve the best performance in the world, we're focused on using cutting-edge technologies WebGL2 and WebAssembly.

Our work is progressing very well! This week we began the work of writing documentation, tutorials and an examples application to showcase SciChart.js, which means we're quite close to a BETA release!

A preview of the SciChart.js API

This is just a preview, we've not gone to BETA yet, but we wanted to show you how the SciChart API is shaping up.

The scichart.js Javascript Chart API will be very similar to the SciChart family across platforms: Windows (WPF), iOS, Android and Mac OSX
The scichart.js JavaScript Chart API will be very similar to the SciChart family across platforms: Windows (WPF), iOS, Android and Mac OSX

First of all, the SciChart.js API will be very similar to the SciChart family across platforms that we support: Windows (WPF), iOS, Android and Mac OSX.

You will declare a SciChartSurface, then add X & Y Axis to the chart. SciChart.js will support unlimited, multiple X,Y Axis of different types. In the first release we will support NumericAxis, Date Axis, Category Axis for stock charts out of the box. In future releases we can add Logarithmic Axis, Discontinuous Axis and more, but for now the above is enough to create rich JavaScript charting applications with SciChart.

// Creating a SciChartSurface with single X,Y Axis
const {sciChartSurface, wasmContext} = await SciChartSurface.create("scichart-root");

// Create an X,Y Axis and add to the chart
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
    
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);    

Adding Series to the Charts

To add series or chart-types to the chart, you must declare a RenderableSeries and a DataSeries. For example, a line series is represented by FastLineRenderableSeries and this requires data in an XY format, using XyDataSeries. We've done this to separate out render (view) from data and also simplify real-time data updates, which is SciChart's speciality.

The SciChart.js JavaScript Chart API separates out Data and RenderableSeries (view) so you can easily add, update charts and change how data is rendered. Our series also support millions of data-points!
The SciChart.js JavaScript Chart API separates out Data and RenderableSeries (view) so you can easily add, update charts and change how data is rendered. Our series also support millions of data-points!
// To add a line series to the chart, create a DataSeries
const xyDataSeries = new XyDataSeries(wasmContext);

// Populate with some data. SciChart can render millions of data-points!
for(let i = 0; i < 100; i++) {
    xyDataSeries.append(i, Math.sin(i* 0.1) * Math.exp(i*0.01));
}

// Add and create a line series with this data to the chart
// Create a line series
const lineSeries = new FastLineRenderableSeries(wasmContext, {
    dataSeries: xyDataSeries, 
    stroke: "LightSteelBlue",
    strokeThickness: 3
});
sciChartSurface.renderableSeries.add(lineSeries);

This results in something like the following JavaScript Chart:

Hello SciChart.js world! A first look at our JavaScript Charts which will be entering BETA soon
Hello SciChart.js world! A first look at our JavaScript Charts which will be entering BETA soon

Big-Data Support

SciChart's speciality is Big-data, real-time charts for scientific, medical and financial applications. To give you an idea of just how powerful the SciChart's JavaScript charts will be, let's make our example a little bit harder by adding 100 series, each with 10,000 data-points.

// Create the SciChartSurface in the div 'scichart-root'
const {sciChartSurface, wasmContext} = await SciChartSurface.create("scichart-root");

// Create an X,Y Axis and add to the chart
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);

sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);    

// Create 100 dataseries, each with 10k points
for (let seriesCount = 0; seriesCount < 100; seriesCount++) {        
    const xyDataSeries = new XyDataSeries(wasmContext);

    const opacity = (1 - ((seriesCount / 120))).toFixed(2);

    // Populate with some data
    for(let i = 0; i < 10000; i++) {
        xyDataSeries.append(i, Math.sin(i* 0.01) * Math.exp(i*(0.00001*(seriesCount+1))));
    }

    // Add and create a line series with this data to the chart
    // Create a line series        
    const lineSeries = new FastLineRenderableSeries(wasmContext, {
        dataSeries: xyDataSeries, 
        stroke: `rgba(176,196,222,${opacity})`,
        strokeThickness:2
    });
    sciChartSurface.renderableSeries.add(lineSeries);
}
SciChart.js JavaScript Chart Big-data capabilities. Creating 100 series, each with 10k points (total 1 Million data-points) is easy with SciChart!
SciChart.js JavaScript Chart Big-data capabilities. Creating 100 series, each with 10k points (total 1 Million data-points) is easy with SciChart!

This results in a cool, ghostly waveform like this with 100 series, 10,000 data-points per series (1 Million data-points total).

SciChart.js JavaScript Chart with excellent performance drawing 100 series, 10k points per series, 1 Million points total
SciChart.js JavaScript Chart with excellent performance drawing 100 series, 10k points per series, 1 Million points total

Adding Zooming and Panning Behaviours

SciChart.js is going to ship with multiple zooming and panning behaviours out of the box. To add zoom, pan behaviours is really easy. You just need to add one of our pre-packaged modifiers to the chart.

// Add zoom, pan behaviours to the chart. Mousewheel zoom, panning and double-click to 
// zoom to fit
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(wasmContext))
sciChartSurface.chartModifiers.add(new ZoomPanModifier(wasmContext))
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(wasmContext))

With a few extra lines of code, you can add zooming and panning behaviour, and now your chart looks and interacts like this:

SciChart.js Incredible Performance: Zooming and Panning a 1 Million Datapoint (100 series, 10k points) JavaScript Line Chart

Before the Release

Before the release We'll be adding more features and creating our examples application, documentation, tutorials and more. Expect to see from version 1 of SciChart.js the following features:

  • JavaScript Line Charts, Scatter Charts, Mountain/Area, Column
  • JavaScript Stock Charts, Candlestick Charts, OHLC Charts
  • JavaScript real-time heatmap charts, spectrograms
  • JavaScript 3D Bubble Charts, 3D Surface Mesh charts for scientific data-visualization
  • Features including unlimited multiple X,Y axis, various axis types
  • Legends, Tooltips
  • Zooming, Panning, Dragging
  • Styling and Theming
  • Incredible Big-Data and Real-time Performance
  • Examples, Tutorials and Documentation for JavaScript as well as TypeScript with React

SciChart.js Release Date

I'm sure you're very keen to get your hands on our WebAssembly / WebGL Charts and start working with them as soon as possible! We don’t have a release date just yet, but we are targeting Q3/Q4 of this year for the first release. If you’re interested to be notified when there are updates, when we have new demos or a BETA version, then subscribe to our SciChart.js mailing list by filling the form below!

About SciChart: High Performance Realtime Charts

SciChart provides high performance real-time chart components on the WPF (Windows), iOS, Android and Xamarin platforms. It is our goal to create the best cross-platform Native WPF, iOS, Android and JavaScript 2D & 3D Charts in the world, focusing on performance, developer productivity, ease of use, depth of features and enterprise-grade tech support.

If you have a question about what SciChart's WebGL / WebAssembly JavaScript Charts can offer you, or if you would like to get a quote, please contact us. Our friendly, helpful support team will be glad to help!