Binding Apex Chart to Tag History Ignition Perspective 8.1

[JStravs]

Is there an easy way to bind Apex Chart to Tag History? Refering to https://forum.inductiveautomation.com/t/apex-chart-problem-with-tag-history-formatting/62751, when adding script transform, values are still not shown. Please check 3 pictures in attachment.

[traviscox]

Yes but you need to specify the correct options. Use the following options:

{ "chart": { "height": 350, "stacked": false, "toolbar": { "show": true }, "type": "line" }, "dataLabels": { "enabled": false }, "fill": { "opacity": 1 }, "markers": { "size": 0 }, "stroke": { "width": 3 }, "xaxis": { "type": "datetime" }, "yaxis": { "labels": { "formatter": "function (val) { return val.toFixed(2); }" } } }

Here is some example data (series property):

[ { "data": [ { "t_stamp": 1698098270040, "realistic0": 92.31973208860755 }, { "t_stamp": 1698098285040, "realistic0": 98.83574167869062 }, { "t_stamp": 1698098300040, "realistic0": 99.40744245366106 }, { "t_stamp": 1698098315040, "realistic0": 99.66981950013765 }, { "t_stamp": 1698098330040, "realistic0": 100.09892017618496 }, { "t_stamp": 1698098345040, "realistic0": 120.14773680171291 }, { "t_stamp": 1698098360040, "realistic0": 93.34921995339401 }, { "t_stamp": 1698098375040, "realistic0": 92.79367299375417 }, { "t_stamp": 1698098390040, "realistic0": 96.63583224666358 }, { "t_stamp": 1698098405040, "realistic0": 98.19833138153473 }, { "t_stamp": 1698098420040, "realistic0": 99.3663180104998 }, { "t_stamp": 1698098435040, "realistic0": 99.58241316401697 }, { "t_stamp": 1698098450040, "realistic0": 99.96153788007325 }, { "t_stamp": 1698098465040, "realistic0": 99.82900750014512 }, { "t_stamp": 1698098480040, "realistic0": 99.83112520906994 }, { "t_stamp": 1698098495040, "realistic0": 99.85872443002602 }, { "t_stamp": 1698098510040, "realistic0": 100.1508205345365 }, { "t_stamp": 1698098525040, "realistic0": 99.96632714360595 }, { "t_stamp": 1698098540040, "realistic0": 100.12634413881872 }, { "t_stamp": 1698098555040, "realistic0": 99.84604752053646 } ] } ]

Of course the type is line. The line chart example we include in the module is a category chart, not time series. The example above is time series. You can bind the series data to tag history binding as either a document or dataset.

[traviscox]

I added a time series example in 1.0.15:

https://github.com/Kyvis-Labs/ignition-apexcharts-module/releases/tag/1.0.15

[JStravs]

It works nice. Is it possible to change time tooltip format to show next to 26 Oct also hours minutes and seconds? I tried xaxis labels and also tooltip.x.format with no success

[traviscox]

The tooltip for the x axis date format is not in the xaxis object. You simply add tooltip to the options dictionary (top level, sibling next to xaxis). You can add the following:

{ "tooltip": { "x": { "show": true, "format": "HH:mm:ss" } } }

Here is the full example:

{ "chart": { "events": { "xAxisLabelClick": true }, "height": 350, "stacked": false, "toolbar": { "show": true, "tools": { "customIcons": [ { "class": "custom-icon", "click": "function (chart, options, e) { console.log(\"clicked custom-icon\") }", "icon": "\u003cimg src\u003d\u0027/system/images/Builtin/icons/16/wrench.png\u0027 width\u003d\u002720\u0027\u003e", "index": 4, "title": "tooltip of the icon" } ] } }, "type": "line" }, "dataLabels": { "enabled": false }, "fill": { "opacity": 1 }, "markers": { "size": 0 }, "stroke": { "width": 3 }, "xaxis": { "type": "datetime", "labels": { "format": "HH:mm:ss" } }, "yaxis": { "labels": { "formatter": "function (val) { return val.toFixed(2); }" } }, "tooltip": { "x": { "show": true, "format": "HH:mm:ss" } } }