Quick Start Guide > Tutorials (JavaScript) > Tutorial 01 - Setting up a Project with SciChart.js
Tutorial 01 - Setting up a Project with SciChart.js

Creating a New SciChart.js Project

In this tutorial we will create a simple line chart with SciChart.js. We'll show you how to create a new JavaScript project in VSCode and adding SciChart libraries as dependencies to it.

Source code for this tutorial can be found at our SciChart.Js.Examples Github Repository.

Pre-requisites

VSCode

If you haven't done so already go ahead and download VSCode from https://code.visualstudio.com/. We will be using this for tutorials, but you can equally use WebStorm or any other IDE or text editor of your choice.

NPM / Node.js

You will also need to have npm installed. You can get npm from here: https://www.npmjs.com/get-npm

Creating the Project

Go ahead and open up VSCode and enter the terminal. Create a directory to host your tutorial, and type in the following command.

Initialising an npm project
Copy Code
> npm init

Choose defaults, I have named it tutorial1 and I want to use index.js for my package.json. SciChart.js supports both TypeScript and JavaScript ES6, however for the purposes of these tutorials we're going to be using plain JavaScript.

Installing SciChart via npm

SciChart.js is hosted on npm.org, so to install the package to your poject simply use the command npm install scichart.

Initialising an npm project
Copy Code
> npm install scichart

Configuring Webpack

We're going to use webpack to make the smallest possible node.js JavaScript application for our tutorials. To install this, add the following commands.

Initialising an npm project
Copy Code
> npm install --save-dev webpack
> npm install --save-dev webpack-dev-server
> npm install --save-dev webpack-cli
> npm install --save-dev copy-webpack-plugin

Add Scripts to Package.json

By our our package.json should look something like this.

Package.json
Copy Code
{
  "name": "tutorial1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "scichart": "^0.2.6"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^6.0.3",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

Let's add a few more items to it so we can build the application.

Package.json
Copy Code
...
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },

Your package.json should look like this:

Creating webpack.config.js

Add a file to your project called webpack.config.js, and paste in the following code.

Note, the following highlighted lines are required to copy SciChart's WebAssembly files to your build directory.

Package.json
Copy Code
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
module.exports = {
    mode: "production",
    entry: "./src/index.js",
    module: {
        rules: []
    },
    resolve: {
        extensions: [".js"]
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "build")
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "src/index.html", to: "" },
                { from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
                { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
            ]
        }),
        new webpack.IgnorePlugin(/(fs)/)
    ]
};

Your project with webpack.config.js should look like this. In particular, notice the two lines which copy scichart2d.data and scichart2d.wasm to the output folder.

Creating Index.js / Index.html

We're going to create a simple Index.js / Index.html. Create and add these two files to the root of your project, and add this code.

src/index.html
Copy Code
<html lang="en-us">
    <head>
        <meta charset="utf-8" />
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <title>SciChart.js Tutorial 1</title>
        <script async type="text/javascript" src="bundle.js"></script>
        <style>
            body { font-family: 'Arial'}
        </style>
    </head>
    <body>
        <h1>Hello SciChart.js world!</h1>
        <p>In this example we setup webpack, scichart and create a simple chart with one X and Y axis</p>
       
        <!-- the Div where the SciChartSurface will reside -->
        <div id="scichart-root" style="width: 800px; height: 600px;"></div>
    </body>
</html>

SciChart.js simply needs a Div in your application to host the chart. We've added one above and given it the id=scichart-root.

Next we're going to add index.js, where we initialize and create a SciChartSurface.

src/index.js
Copy Code
import {SciChartSurface} from "scichart/charting/Visuals/SciChartSurface";
import {NumericAxis} from "scichart/charting/Visuals/Axis/NumericAxis";
async function initSciChart() {
    // Create the SciChartSurface in the div 'scichart-root'
    // The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
    // instance must be passed to other types that exist on the same surface.
    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);
    // That's it! You just created your first SciChartSurface!
}
initSciChart();

The SciChart.js API is pretty simple. In the code sample above we declare an instance of a SciChartSurface like this.

Declaring a SciChartSurface
Copy Code
// the div ID where you want to host the chart
const divId = "scichart-root";

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

This function returns a SciChartSurface instance and a wasmContext (WebAssembly Context). You will need this context for all chart parts related to this chart. Don't share the wasmContext between charts!

Next, we add a single X,Y Axis. We do this by creating a new NumericAxis, and adding it to the SciChartSurface.xAxes and SciChartSurface.yAxes collections.

Declaring a SciChartSurface
Copy Code
// 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);

That's it! You have just created your first SciChartSurface using SciChart.js!

Building and Running the App

Ok now that we've set that all up, building and running should be pretty easy!

In the command line, simply type the following command.

Running the Tutorial
Copy Code
> npm start

Now visit http://localhost:8080 in your browser and voila! You should see a SciChart.js Chart!

A Note on Licensing SciChart.

The SciChart.js control comes with a fully-functional 30-day trial. You will need to apply a trial license to the applications that you build, including the tutorial.

During the Beta Period, a license key can be found at https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/README-BetaTesters.md

A license key can be applied following the instructions at www.scichart.com/licensing-scichart-javascript.

 

See Also