In the previous tutorial we explained how to setup a project with a simple chart using SciChart.js. In this tutorial, we are going to show you how to add some data and a line series to the chart.
Adding Series to the Chart
In SciChart, there are special classes called RenderableSeries that are responsible for drawing different chart types, such as lines (FastLineRenderableSeries), columns (FastColumnsRenderableSeries), candlestick series (FastCandlestickRenderableSeries), filled area (FastMountainRenderableSeries), heat maps (FastUniformHeatmapRenderableSeries) etc...
Adding a Line Plot to the Chart
In this tutorial, we are going to add some Line series onto the chart.
First, we will add a FastLineRenderableSeries and add this to the SciChartSurface.renderableSeries collection.
Next, we create an XyDataSeries - which is the type which stores the data, and can accept dynamic updates (real-time updates) and manipulation of data. We will assign the dataseries to the FastLineRenderableSeries.
Try the code below:
Ensure you also have the index.html set, which must contain a div with id="scichart-root" (or whatever you pass to SciChartSurface.create)
You should get this result:
We've added a line series to the chart, styled it red, and added two data-points. Hardly ground-breaking, but it's a start!
Let's take this up a notch in the second part of the tutorial, by adding 100 series, each with 10,000 data-points.
Adding 100 Series, with 10,000 Datapoints to the Chart
We can take this a little bit further, by adding 100 series each with 10,000 datapoints to the Chart, for a total of one million data-points. SciChart's specialty is High Performance, Realtime Charts, and that means you can add large amounts of data to our JavaScript chart component with ease.
Modify the code in index.js to the following:
This code adds 100 series in a loop, each with 10,000 data-points using the XyDataSeries.append method. The mathematical function in there is just to create a nice looking waveform.
We create a FastLineRenderableSeries for each trip around the outer loop and this time use the constructor parameters to set the dataSeries, stroke and strokeThickness properties.
This is the result below:
There you go! One million data-points in a JavaScript Chart using SciChart.js!
Join us for Tutorial 3 where we will be adding zooming and panning behaviour to the chart.
A Note on Licensing SciChart.
The SciChart.js control comes with a community license which is watermarked. This can be used for commercial trial use for a reasonable time period.
For commercial licenses, a license key can be applied following the instructions at www.scichart.com/licensing-scichart-js.