Amcharts on-init zoom

[ThomasEinasto]

Hi!

I am playing around with the latest mango and with AmCharts. I would like to do prezoom of the rendered chart but I am failing with it. Have tried multiple ways with declaring indexes, categoryvalues or dates. If used with dates chart fails to render and console points that the variable is not date object, i.e.

TypeError: Cannot read property 'getTime' of undefined

Code while the upper error.

<ma-now output="now"></ma-now>

<ma-calc input="now | maMoment:'subtract':12:'hours'" output="from"></ma-calc>

<ma-get-point-value point-xid="dptest1" point="point1"></ma-get-point-value>
<ma-get-point-value point-xid="dptest2" point="point2"></ma-get-point-value>

<ma-point-values point="point1" values="point1Values" from="dateBar.from" to="dateBar.to">
</ma-point-values>

<ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-point="point1" series-1-type="line" series-1-color="blue" legend="true" balloon="true" on-chart-init="$chart.zoomToDates(from, now)" series-1-graph-options="{id:'graph-id'}" options="{ zoomOutOnDataUpdate:false, valueAxes:[{minimum:0, axisColor:point1Color, color:point1Color}, {axisColor:point2Color, color:point2Color}],chartScrollbar:{autoGridCount: true,resizeEnabled:false,scrollbarHeight: 50, graph:'graph-id' }}">
</ma-serial-chart>

Can somebody please advice how to use

on-chart-init="$chart.zoomToDates()"

Or some otherway to create specific prezoom after first rendering.

Thanks,
Thomas

[MattFox]

Define pre-zoom, if you're trying to view a respective date range in detail why not just use that as your set date/time range for when the chart loads? It will then provide you with the data range in question in more detail.

[ThomasEinasto]

Actually I am trying to achieve a page where the user after he opens up the page is zoomed and will stay zoomed for a 12 hour period even though the whole period might have been 18 hours.

The user can see the whole graph on the chartScrollbar as I have defined the graph to there with assigned ID but only the 12 hour selected part is important for further things.

We can also say that the prezoom is a selection of 12 hour period of a 18 hour graph.

I also will add to the options

chartCursor:{zoomable:false},

So that the user cannot change the zoom of the current selection.

[MattFox]

If that's the case, will it be a fixed timeframe? You can use maMoment filter to set now and maMoment:'add' : '12' :'hours' to fix the period. That would remove the need for a datebar so the user cannot select the date range.

Noting that if you're going to be utilising a variable 12 hour timeframe depending on certain factors then some programming will be involved to make it handle things in a dynamic fashion.

[ThomasEinasto]

Hi @MattFox !

Sorry for replying so late but I went with your suggestion on doing some programming for achieving the results which I need.

I was pleased to see your requests / posts on the forum which pointed me to right directions while customizing for new directives.

Mainly where @jared-wiltshire said in future defining of usermodule required scripts/functions help:

https://github.com/infiniteautomation/ma-dashboards/blob/3.3.x/UI/web/ngMango/directives/PointValueController.js

Which helped my a lot for customizing Mangos own directives in the future as for 3.3.x all the directives and components are in AMD/Require style which usermodules use.

If someone have not noticed then this should be number one place to go to see how @Jared-Wiltshire has done the directives. https://github.com/infiniteautomation/ma-dashboards/blob/3.3.x/UI/web/ngMango/

I'll put out the customized directive and component if someone wants to use prezooming, start-end date of the zoom for further data analysis.

https://pastebin.com/8h4MV8B1

I changed the dateformats from original as ngMango own directive uses other services etc.

Function pointValueToString was taken from https://github.com/infiniteautomation/ma-dashboards/blob/3.3.x/UI/web/ngMango/services/Util.js

Added bindings:

End - takes timestamp of zoom end
hours - takes a number of hours and then uses moment for subtracting the hours from end zoom.
selected - Object output binding

• selected.start >> zoomed chart start date
• selected.end >> zoomed chart end date

Example usage:

<my-custom-mango-chart id="8ec0e029-4b0b-4f53-aa0d-6c25b4ds22sssdsdbfa991" style="position: absolute; left: 1058px; top: 1022px; width: 798px; height: 500px;"  series-1-values="tank1Values" series-1-point="tank1" series-1-type="line" series-1-color="blue" legend="true" balloon="true" cursor-sync-id="graphs" series-1-graph-options="{id:'graph-id-2'}" end="start2.time" hours="6" options="{ zoomOutText: '',chartScrollbar:{graph:'graph-id-2' }}">
</my-custom-mango-chart>

These dates can be used as variables for ma-point-statistics directive to get current selection statistics for example.

As Angular is still quite hard I'll keep learnin and askin. But as @Jared-Wiltshire and all of you in IAS staff are publishing all online it is relatively easier to customize and learn.

Huge thanks and cheers!

Thomas

[MattFox]

Nicely done. I would have suggested code but it's always hard to gauge someone's coding skill level. Best of luck with future projects.