Hi again :)

It's been some time since the last time I wrote here about different JS charting libraries and now I've come back with a nice practical tutorial.

Now, in this article we will use the Mesh measurement with a circle chart. I'll guide you through how to create a JS MESH CIRCLE using TS, NodeJS, and LightningChart.

What is a Mesh cirlce?
Mesh-type measurement describes the size and distribution of a particle within a granular material.

For example, in some cases, an attempt is made to assign a size number to a grain of the material, but it will not always be the same size.

For those cases, the mesh size indicator is used as the average size of particles in that grade.

Now, let's begin.

Setting up our template

1) Please, download the JS Mesh Circle template that is provided in this article. The file is a .ZIP file and will help you follow the tutorial.

2) You will see a file tree like this one:

3) Now open a new terminal in Visual Studio and as usual in a NodeJS project, run the NPM install command.

This would be everything for our initial setup. Let’s code.

CHART.ts

Inside this file, we will have all the logic needed to create our chart, configure animations, and format the data.

1) Declare the constant lcjs that will refer to our @arction/lcjs library.

2) Extract required classes from lcjs.

const {
  lightningChart,
  IntensitySeriesTypes,
  PalettedFill,
  LUT,
  ColorRGBA,
  Themes
} = lcjs

3) Now we need to create the chart object:

const lc = lightningChart()

const chart = lc.ChartXY({
  theme: Themes.DarkGold,
})
  .setTitle('Mesh Circle')

Here's the review of some properties:

• setTitle: specifies the title for the chart object. Notice that the title will show above the chart.
• Theme: the "lcjs" library has 30+ different color themes you can check from the themes documentation.

4) Now we specify the parameters for the Y and X-axes.

const axisX = chart.getDefaultAxisX()
  .setInterval(-90, 100, false, true) // interval of X axis 
const axisY = chart.getDefaultAxisY()
  .setInterval(-50, 50, false, true) // interval of Y axis

Parameters

• getInterval: Set axis scale interval.
• start: a number. Start scale value.
• end: a number. End scale value.
• animate: number | boolean | undefined. Boolean for animation enabled, or number for animation duration in milliseconds
• disableScrolling: boolean | undefined. If true, disables automatic scrolling after setting interval.
• getDefaultAxisX: get the X-axis.

5) Look Up Table (LUT)

const lut = new LUT({
  steps: [
      { value: 0, color: ColorRGBA(0, 0, 0, 0) }, // transparent at value 0
      { value: 50, color: ColorRGBA(255, 255, 0) }, // yellow at value 50
      { value: 100, color: ColorRGBA(255, 0, 0) } // red at value 100
  ],
  interpolate: true
})
const paletteFill = new PalettedFill({ lut, lookUpProperty: 'value' })

The LUT (Look Up Table) Style class is for describing a table of colors that is associated to lookup values (numbers).

Some examples of a LUT, like all the "lcjs" style classes, are immutable.

This means that its setters do not modify the actual object, but instead return a completely new modified object.

LUT properties

• steps: List of color steps (color + number value pair).
• interpolate: true enables automatic linear interpolation between color steps. You can read more about it in the documentation.
• paletteFill: This object will contain the LUT style for the chart fill.

Adding intensity to the chart

const rows = 51
const columns = rows

const intensityOptions = {
  rows,
  columns,
  start: { x: 0, y: 0 },
  end: { x: 50, y: 50 },
  pixelate: false, 
  type: IntensitySeriesTypes.Mesh 
}

const meshCircle = chart.addHeatmapSeries(intensityOptions)
  .setFillStyle(paletteFill)  // Use created Paletted FillStyle for the Mesh circle.
  .setCursorEnabled(false) //disable cursor interaction
  .invalidateGeometryOnly((row, column, prev) => {
      const angle = row * 2 * Math.PI / (rows - 1.3)
      const radius = column
      return {
          x: Math.sin(angle) * radius,
          y: Math.cos(angle) * radius,
      }
  })

The addHeatmapSeries is the method for adding a new HeatmapSeries to the chart. This series type is used for visualizing multi-dimensional intensity matrixes.

Is necessary to specify the numbers of rows, columns, and type of intensity series. LightningChart JS provides two types for intensity series (Grid and Mesh), so we just need to select Mesh.

As you can see, we are using the palletFill object that we created before. It is easier to wrap all the properties in a single object and use it later.

invalidateGeometryOnly:
This treats the data of the matrix as any of the Point3D-based type of points.

Point3D-based data is represented in format { x: number, y: number, z: number } to modify the geometry only.

Adding data to the chart

const data = (rows, columns) => {
  let result = Array.from(Array(columns)).map(() => Array(rows))
  for (let row = 0; row < rows; row++) {
      for (let col = 0; col < columns; col++) {

          result[col][row] = (100 * Math.cos(col / (0.5 * Math.PI)) + (Math.floor(Math.random() * 10))) // set value for each cell
      }
  }
  return result
}

The function above will create an array object for the total number of columns and rows. For each row and column we will use Math Cosine and Math PI.

Math.PI will work as the radians to be generated by the Math.Cos. The result will be added to the largest integer returned from the Math.Floor calculation.

npm start

Now, open a new terminal and run npm start to visualize the chart in your browser. By default, you'll be given the URL host http://localhost:8080/

Here's how it should look like:

But hey, that's it for this tutorial now. If you run into problems, feel free to contact me on LinkedIn, I'll be happy to help.

Written by:
Omar Urbano | Software Engineer & Technical Writer
Find me on LinkedIn