Musson Industrial’s Embr-Charts Module

3rd Party Modules
1

Embr-Charts

Musson Industrial is excited to announce the release of embr-charts, an Ignition module that adds a collection of enhanced Perspective charting components.

Chart.js Component

This initial release contains a Chart.js component.

Chart.js renders chart elements on an HTML5 canvas unlike other D3.js-based charting libraries that render as SVG. Canvas rendering makes Chart.js very performant, especially for large datasets and complex visualizations that would otherwise require thousands of SVG nodes in the DOM tree.

The following video demonstrates the performance of panning and zooming through 100,000 data points:

The Chart.js component supports the following chart types:

  1. bar
  2. boxplot
  3. bubble
  4. dendrogram
  5. doughnut
  6. euler
  7. forceDirectedGraph
  8. funnel
  9. graph
  10. line
  11. matrix
  12. pcp
  13. pie
  14. polarArea
  15. radar
  16. scatter
  17. sankey
  18. tree
  19. treemap
  20. venn
  21. violin
  22. wordCloud

Details on how to configure the component can be found on the Chart.js documentation site.
All configurations supported by Chart.js are supported on the Perspective component.

Notable Features

  • CSS Custom Properties
    • The Perspective component supports CSS Custom Properties for all property values.
  • Scriptable Options
    • Chart.js scriptable options are supported.
    • Any component property value containing an arrow function () => statement will be converted into a JavaScript function that is called at render-time.
  • Plugin Support
    • Several of the most feature-rich community plugins are included.

Download

Full documentation and the latest release is available here.

Sponsorship

If you benefit from this module for commercial use, we ask you to consider sponsoring our efforts through GitHub sponsors. Your support will allow us to continue development of open-source modules and tools that benefit the entire community (plus there are some bonuses for sponsors :slightly_smiling_face:).

24 Likes
2

the link in the picture is broken

Screenshot 2024-07-24 143313

1 Like
3

Fixed, thanks.

4

image
image1016×167 5.6 KB

We are on version 8.1.37. Will an earlier release of embr-charts work with 8.1.37?

5

No.
But I can look at relaxing the version requirement; I don’t think there’s any reason the version requirement has to be where it’s at.

1 Like
6

It is difficult to upgrade our environment (1-2 times a year), so that will be great and much appreciated! We have been struggling with the XY Chart consuming too much memory, so am hoping embr-charts performs better.

7

Embr-Charts-1.3.0 has been released, and the gateway version requirement has been relaxed to 8.1.33+ (Java 17).

Download Link (1.3.0)
Download Link (Latest)

I've also fixed up the build/release cycle on GitHub, so that:

  1. Patch notes reflect only the changes to a specific module or its dependent libraries.
  2. Auto-magic version bumping and releasing powered by changesets.

I'd like to also get this published to the Third-Party Module Showcase, but the link I was given to download the module showcase project no longer works. Can someone DM me a link?

2 Likes
8

Looks like you apply on this page?

1 Like
9

How can the "Good Units Running Total" secondary y-axis be moved to the right side of the graph? I read about the Axis Position 'right' in the Chart.js documentation, but have not found where to apply it within the Designer.

image
image1040×490 30.8 KB

10

image
image1285×812 67 KB

Hello, I am trying to figure out how to show the arc backgroundColor that does not account for my data:0 value.

Would like the gray backgroundColor to show for the remainder value of 100-x. I have even tried a work around by creating a second data point but property editor only allows me to add one backgroundColor per dataset.

Any help is greatly appreciated!

11

You can apply this under options.scales[your_scale].position = right.

This property is currently missing from the designer schema, I think because it supports a bunch of different types of options that I didn't know how to model in the json schema. Probably would be best to at least just suggest the simple positional options.

1 Like
12

That did it, thanks much!

image
image1498×816 88.6 KB

1 Like
13

You'll have to add a second data point, because of how the doughnut chart works; it graphs the relative percent's of each item in the data.

The other trick is that you can make backgroundColor an array and provide multiple colors. You won't get a cool color picker though so you'll have to provide the values yourself.

20240808_114119
20240808_114119744×495 32.6 KB

If you want to get extra fancy you could supply a Javascript function to backgroundColor (since it is a scriptable property):

(context) => 
switch(context.dataIndex) {
case 0:
  return 'blue'
case 1:
  return 'red'
default:
  return 'green'
}
2 Likes
14

image
image1219×358 36.7 KB

Awesome that worked thank you!

15

Also, you can play with the rotation property to change where the arcs start drawing from.

Edit: from your picture, maybe you already found that out?

16

I did thank you!

17

I added a binding to dataset 0 data, but "0 and 1" are returned for each data point instead of "x and y" as the chart expects.

image
image1520×1434 225 KB

18

You’re missing the keys to the dictionaries created inside the for loop, so python is creating sets instead :wink:.

19

Thanks!

image
image1523×1405 261 KB

20

You don’t have to strictly use the x and y properties, Chart.js does support parsing other object structures.

However, enabling parsing will:

  1. Add overhead to the rendering process.
  2. Stop data decimation plugin from working (which will drastically impact rendering time for large datasets).