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

How to create a bar chart with benchmark line?


  • 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


  • 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


  • @mattfox Than for the prompt response.

    I will try the solution.

    Cheers,
    AA


  • @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.

    0_1567515533310_Screen Shot 2019-09-03 at 10.52.35 pm.png

    <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>
    

  • @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


  • Thanks Jared


  • @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.

    0_1567591533424_Screen Shot 2019-09-04 at 8.05.17 pm.png
    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>
    

  • 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.


  • @cwangv Thanks for sharing the solution.

    Just tested, it is working.

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


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


  • @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


  • 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>
    

    0_1567613673335_e72850a7-2b63-41c6-ad88-bd76d2d2d357-image.png