How to create a bar chart with benchmark line?

[AA]

Hi,
Is there any way to create a bar chart with benchmark line in mango ?

We want to use this chart for energy rating.

Mango is logging the kWh data on 15 minute interval and this will be used for the bar chart.

For the target/benchmark line, we have 12 month data(only monthly values).

We need to add average benchmark line to the bar chart based the selected interval.

I think it can be done by creating a two dimensional data array to hold 12 month data but don't know how it can be done.

I couldn't find any help specific to this topic. Appreciate your help!

Thanks,

AA

[MattFox]

Look at guides,
https://docs.amcharts.com/3/javascriptcharts/Guide
they are static values, but can be set with angularJS variables, namely point values. Look in the api docs (http://mangoDomain/ui/docs/ng-mango/ma-serial-chart) (you may have to enable them via the mango menu) to see what I mean. Alternatively, look at the amcharts api info (v3!) and check out the valueAxes info. The valuesAxes settings can be applied via the options attribute in maSerialChart, for example:

options="{valueAxes: [{
			unit: '%',
			unitPosition: right,
			strictMinMax: true,
			minimum: 0,
			maximum: 100,
			capMinimum: 00,
			capMaximum: 60,
			title: 'Humidity',
			axisColor: '#00CED1',
			guides: [{
					fillAlpha: 0.2,
					fillColor: '#B0DE09',
					value: smfpPoint[0].value,
					lineColor: 'red',
					lineAlpha: 1,
					lineThickness: 2,
					inside: true,
					label: 'Min Point',
					toValue: smfcPoint[0].value
				},
				{
					fillAlpha: 0,
					value: smfcPoint[0].value,
					lineColor: 'green',
					lineAlpha: 1,
					lineThickness: 2,
					inside: true,
					label: 'Safe Point.'
				}
			]
		}}"

Good Luck

Fox

[AA]

@mattfox Than for the prompt response.

I will try the solution.

Cheers,
AA

[cwangv]

@mattfox,
thanks for the idea.
However, I am getting stuck in using trend-line for the serial chart.
below is the code I have got in the play area:
In the inspector, I couldn't see any error in the syntax. (see my attached screenshot)

If yourself or anyone can have a look and see if I have got any mistakes in my code or if such option is not achievable:

any pointer is much appreciated!
I wonder if I need to specify the start/end date for the trend line. I did try, but couldn't get it to go. I assume MA directive should be able to pass the start/end date to the trend line.

<div layout="row">
    <ma-filtering-point-list flex ng-model="point1" data-type="NUMERIC" auto-init="true"></ma-filtering-point-list>
    <ma-filtering-point-list flex ng-model="point2" data-type="NUMERIC" auto-init="true"></ma-filtering-point-list>
</div>

<div layout="row">
    <md-input-container flex="50" ng-init="point1Color='#ffaa00'">
        <label>Point 1 Color</label>
        <input type="color" ng-model="point1Color">
    </md-input-container>
    <md-input-container flex="50" ng-init="point2Color='#0000aa'">
        <label>Point 2 Color</label>
        <input type="color" ng-model="point2Color">
    </md-input-container>
</div>

<div layout="row">
    <md-input-container flex="50" ng-init="point1ChartType='line'">
        <label>Point 1 Chart Type</label>
        <md-select ng-model="point1ChartType">
            <md-option ng-value="t.type" ng-repeat="t in chartTypes">{{t.label}}</md-option>
        </md-select>
    </md-input-container>
    <md-input-container flex="50" ng-init="point2ChartType='column'">
        <label>Point 2 Chart Type</label>
        <md-select ng-model="point2ChartType">
            <md-option ng-value="t.type" ng-repeat="t in chartTypes">{{t.label}}</md-option>
        </md-select>
    </md-input-container>
</div>

<ma-point-values point="point1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="point2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>

<ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-point="point1" series-1-type="{{point1ChartType}}" series-1-color="{{point1Color}}" series-2-values="point2Values" series-2-point="point2" series-2-type="{{point2ChartType}}" series-2-color="{{point2Color}}" series-2-axis="right" legend="true" balloon="true" options="{valueAxes:[{minimum:0, axisColor:point1Color, color:point1Color}, {axisColor:point2Color, color:point2Color}]}" trend-lines="{trendLines:[{initialValue: 5, initialXValue: 5, finalValue: 20, finalXValue:20}]}">
</ma-serial-chart>

[Jared Wiltshire]

@cwangv said in How to create a bar chart with benchmark line?:

I wonder if I need to specify the start/end date for the trend line. I did try, but couldn't get it to go. I assume MA directive should be able to pass the start/end date to the trend line.

No it will not, you need to do this yourself.

Change your trend-lines attribute to

trend-lines="[{initialValue: 5, initialDate: dateBar.from.valueOf(), finalValue: 20, finalDate: dateBar.to.valueOf()}]

Trend line documentation is here -
https://docs.amcharts.com/3/javascriptcharts/TrendLine

[MattFox]

Thanks Jared

[cwangv]

@jared-wiltshire
Thanks for the pointer, Jared.
I got it going. I have added a few more options just for fun.
A quick question for you or anyone from IA:
For the attribute 'dateBar.from.valueOf()', where would I find more information on such details.
I did try 'dateBar.from' previously but obviously it did not work.
Is it part of the Mango JavaScript documentation? But I couldn't find direct reference to 'valueOf()' in your online help for Mango JavaScript.

code as followed:

<div layout="row">
    <ma-filtering-point-list flex ng-model="point1" data-type="NUMERIC" auto-init="true"></ma-filtering-point-list>
    <ma-filtering-point-list flex ng-model="point2" data-type="NUMERIC" auto-init="true"></ma-filtering-point-list>
</div>

<div layout="row">
    <md-input-container flex="50" ng-init="point1Color='#ffaa00'">
        <label>Point 1 Color</label>
        <input type="color" ng-model="point1Color">
    </md-input-container>
    <md-input-container flex="50" ng-init="point2Color='#0000aa'">
        <label>Point 2 Color</label>
        <input type="color" ng-model="point2Color">
    </md-input-container>
</div>

<div layout="row">
    <md-input-container flex="50" ng-init="point1ChartType='line'">
        <label>Point 1 Chart Type</label>
        <md-select ng-model="point1ChartType">
            <md-option ng-value="t.type" ng-repeat="t in chartTypes">{{t.label}}</md-option>
        </md-select>
    </md-input-container>
    <md-input-container flex="50" ng-init="point2ChartType='column'">
        <label>Point 2 Chart Type</label>
        <md-select ng-model="point2ChartType">
            <md-option ng-value="t.type" ng-repeat="t in chartTypes">{{t.label}}</md-option>
        </md-select>
    </md-input-container>
</div>

<ma-point-values point="point1" values="point1Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>
<ma-point-values point="point2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
</ma-point-values>

<ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-point="point1" series-1-type="{{point1ChartType}}" series-1-color="{{point1Color}}" series-2-values="point2Values" series-2-point="point2" series-2-type="{{point2ChartType}}" series-2-color="{{point2Color}}" series-2-axis="right" legend="true" balloon="true" options="{valueAxes:[{minimum:0, axisColor:point1Color, color:point1Color}, {axisColor:point2Color, color:point2Color}]}" trend-lines="[{initialValue: 119, initialDate: dateBar.from.valueOf(), finalValue: 120, finalDate: dateBar.to.valueOf(), balloonText:'trendline', lineThickness: 2, lineColor: '#CC0000',dashLength:10}]">
</ma-serial-chart>

[ThomasEinasto]

Hi @cwangv ,

From and To objects are actually date objects in Javascript made using MomentJS if I am not mistaken.

https://momentjs.com/

Mango uses date-picker which is hooked into the header if page is configured to use date-picker on this page.

https://material.angular.io/components/datepicker/overview

By utilizing these previous two ma-date-picker is created.

ValueOf represents ms of the presented date in epoch.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/valueOf

Date picker then creates a date object which can be used in amCharts date axis (typically x axis).

Example:

https://www.amcharts.com/demos/date-based-data/

AmCharts is then used to create a chart for us following amCharts documentation in here:

https://docs.amcharts.com/3/javascriptcharts/ValueAxis << See all sub-sections on the left to see all the properties of the Chart itself. All can be hooked into ma-serial-chart.

To solve the confusion IAS staff has created ma-serial-chart compontent which solves all programming and helps user to create charts without going into details what is actually happening.

Actually a lot of information about the tools is written in API Docs with examples and links to all information.

[AA]

@cwangv Thanks for sharing the solution.

Just tested, it is working.

Have you also tried setting-up multiple segments for the trend line?

[cwangv]

@thomaseinasto
thanks for the info, Thomas.
Time for me to become a real JavaScript programmer. :)

[Jared Wiltshire]

@cwangv The crux of it is that dateBar.from and dateBar.to are Javascript Date objects, .valueOf() returns the Epoch timestamp.

MDN is generally the best reference for all things Javascript related. Thanks for helping out @ThomasEinasto

[Jared Wiltshire]

Also given the way you are using the trend line @cwangv it is possible you might actually want a guide -
https://docs.amcharts.com/3/javascriptcharts/Guide

You can add guides to the value axis and the category axis, see example -

<ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="c7a76688-a0cb-4444-b0ac-846215027dbd" watch-list-xid="WL_ed918c86-646f-4760-b5af-d9285ff86505"></ma-watch-list-get>
<div class="ma-designer-root" id="031da823-b132-4fb8-aac6-8b26115371ad" style="width: 1366px; height: 768px; position: relative;">
    <ma-point-values id="8a04f546-f144-468d-abd4-143f50cea62c" points="designer.points" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" style="position: absolute; left: 226px; top: 644px;" values="designer.values"></ma-point-values>
    <ma-serial-chart id="4c27166e-bae5-443f-9fae-2467c5e6dac3" style="position: absolute; width: 100%; height: 600px; left: 0px; top: 0px;" values="designer.values" points="designer.points" guides="[{date: dateBar.from.valueOf() + (60 * 60 * 1000), toDate: dateBar.to.valueOf() - (60 * 60 * 1000), fillAlpha: 0.2, fillColor: 'green', lineThickness: 2, lineAlpha: 1}]" options="{valueAxes:[{guides:[{value: 5, toValue: 20, fillAlpha: 0.2, fillColor: 'blue', lineThickness: 2, lineAlpha: 1}]}]}"></ma-serial-chart>
</div>