Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
Serial Chart with a Point Initially Disabled
-
I am creating a custom dashboard with multiple serial charts contained within it. Each chart can contains about 3-5 points, but in some cases I would like to have only 2 points enabled and the others start as disabled (and clickable to re-enable them on the chart). Is this possible with any kind of mark-up?
-
@joshua-keeler I've done something which allows you to 'toggle' the visibility of charts within an amchart serial chart with a push buitton. You could also use the same code to fire when each chart initialises...
With your situation, we can just force hide the required charts on page load, so the data is still there. Saves you having to make a call and pull data then updating the chart. This however, is all from an AngularJS controller.Alternatively, with the version of amcharts we have now, you can apply CSS classes to a graph.
https://www.amcharts.com/kbase/toggling-stock-chart-graphs-via-css/Under the api docs for mango: [localhost|yourDomain]/ui/docs/ng-mango/ma-serial-chart
you will see an attribute called 'series -x-etc'NOTE: you will be doing this via the markup view, not the dashboard designer view!
For each item generated on the chart will be labelled with the class:
amcharts-graph-series-xwhere X is the series number.
So ensure you populate the serial-chart with individual series items rather than the points and values attributes.
ieseries-1-point="pt1" series-1-values="pt1Values"
Next you will require a button to click for toggling your graph's visibility.<button onclick="(function(){var el = document.getElementsByClassName('amcharts-graph-series-1'); console.log(el); for (var i = 0; i < el.length; i++) { el[ i ].style.display = ''; }})();" aria-label="Show Graph" > Show Graph</button> <button id="hideAll" onclick="(function(){ var el = document.getElementsByClassName('amcharts-graph-series-1');console.log(el);for (var i = 0; i < el.length; i++) {el[ i ].style.display = 'none';}})();" aria-label="Hide Graph" > Hide Graph</button>Given the nature of using angularJS, this is bad practise and is supposed to be implemented through a controller. But as you're looking for a fix you can apply on the fly it will enable you to show and hide graphs.
If you've got more than one set of graphs on the page, You can alter the name of the graph name using the 'graph-options' setting attribute as mentioned in the serial chart information on the mango API page.
Just set the id value for each serial chart graph you're passing.graph-options="[ {id:'graph1'}, { id:'graph2 } ]"Then update each button you're using to hide by replacing
amcharts-graph-series-1withamcharts-graph-graph1
It doesn't provide you with the ability to hide on load but unless you're confident with javascript and utilising the userModule extension as mentioned on https://help.infiniteautomation.com/getting-started-with-a-user-module/I am unable to help you futher.
