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:

7 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.