Preview - Chart.js Charting Module

3rd Party Modules
1

Coming soon™

Embr Chart.js Module

An Ignition module that adds Chart.js powered charting components for Ignition Perspective.

Motivation

Why do we need another Perspective charting module?
Smoothly plotting real time data in Perspective is currently hard. Included in this latest snapshot build is a Realtime Chart component, intended for high speed charting.

This example shows 6 charts updating every 100ms and rendering at 60fps.

This is a teaser build, do not go building anything production related around these components yet.

Current feedback I'd like from the community:

  1. What update rates should I use as a performance benchmark? (10 charts at 250ms, 100 charts at 1s, etc.)? What rates/timescales are you trying to achieve in the real world?

  2. If there were performance gains possible by tightly coupling the component to tags/tag history, would you be interested? Or would you prefer a component that was data-source agnostic?

Latest signed module download is available here:

12 Likes
2

I like it a lot with pushing real-time data. Very useful.
It is also nice, we have the option to push the dataset and see real-time charts like Apexchart:

3

I test it on 8.1.37 and get this error:
1.
image

  1. when I try to move the component in designer the mouse pointer has offset with the component.
  2. There is no select handle around the component.
4

100ms is the rough boundary for human perception. If you smoothly update at that pace, it will look continuous to most people.

I've had applications that displayed hours worth of a dozen pens sampled at 100ms. If you can do that in Perspective, I'll be both shocked and pleased.

We should talk.

5

The component defaults aren't renderable yet, here's a simple working real-time chart.

[
  {
    "type": "mussonindustrial.chart.chart-js.realtime",
    "version": 0,
    "props": {
      "data": {
        "datasets": [
          {
            "label": "Dataset"
          },
          {
            "label": "Dataset 2"
          }
        ]
      },
      "options": {
        "elements": {
          "point": {
            "radius": 0
          }
        },
        "scales": {
          "x": {
            "realtime": {
              "delay": 2000,
              "duration": 10000,
              "fps": 60,
              "refresh": 100,
              "ttl": 15000
            },
            "type": "realtime"
          },
          "y": {}
        }
      },
      "values": [
        {
          "value": 0
        },
        {
          "value": 500
        }
      ]
    },
    "meta": {
      "name": "Realtime Chart"
    },
    "position": {
      "height": 300,
      "width": 484
    },
    "custom": {}
  }
]

I'm seeing this too, albeit randomly. Sometimes the movement just gets wonky.

6

hello, thanks @bmusson, where can find docs about the component properties? I copy the properties from your video and it works. but I´d like to customize other properties. I looking to the git page but I can't find anything related.

7

i think that the answer is https://www.chartjs.org thanks.

8

Yup this is the full documentation.
I’m working on getting the full schema into the designer.

9

Are you planning to add a pie chart?

10

The component will render pie/doughnut charts, see the examples here:

1 Like
11

Just released another snapshot build 0.2.0-SNAPSHOT.

This release is a result of narrowing the feature set to just the basic Chartjs component, no fancy real-time or tag-history stuff yet. I'd like to get this to a stable 1.0.0 sometime this month.

New things since the last update:

  • Improved component property schema. There are some conditional/complex things I can't get to map correctly, but most of it is there.
  • Corrected default properties. Dragging a new chart to the view results in a chart with no errors.
  • Chart properties have CSS custom property support.
  • Chart properties have JavaScript function support.
  • Added designer icons.
  • Chart is now grouped with the other built-in charting components.
  • Moved to functional component style.
  • Started on documentation.
2 Likes
12

0.2.2 release, and another performance teaser:

  1. 100,000 data points (In [{x: number, y: number},...] format.)
  2. Fast initial render (after all the data arrives to the session).
  3. Zoom and pan @ 60+ fps.
  4. Reasonable CPU usage.

This is a release candidate, and any feedback would be greatly appreciated.

(0.2.2) Embr-Charts-module.modl

Update: Module is officially released, see this post for all future information.

10 Likes
14

How do I hide the points on a line chart? Tried pointStyle=False and pointRadius=0

15

There's a couple different places you can put those options, depending on what you want to accomplish.

  1. Hide all points for all lines:
{
    "options": {
        "elements": {
            "point": {
                "radius": 0,
                "pointStyle": false
            }
        }
    }
}
  1. Hide the points for specific dataset:
{
    "data": {
        "datasets": [
            {
                "data": [],
                "label": "Dataset 1",
                "pointRadius": 0,
                "pointStyle": false
            }
        ]
    }
}

You don't need both pointRadius: 0 and pointStyle: false, either one alone will work to hide the points.

My recommendation is to use pointRadius: 0 because it is animatable (i.e. changing from pointRadius: 0 to pointRadius: 5 can happen smoothly) and gives you more options with the hoverRadius property.