Adding "guides" to charts

[Pikey4]

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

[ThomasEinasto]

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

[Pikey4]

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.

[Pikey4]

Screenshot to display

[phildunlap]

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.