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.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

  • Hi,
    I'd like to add these guides to the charts like the ones here to show the average or max etc. of the current chart rendered.

    https://www.amcharts.com/demos/logarithmic-scale/

    Is there a simple option to put in the serial chart?

    Thanks


  • Hi,

    To use options of the amCharts you have to add options value into your amCharts code.

    Here is a example from the Advanced chart example code from the dashboard module.

       <ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-point="point1" series-1-type="line" series-1-color="#ffaa00" series-2-values="point2Values" series-2-point="point2" series-2-type="line" series-2-color="#0000aa" series-3-values="point3Values" series-3-point="point3" series-3-type="line" series-3-color="#eef442" series-2-axis="right" legend="true" balloon="true" export="true" options="{ guides: [{fillAlpha:0.50,value: 11,lineAlpha:0}], valueAxes:[{minimum:0, axisColor:point1Color, color:point1Color}, {axisColor:point2Color, color:point2Color}]}">
        </ma-serial-chart>
    

    Notice I added into the options section the guide section code.

    guides: [{fillAlpha:0.50,value: 11,lineAlpha:0}]
    

    The syntax to use guide I took from amCharts docs page from here: https://docs.amcharts.com/3/javascriptcharts/Guide

    Most of the options which are available in the amCharts are available in the Angular amCharts of Mango.

    Check them out and try them.

    The developers of Mango have made it extremely easy for us to use and program everything.

    Thomas


  • Thanks Thomas,

    Thanks to your input I did manage to get the result I was after. I just can't for the life of me get the guide to automatically have the value of the actual average of the chart "to" "from" rollup.
    This is from play area i have:

    <md-input-container>
    <label>Rollup interval</label>
    <input type="number" step="1" min="1" ng-model="rollupInterval" ng-init="rollupInterval=1">
    </md-input-container>
    <md-input-container>
    <label>Rollup Units</label>
    <ma-interval-type-picker ng-model="rollupIntervalType" ng-init="rollupIntervalType='MINUTES'"></ma-interval-type-picker>
    </md-input-container>
    <md-input-container>
    <label>Date range preset</label>
    <ma-date-range-picker from="from" to="to" preset="LAST_1_HOURS" rollup-interval="{{rollupInterval}} {{rollupIntervalType}}"></ma-date-range-picker>
    </md-input-container>

    <md-toolbar class="md-whiteframe-1dp md-hue-1">
    	<div class="md-toolbar-tools">
    		<h2 flex>
    			<span>System Charts</span>
    		</h2>
    	</div>
    </md-toolbar>
    
    
    <ma-get-point-value point-xid="DP_003137" point="hwInletPressure"></ma-get-point-value>
    
    
     <ma-point-values point="hwInletPressure" values="hwinletPressureValues" from="from" to="to" rollup="AVERAGE" rollup-interval="{{rollupInterval}} {{rollupIntervalType}}" rendered="0.00"></ma-point-values>
     
     <ma-point-statistics point="hwInletPressure" from="from" to="to" statistics="statsObj"></ma-point-statistics>
    

    <div>The average for the period is {{ statsObj.average.value }} at {{ statsObj.average.timestamp | moment:'format':'lll' }}<br>
    The max value for the period is {{ statsObj.maximum.value }}
    </div>

     <ma-serial-chart style="height: 300px; width: 100%" series-1-values="hwinletPressureValues" series-1-point="hwInletPressure" series-1-type="line" series-1-color="#ffaa00" legend="true" export="true" options="{ valueAxes:[{logarithmic: true, dashLength: 6}], guides: [{dashLength:5, inside: true, label: 'average', lineAlpha: 1, value: 390}]}">
    </ma-serial-chart> 
    

    I have the point from xid and can get the stats from that point for the "to" / "from" period but can't get that value tied to the 'average' Guide. I can only alter guide value manually.


  • Screenshot to display

    0_1488247513973_Untitled.tiff


  • Hi Pikey,

    The answer is probably, "that isn't really possible right now," but it's a good idea!

    This may seem close (and maybe close enough):

     <ma-serial-chart style="height: 300px; width: 100%" series-1-values="hwinletPressureValues" series-1-point="hwInletPressure" series-1-type="line" series-1-color="#ffaa00" legend="true" export="true" options="{ valueAxes:[{logarithmic: true, dashLength: 6}], guides: [{dashLength:5, inside: true, label: 'average', lineAlpha: 1, value: statsObj.average.value}]}" ng-if="statsObj.average.value">
    </ma-serial-chart>
    

    But the problem comes in where the serial chart will be aware of updates in the set of point values, but it will not adjust the options to match. So, this will draw the line for the average on the first page load. Perhaps one could hack up a solution to redraw the whole component, but that's not ideal. There may be a way to adjust this value more directly in the amChart but I am unsure of an easy way to do that.