Also, check out @pturmel's pageVarMap.
It's a great way to get a page-persistent object for holding onto previous requests, appending additional chart data, etc.
1 Like
IA Christmas Wishlist: A way to assign custom editors to Perspective properties, so I can add a JavaScript code editor for the Scriptable options.
1 Like
I really appreciate the quick response Ben. This is extremely helpful.
I'll be going on vacation for a few days and will give this a try when I get back next week.
Thanks again.
1 Like
We currently use the Apex Chart module to do our trending screen and there is one feature we are missing from the Vision Easy Chart.
Can this Embr-Charts module do a line chart with subplots? From what I have seen in the linked library it is not possible, but I wanted to double check here.
Yes, you can. The Chart.js term you’re looking for Y-Axis stacking.
You’ll want to used the stack, stackWeight, and offset axis parameters.
The official Chart.js docs don’t show a great example of what it looks like, if you have trouble let me know and I can put something together for the module documentation.
1 Like
You can add a design delegate in some manner, the way the flex container/repeater do, right? Then you could create a Swing component that does JS highlighting.
True…
Ideally it’d be a button next to the property, similar to a view or style class picker, that would open a custom editor.
Is there any way to do such a thing now?
Nope, nothing attached to the property.
Maybe someday we'll OSS our Swing Json editor and folks like you can suggest enhancements (and we can unit test it properly against the full JSON schema).
For now, a design delegate that lives in the 'top space' is the best you can do. I think you could theoretically have it listen to the property selection, though no idea how feasible that would be in practice.
1 Like
That’d be great.
Yeah I’m not sure that’d be good user experience either.
@bmusson, thank you for this chart module.
I managed to get a status timeline (similar to yours) working using this, and I really like the zoom/pan feature. The only issue I have right now is coming up with a clean way to reset the zoom/pan that is both mouse/touch friendly, i.e., use an onActionPerformed event on a button.
ChartJS has a small Reset button that pops up on zoom/pan, and this module did briefly show it but has stopped displaying.
Best I could find is the redraw property and I am setting that true/false on mouse down/up. I wanted to avoid using a change script.
You’re very welcome!
Can you find a screenshot somewhere of what this looks like?
Sure thing.
It does appear to be integrated with the chart and it did briefly display on my chart in Perspective once I was zoomed in.
Now that I think about it, I had turned on annotations just to play with it. That is when it was displaying. After you click and draw a box on the chart, that button would display.
Ah, that button is something special built for the documentation, it's not actually a part of Chart.js itself.
The functionality you want is there (calling chart.resetZoom()), but there's currently no way to call any functions on the chart instance from within Ignition.
Good news though: I've learned enough through my other component adventures to implement this, and I could actually use this functionality for my own ongoing projects, so this will be somewhat prioritized.
2 Likes
Here is the button I was talking about. It actually is related to the crossHair plugin. Enabling crossHair and drawing a box on the graph will display the button.
In the example below, I drew a box that would span 1 hour.
Before:
After:
Gotcha.
The crosshair plugin hooks into the zoom/pan plugin, and adds some extra stuff.
The crosshair plugin is kinda garbage, I don’t think it will stay around long term. It’s not causing any issues though so I’d remove it if a suitable replacement was available.
2 Likes
I trying to configure a trending view in perspective using embr charts. I need to dynamically add y axes based on the amount of tags I am querying info from. I would like to customize each y axis decimal places based on a given parameter, how could I achieve this?
Chart.js refers to these as scales, check this page out for examples of configuring scales and linking them to datasets.
You can configure this under the ticks property per scale (options.scales[scaleId].ticks). You can use either the precision or stepSize properties to set the number of decimal places, depending on what makes more sense to specify. Check the documentation out here:
1 Like
Not sure what I am doing wrong, but I cant seem to find a connection between precision and stepSize. I want the Charjs component to look similar to the apexChart component on the left. Could you please help me?
Hm, precision didn't work the way I figured.
This will work though: apply a tick.callback to set the number of decimal places manually.
scales: {
y: {
ticks: {
stepSize: 4,
callback: '(value) => return value.toFixed(1)'
}
}
}
2 Likes
That worked perfectly, where can I read more info on the syntaxis of these callback functions? I tried embedding JavaScript code before but it just broke the chart.