SciChart.js Preview – Creating Real-time JavaScript Stock Charts with WebAssembly & WebGL
Published: 2024-05-02 08:08:31

<!-- wp:html -->
<div style="background-color: #f3f3f3; border: 1px solid #E3E3E3; padding: 20px 20px 0px 20px; margin-bottom: 20px;">
<h2><span style="color: #078e26;">//</span> Are you looking for the Fastest JavaScript Charts?</h2>
<div class="column one-second column_column">
<p>SciChart.js, our <a href="https://www.scichart.com/javascript-chart-features/">Ultra-High Performance JavaScript Chart library</a> is now released!</p>
<p><em>“With WebAssembly and WebGL hardware acceleration and an optimized render pipeline, <strong>SciChart provides extremely fast JavaScript charts capable of drawing millions of data-points in realtime …</strong>” <a href="https://www.scichart.com/javascript-chart-features/" target="_blank" rel="noopener noreferrer">[read more]</a></em></p>
<p><a class="button" style="margin-bottom: 0px;" tabindex="0" href="https://www.scichart.com/javascript-chart-features/" target="_blank" rel="noopener noreferrer">WHY SCICHART: THE FASTEST JAVASCRIPT CHARTS</a></p>
</div>
<div class="column one-second column_column">
<div class="aos-init aos-animate" style="margin-top: 0px !important;" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="500">
<figure class="wp-block-video"><video id="html5_video_65r0s6fr8m5" style="max-width: 100%;" src="https://www.scichart.com/wp-content/uploads/2023/12/javascript-chart-library-01-performance.mp4" autoplay="autoplay" loop="loop" muted="" controls="controls" width="300" height="150"></video>
<figcaption><strong>See our live demos in the SciChart.js examples suite: <a href="https://demo.scichart.com/" target="_blank" rel="noreferrer noopener">demo.scichart.com</a></strong></figcaption>
</figure>
</div>
</div>
<div class="clear">&nbsp;</div>
</div>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>At SciChart we specialise in high performance real-time chart libraries. Until now, we’ve focused on the native platforms like WPF, iOS/Android but a very popular tech stack for developing trading applications is JavaScript &amp; Typescript.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Why is JavaScript so popular for trading applications?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Well, JavaScript is ubiquitous, it’s found in every browser, on mobile devices and desktops, you can create fully fledged desktop apps with it, and over the years it’s been getting better and better. What we’ve found though is that for some operations JavaScript is just a fraction of the speed &amp; performance of native programming languages such as C++, and for what we do – <a href="https://www.scichart.com">realtime high performance charts</a> – speed really matters …</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Take our <a href="https://www.scichart.com/wpf-chart-features">WPF chart library</a> for example, we are able to draw up to <a href="https://www.scichart.com/ten-billion-data-points-tech-demo/">10 Billion data-points in a real-time</a> streaming example. <em>“Would you ever want to draw 10 Billion data-points?”</em> you ask. Well, maybe not, but you might want to draw 1 million, or even just 100,000 and not have the application slow down and hang on you … How many times have you wanted to create JavaScript Stock charts and found them to be slow once you start to use real-time data feeds? The last thing you want is for your trading app to slow down, lock up or have performance problems in a live real-time trading session.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="enter-scichart-js">Enter SciChart.js</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>SciChart.js is going to be different from other <strong>JavaScript Stock chart libraries</strong>. We’re going to focus on the use-case of <strong>high-performance, real-time data visualisation</strong> in browser-based financial, trading, medical, scientific &amp; big-data applications. &nbsp;Rather than using the built-in libraries and tools to create a chart, such as HTML5 canvas, or vanilla JavaScript, we’re building SciChart.js using our own in-house, proprietary <strong>WebAssembly </strong>/ <strong>WebGL </strong>rendering engine called Visual Xccelerator®.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://www.scichart.com/scichart-wpf-v6-the-worlds-fastest-wpf-charts/">Visual Xccelerator® is incredibly fast</a>. We use it on our <a href="https://www.scichart.com/wpf-chart-features">WPF charts</a> and have achieved ridiculous performance numbers. If you want to visualise millions, or even billions of data-points in real-time or big-data applications with our <a href="https://www.scichart.com/wpf-chart-features">WPF Chart Library</a> (for Windows), or our <a href="https://www.scichart.com/ios-chart-features/">iOS Chart Library</a> or <a href="https://www.scichart.com/android-chart-features/">Android Chart Library</a>, then you can with SciChart + Visual Xccelerator<a href="https://www.scichart.com/scichart-wpf-v6-the-worlds-fastest-wpf-charts/">®</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We’ve achieved a technical feat by cross-compiling our in-house drawing engine engine to JavaScript through <a href="https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6"><strong>WebAssembly</strong></a>. Under the hood it uses <strong>WebGL 2</strong> and our proprietary algorithms for drawing lines, shapes, and polygons incredibly fast. Think of it like a game-engine, perhaps a little like Unity, but we only focus on the primitives for drawing charts &amp; graphs.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>By leveraging <a href="https://medium.com/javascript-scene/what-is-webassembly-the-dawn-of-a-new-era-61256ec5a8f6">WebAssembly</a> and WebGL in <strong>JavaScript Charts</strong> we’re able to re-use our existing codebase, some 3 million lines of code, for JavaScript apps. By compiling to wasm and writing our chart API in TypeScript we will be able to target a host of JavaScript frameworks.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Vanilla JavaScript</li><li>TypeScript</li><li>React</li><li>Node.js</li><li>Vue.js</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>We’re building SciChart.js to work with all the above, whilst leveraging the most cutting-edge technologies in modern browsers such as WebAssembly / wasm, WebGL, WebGL 2 and possibly WebGPU in the future too. It really will be a game changer.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="demonstrating-scichart-js-candlestick-charts">Demonstrating SciChart.js Candlestick Charts</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We’ve created a real-time <strong>Javascript Stock Chart</strong> example using SciChart.js WebGL WebAssembly Charts which is showcased below:</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
<figure class="kg-card kg-embed-card"><iframe src="https://www.youtube.com/embed/jzNCPcwWxCo?feature=oembed" width="459" height="344" frameborder="0" allowfullscreen="allowfullscreen"></iframe></figure>
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>This example includes:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>A mock data-feed providing price &amp; volume ‘ticks’ or trades</li><li>A candle aggregator</li><li>An OHLC or Candlestick chart to display the data</li><li>20 period and 50 period moving averages</li><li>Volume bars</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>The whole thing runs under a timer, it’s not connected to a real price trading data-feed, but it is incredibly fast, showcasing the potential performance of SciChart.js as a Javascript Stock Chart. We’ve added zoom and pan modifiers so you can use the mouse-wheel, or touch, and pan back and forth. Soon we will be adding tooltips, legends and more so that when we release, you will be able to create realistic JavaScript Stock Chart &amp; trading applications with SciChart.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="the-real-time-ticking-stock-chart-example-api-code">The Real-Time Ticking Stock Chart Example API Code</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Our development of SciChart for JavaScript is still in progress, hence why we haven’t released a preview or BETA version just yet. Nevertheless, we’d like to share some example code so you can see how the SciChart.js API looks. The below is actually TypeScript with React, but gives an idea how the API looks.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 id="declaring-a-scichartsurface-in-javascript">Declaring a SciChartSurface in JavaScript</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We begin by declaring a canvas element where we are going to draw our chart in HTML. We are undecided at this time whether we'll require a &lt;canvas&gt; or a &lt;div&gt; element but at the moment declaring a canvas in HTML with an Id is sufficient to declare the chart.</p>
<!-- /wp:paragraph -->

<!-- wp:scichart/code-snippet {"code":"u0026lt;divu003eu003cbru003e    u0026lt;canvas id={canvasElementId} /u003eu003cbru003eu0026lt;/divu003e","proglang":"language-xml"} -->
<div class="wp-block-scichart-code-snippet"><pre class="line-numbers code-toolbar language-xml">&lt;div>
    &lt;canvas id={canvasElementId} />
&lt;/div></pre></div>
<!-- /wp:scichart/code-snippet -->

<!-- wp:paragraph -->
<p>In our code we can then instantiate a SciChartSurface and bind to the canvas. Our API is going to change, but for now we use a helper function called drawInitialChart which creates a webAssembly context with our 2D/3D WebGL drawing engine bound to the canvas above. Using this we can create the SciChart chart controls using an API that will be familiar to users of our WPF, iOS or Android charts.</p>
<!-- /wp:paragraph -->

<!-- wp:scichart/code-snippet {"code":"// Instantiates the SciChartSurface with previously created wasmContextu003cbru003econst sciChartSurface = new SciChartSurface(wasmContext);u003cbru003e// Create an XAxis of type CategoryAxisu003cbru003econst xAxis = new CategoryAxis(wasmContext);u003cbru003exAxis.labelProvider.labelFormat = ENumericFormat.Date_HHMM;u003cbru003esciChartSurface.xAxes.add(xAxis);u003cbru003e// Create a YAxis of type NumericAxis for prices with AutoRagneu003cbru003econst priceYAxis = new NumericAxis(wasmContext);u003cbru003epriceYAxis.autoRange = EAutoRange.Always;u003cbru003esciChartSurface.yAxes.add(priceYAxis);u003cbru003e// Create a hidden YAxis for the volume bars at the bottom of the chartu003cbru003econst volumeYAxis = new NumericAxis(wasmContext, {u003cbru003eid: AXIS2_ID, axisAlignment: EAxisAlignment.Leftu003cbru003e});u003cbru003evolumeYAxis.isVisible = false;u003cbru003evolumeYAxis.autoRange = EAutoRange.Always;u003cbru003esciChartSurface.yAxes.add(volumeYAxis);"} -->
<div class="wp-block-scichart-code-snippet"><pre class="line-numbers code-toolbar language-js">// Instantiates the SciChartSurface with previously created wasmContext
const sciChartSurface = new SciChartSurface(wasmContext);
// Create an XAxis of type CategoryAxis
const xAxis = new CategoryAxis(wasmContext);
xAxis.labelProvider.labelFormat = ENumericFormat.Date_HHMM;
sciChartSurface.xAxes.add(xAxis);
// Create a YAxis of type NumericAxis for prices with AutoRagne
const priceYAxis = new NumericAxis(wasmContext);
priceYAxis.autoRange = EAutoRange.Always;
sciChartSurface.yAxes.add(priceYAxis);
// Create a hidden YAxis for the volume bars at the bottom of the chart
const volumeYAxis = new NumericAxis(wasmContext, {
id: AXIS2_ID, axisAlignment: EAxisAlignment.Left
});
volumeYAxis.isVisible = false;
volumeYAxis.autoRange = EAutoRange.Always;
sciChartSurface.yAxes.add(volumeYAxis);</pre></div>
<!-- /wp:scichart/code-snippet -->

<!-- wp:heading {"level":3} -->
<h3 id="declaring-series-and-data">Declaring Series and Data</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Once you've declared a SciChartSurface with XAxis and YAxis (in this case two YAxes), you can then declare series. Following on from the API in our WPF, iOS &amp; Android charts we seperate out the concept of RenderableSeries and DataSeries.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>RenderableSeries present the data (e.g. a Line, Candlestick, Mountain series), while DataSeries contain the data. These follow a CRUD pattern (Create, Update Delete) so that you can dynamically change the data at run-time to get real-time charts.</p>
<!-- /wp:paragraph -->

<!-- wp:scichart/code-snippet {"code":"// Declare the data for our Candlestick seriesu003cbru003econst priceDataSeries = new OhlcDataSeries(wasmContext);u003cbru003e// Declare our Candlestick series with priceDataSeries as data-sourceu003cbru003esciChartSurface.renderableSeries.add(u003cbru003e    new FastCandlestickRenderableSeries(wasmContext, {u003cbru003e        strokeThickness: STROKE_THICKNESS,u003cbru003e        dataSeries: priceDataSeries,u003cbru003e        dataPointWidth: 0.4u003cbru003e    })u003cbru003e);"} -->
<div class="wp-block-scichart-code-snippet"><pre class="line-numbers code-toolbar language-js">// Declare the data for our Candlestick series
const priceDataSeries = new OhlcDataSeries(wasmContext);
// Declare our Candlestick series with priceDataSeries as data-source
sciChartSurface.renderableSeries.add(
    new FastCandlestickRenderableSeries(wasmContext, {
        strokeThickness: STROKE_THICKNESS,
        dataSeries: priceDataSeries,
        dataPointWidth: 0.4
    })
);</pre></div>
<!-- /wp:scichart/code-snippet -->

<!-- wp:paragraph -->
<p>Once a RenderableSeries / DataSeries pair has been created, you can update, insert or append data to the DataSeries dynamically as follows. SciChart automatically redraws.</p>
<!-- /wp:paragraph -->

<!-- wp:scichart/code-snippet {"code":"const fillPriceDataSeries = () =u003e {u003cbru003econst generatedData = getPricesData();u003cbru003econst { xValue, openValue, highValue, lowValue, closeValue, volume } = generatedData;u003cbru003eif (isCurrentDataPoint) { u003cbru003e    // Update the current latest Open, High, Low, close value u003cbru003e    const length = priceDataSeries.count(); u003cbru003e    priceDataSeries.update(length - 1, openValue, highValue, lowValue, closeValue); } else { u003cbru003e    // Append new values dynamically for X (Date), Open, High, Low, close u003cbru003e    priceDataSeries.append(xValue, openValue, highValue, lowValue, closeValue); }u003cbru003e};"} -->
<div class="wp-block-scichart-code-snippet"><pre class="line-numbers code-toolbar language-js">const fillPriceDataSeries = () => {
const generatedData = getPricesData();
const { xValue, openValue, highValue, lowValue, closeValue, volume } = generatedData;
if (isCurrentDataPoint) { 
    // Update the current latest Open, High, Low, close value 
    const length = priceDataSeries.count(); 
    priceDataSeries.update(length - 1, openValue, highValue, lowValue, closeValue); } else { 
    // Append new values dynamically for X (Date), Open, High, Low, close 
    priceDataSeries.append(xValue, openValue, highValue, lowValue, closeValue); }
};</pre></div>
<!-- /wp:scichart/code-snippet -->

<!-- wp:heading {"level":3} -->
<h3 id="scichart-js-release-date">SciChart.js Release Date</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>SciChart.js - our GPU Accelerated 2D/3D JavaScript Chart has now been released! In fact, we have just released a version 2 (November 2021) which is a Huge upgrade to v1.<br>If you want to learn more about SciChart.js or start a trial, or test drive the features by looking at our Js Charts Demo, click the link below.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><!--kg-card-begin: html--><a class="button button-highlight" title="SciChart.js JavaScript Chart Library" href="https://www.scichart.com/javascript-chart-features/" target="_blank" rel="noopener noreferrer">SciChart.js JavaScript Chart Library</a><!--kg-card-end: html--></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 id="about-scichart-high-performance-realtime-charts"><em>About SciChart: High Performance Realtime Charts</em></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><em>SciChart provides high performance realtime chart components on the WPF (Windows), iOS, Android and JavaScript platforms. It is our goal to create the best cross-platform Native WPF, iOS, Android and JavaScript 2D &amp; 3D Charts in the world, focusing on performance, developer productivity, ease of use, depth of features and enterprise-grade tech support.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em>If you have a question about what SciChart's WebGL / WebAssembly Charts can offer you, or if you would like to get a quote, please <a href="https://www.scichart.com/contact-us/">contact us</a>. Our friendly, helpful support team will be glad to help!</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><!--kg-card-begin: html--><a class="button button-highlight" title="Contact SciChart" href="https://www.scichart.com/contact-us/" target="_blank" rel="noopener noreferrer">Contact Us</a><!--kg-card-end: html--></p>
<!-- /wp:paragraph -->