Electron JS Data Visualization Template

• Please, download the template provided in this article.
• You will see a file tree like this one:

  As you can see, we have CSS and HTML files. Also, we have two iife.js files that contain functions provided by LightningChart, that will help us create our chart.

• Please, open a new terminal.

• As usual in a Node JS project, we will have to run our NPM Install command.

• Now we must install Electron JS in our project:

  See more about the installation command in the Electron JS website

  This would be everything for our initial setup.

  Lets's code.

• In our index.html we will have a simple html template. In this file the content will be displayed.

  Importing CSS style sheet:

  Body: when the html files are loaded, automatically the intro() function will be executed.

  The intro function will display a “welcome” content for our project.

  Also, we have a navigation bar with two buttons. One button will return to the intro content, and the other one will execute and display our chart.

  

  We will see two divs… the “section”strong> div will contain our chart… and “descs” div will show a description.

• ECG.html / intro.html These are just simple html files with text and html tags. These files will contain a description of the displayed modules.

In this file we will make use of Electron JS and it will work as a controller for our chart function.

• Import app and BrowserWindow modules from electron.

  BrowserWindow: Will help us to modify the aspect and behavior of the windows in the application.

  App: Contains events that will help to control the application (open, close , sessions, etc.)

  

• [Create window]: Creates a constant named “win”, this will be the main windows that will be initialized at the beginning.

  We can assign the width/height properties.

  Inside [webPreferences], we assigned the “script.js” file to be preloaded before the rest of the files. This script will always have access to the node APIs.

  Finally, the function “loadFile” will use our index.html as the initial view.

• Now we must create the function that will communicate the html index view with our LightningChart js.

  [ECGChart]: is the function specified in the “onclick” event of the button located in the nav bar.

  When this function is executed, this will load our data json (ECG.json) and will pass the value to [ECG_Chart].

  [ECG_Chart] will call the function [ECGchart], located in the “script” file.

  This file is in charge of building our ECG chart.

  

Here we have the JS code that will modify the content of our Electron app window.

• [intro]: This function will load the intro html template inside the “target” div, located in the index.html file.

  

• Now we must construct the ECG Chart.

  (If you checked our previous articles this should be familiar to you)

  We must start importing the [lcjs] and [xydata] modules that we need.

  

• ECG chart it is a XY chart type, so we will use the [ChartXY] function.

  The container property allows us choosing where the chart will be displayed.

  We can create a dashboard where we can display the chart or directly display the chart in an html object instead.

  

  We can assign a theme to modify the look and feel of our chart.

  See more about the themes available at: Themes | LightningChart® JS API Documentation

• Adding properties to our chart:

  

  • [addLineSeries]: This series type visualizes a list of Points (pair of X and Y coordinates), with a continuous stroke. LineSeries is optimized for massive amounts of data.

    ChartXY | LightningChart® JS API Documentation

  • [regularProgressiveStep]: Optional flag that can be used to indicate that the input data points will always progress by a static amount. This is used in conjunction with a Progressive or Regressive pattern.

    For example, if pattern: 'ProgressiveX', and the step between two consecutive data points is always X = 1, then this can be set to regularProgressiveStep: true.

    DataPattern | LightningChart® JS API Documentation

  • [setMaxPointCount]: Configure automatic data cleaning by max- PointCount. This allows the cleaning of all excess data points that are outside view, so that after cleaning at least maxPointCount data points are retained.

    Essentially it configures the head length of a series.

    PointLineSeries | LightningChart® JS API Documentation

• Add properties to Y axis:

  

  • getDefaultAxisY = Get reference to the default Y Axis of the ChartXY. This will always return reference to the Y Axis that is closest to the chart (starting from bottom).

    All methods below [getDefaultAxisX] will affect only the X axis. (Same logic in case you need to reference to Y axis getDefaultAxisX])

    Read more:

    https://arction.com/lightningchart-js-api-documentation/v3.0.0/classes/chartxy.html#getdefaultaxisx

  • setInterval = Sets the axis scale interval. Parameters may change depending on the chart type.

    Read more:

    https://arction.com/lightningchart-js-api-documentation/v3.0.0/classes/axis3d.html#setinterval

  • setScrollStrategy = Assigns a scrolling behavior on the specified axis.

    Read more:

    https://arction.com/lightningchart-js-api-documentation/v3.4.0/globals.html#axistickstrategies

• Construct our Data json:

  All axis data has been encapsulated in the “chartCollection” constant (Received as parameter in the function)

  Now we have to store all the string values inside of an array variable:

  

  The result will be an array located inside the [point] constant.

  The [createSampleDataGenerator] will oversee the streaming of our data.

  This function needs an array to create the series. That is the reason why we stored our json data into an array.

  

  • [setSamplingFrequency] : is the average number of samples obtained in one second.

  • [setInputData] : Assign the object that contains our array data.

  • [setStreamBatchSize] : Number of records to send in each batch.

  • [setStreamInterval] : Interval (ms) between each batch.

  • [setStreamRepeat] : Streaming will be repeated even if the data has finished.

  • [forEach] : Properties applied to each point in array data.

The explanation and project are ready.

The last step is to run our project. As the other articles, we just need to run the command “npm start” in our terminal.

The difference with a normal TypeScript project and an Electron project, is that Node JS will compile our code and publish it in a local server.

To access to that local server, we will have to use a web browser.

For Electron JS, a windows application will be open and we will see our content like a normal pc application:

As we can see, all html and CSS properties were applied with no problems.

With Electron JS, we can approach all the benefits that modern websites give us and create modern desktop applications.

LightningChart JS completely supports Electron JS.

We can use different types of charts and provide solutions that can be used in many platforms (web, mobile, desktop).

The use of Electron JS can allow us to carry out scientific, industrial, statistics, etc. applications without the need to depend on a web platform.

Another important point to highlight is the ability to run our LightningChart studies within hardware that limits the use of browsers and web tools.

For example, Our ECG program requires an electrocardiogram. In these cases, I think it is better to take advantage of the hardware that the device provides us.

Thanks again for your time and I hope to see you in the next article!