# Musson Industrial’s Embr-Charts Module

**URL:** <https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618>\
**Category:** 3rd Party Modules\
**Tags:** perspective\
**Created:** [June 10, 2024, 12:53pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618 "2024-06-10T12:53:46Z")\
**Posts on this page:** 1\
**Showing post:** 84

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [December 20, 2024, 10:23pm UTC](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/84 "2024-12-20T22:23:34Z")

</div>

# [Version 2.0.0](https://github.com/mussonindustrial/embr/releases/tag/%40embr-modules%2Fcharts%402.0.0)

This version brings majors changes to scriptable options, and introduces a method for directly interacting with the `Chart.js` chart instance.

### Breaking Changes

- The previously available `self` and `client` globally scoped objects available in Scriptable Options are gone. They are replaced with a single `perspective` object that will be the home of future Perspective specific utility functions. Use `perspective.context` to access the current `page`, `view`, `client`, and `component` objects.
- The `this` argument in Scriptable Options is now the component itself.
- Scriptable Options now behave as normal arrow functions, and do not require return statements for expressions. [See this post for more details.](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618/81)

### New Feature, JavaScriptProxy Objects

I think this one is pretty cool.

I've been holding off on adding methods to the `Chart.js` component, because I couldn't find a way to make them practically useful. There's lots of methods on the `chart` instance that would be great to call from Perspective, but:

1. There's a lot of them (+ functions added by plugins).
2. Most of them require chaining with other methods in order to be useful.

This update adds a single component method `getJavaScriptProxy(property)`, that returns a `JavaScriptProxy` object for the given property key. Using this proxy object you can call `runAsync(function, args, callback)` or `runBlocking(function, args)` in order to run JavaScript code with the proxied property as the `this` context.

This follows the same signature as the `runJavaScript~` functions in our [Embr-Periscope](https://forum.inductiveautomation.com/t/musson-industrials-embr-periscope-module/99047) module:

- `function` is JavaScript code as a string containing a JavaScript arrow function. If this function is `async` or returns a `Promise` it will do what you expect, returning on the gateway when resolved.
- `args` is an optional dictionary, where the keys correspond to the names of the function arguments.
- `callback` is an optional function to be called when the async version of the function completely. The callback function should take a single argument that will contain the return value of the JavaScript function.

Currently the only proxy-able property is `chart` - the component's `Chart.js` chart instance.

#### Examples

Reset the zoom state of the chart:

```python
# Button onActionPerformed
def runAction(self, event):
	component = self.getSibling("Chartjs")
	chart = component.getJavaScriptProxy('chart')
	chart.runAsync("() => this.resetZoom('resize')")

```

Zooming to a specific part of the chart:

```python
# Button onActionPerformed
def runAction(self, event):
	component = self.getSibling("Chartjs")
	chart = component.getJavaScriptProxy('chart')
	
	args = {
		'scale': 'x',
		'bounds': {
			'min': 5,
			'max': 10
		}
	}
	
	chart.runAsync('''(scale, bounds) => {
		console.log(`Zooming scale ${scale} to bounds:`, bounds)
		this.zoomScale(scale, bounds, 'resize')
	}''', args)

```

The sky is the limit here.

Full documentation coming soon at [docs.mussonindustrial.com](https://docs.mussonindustrial.com/).

### Third-Party Module Showcase

We're now listed on the [Third-Party Module Showcase](https://inductiveautomation.com/moduleshowcase/module/musson-industrial-embr-charts)!

### Download

Quick-link: [Embr-Charts-2.0.0.modl](https://github.com/mussonindustrial/embr/releases/download/%40embr-modules%2Fcharts%402.0.0/Embr-Charts-2.0.0.modl)

As always, the latest release [can be found here](https://github.com/mussonindustrial/embr/releases).

---

_[View the full topic](https://forum.inductiveautomation.com/t/musson-industrial-s-embr-charts-module/91618)._