Hi,

We are please to announce that an Advanced Weekly Scheduler module for Mango that supports override and exception days is coming out soon. It is currently available as beta for anyone that wants to test it.

There is still work being done on the UI but here is a sneak peak of how it works:

If you want to test this out you can install it into your Mango by first going to System Settings and changing your "Upgrade release channel" to Beta.

Then go to the Modules page and click "Check for updates" be sure to update any other modules and core to the latest.

There will be more updates coming out soon and a production release shortly.

Thanks for the info and for updating this topic.

The twillio module for Mango 3.7 and earlier was pretty experimental had some issues. We decided to drop this module in Mango v4 as it really needs to be rebuilt as an actual event handler rather than a publisher.

Upgrading to Mango v4 will have many considerations. If you are interested you should contact us at sales@radixiot.com and we can talk about upgrading your license and any technical implications. We may be able to accelerate any features you need as part of the process.

Can you run the same command on the root file system to see other folders taking up space? Is your MangoES running the latest version? There were some issues resolve in the MangoES Configuration Module that stopped system logs from taking up space?

Here are two relevant release notes from the MangoES Configuration Module:

Version 3.3.1
Fixes to prevent /var/mail/mail file from growing, delete that file if present
Version 1.2.1
Fix for inodes filling /var/spool/exim4/input from /etc/cron.d/system-info cron commands

Both of these look like the device didn't respond. Do you get these all the time or just once and awhile. If things generally work and you get these just once and awhile I'd say that's fairly normal for modbus devices.

We've been working hard on the next release of Mango and I wanted to share some videos showing off the new features. We will be releasing a beta version with these features very soon.

Hi Victor, Thanks for the feedback. I think all your points are very valid. We actually have plans to integrate into many services, as you mention, including Twillo, but our priority for Mango v4 has been stability and scale. We now have systems with over 1 million data points which was quite an achievement for Mango. But I completely agree, and we will not lose sight of these other features and integration.

Did you use the Twilio module in Mango v3? Did you find it worked well? It is possible we could upgrade the module to v4, but I was under the impression not many people used it, and it behaved a bit odd as a publisher rather than an event handler. Building it as an event handler will be the better way to go, but I welcome some more feedback.

@psysak Yes the MangoES and GT are ARM devices and there should be no issue as long as you have the correct Java version installed. I'm also running Mango on a new Mac with the M1 chip without any issue.

We are planning to have a Beta version out this week and hopefully a full release in the next few weeks.

You do this on your data point settings. You can either set the Units or use the suffix

Or

Hi dage, OPC DA has dependencies on Windows security features so will only work on Windows. We are planning to add OPC UA in the future which will work on Linux and Windows.

Greetings Mango Users,

Mango Automation version 2.6.0 has been released. This is a major release with a lot of important changes and improvements. This release includes significant changes to user permission system and includes a powerful new Excel Reporting Module, read below for more details and the full list.

For more videos about new features click here.

Click here. for instructions and video on how to upgrade your existing systems.

Mango Admin and User Improvements

• New Internal Metric page displays detailed information on internal operation and memory usage.
• New Start-up extensions can be used to set memory settings for different sized systems.
• Added ability to set thread pools on system setting page. Important for very large installations.
• Added system settings to customs login page and other custom page locations.
• Upgraded user permissions to support user groups.
• New permission setting allows bulk permission setting of data points.
• Added permission options to control access to modules and features.
• Added template system for data point settings such as logging and text rendering options. When templates are updated changes are pushed to all points using the template.
• Added ability to export and import data points in csv format.
• The value of the data point is now included into the email fired from an event detector.
• Added ability to create Virtual comm ports on the system setting page.
• Added option to include system performance information and process thread list in a Event Handler email. Useful to collect diagnostics information in the event of a server performance issue.
• New code editor with syntax highlighting for meta data points and scripting data sources.
• New event detector for detecting smoothness. Useful for detecting a bad sensor or increased "noise" in a signal.
• Multiple important security vulnerabilities resolve.

New Developer Features

• Added ability to override web.xml via placing a modified file at overrides/web/web.xml
• Added ability to enhance the base web.xml by placing override-web.xml into overrides/web/override-web.xml
• Added new Module Element Definitions for Templates, Rest Models and Rest JSON deserialization so new Modules can leverage these features
• Added ability for Data Source modules to allow exporting of their data points as CSV and JSON
• Added new states for Modules to use: Install and Upgrade
• Improved Scripting functionality by streamlining old system and adding new Utilities for Data Point and Data Source management
• Integration of RQL parsing via AST
• Various security enhancements
• Upgrade AmCharts to 3.17.2
• Improved reliability of scripts to stop and start Mango
• Upgraded startup/shutdown/restart scripts to log to logs/ma-script.log
• Many changes and improvements to the RESTful API and JavaScript API
• Upgraded example and documentation on using the JavaScript API

Enterprise NoSQL Database Improvements

• Added Incremental Backup options and restore tool
• various bugs fixed
• Greatly improved corruption scan speed and added multi threading options
• Greatly improved backup and purge speeds
• Upgrade library to capture bugfix for backdate posting and performance improvements to backdate posting.
• Adding System settings for adjusting corruption scan threads.

BACnet Data Source and Publisher

• Upgraded to work with core version 2.6.0
• Adding Mango API model support
• Adding SerialUID's to the point locators, on module start existing UIDs are replaced with -1.
• Changed COV subscription IDs to use the data point ID instead of incrementing counter.
• Upgraded BACnet4J to 3.1.2
• Fix for BACnet error "Cannot send a request in the socket listener thread."

Persistent TCP Data Source and Publisher

• Added sync range count request timeout setting for publisher
• Added logic to publisher to allow reconnecting syncs even if the connection is terminated
• Added a column for the date/time that all data points are synced to on the edit page
• Improved sync from time tracking accuracy within the sync handler
• Added Device Name column to points list
• Bugfix to ensure that the new sync from time gets set and the publisher does not have to be re-started.
• Bugfix where not every point was getting the sync from time set on the page.
• Added ability to set the sync from time on the edit page.
• Added socket timeout setting
• Added test connection period setting
• Added sync response timeout setting

Modbus Data Source and Publisher

• Added ability to use multiple types of modbus registers such as 2 byte Int or 4 byte float.
• Fixed bug on Data Source page where adding a point via the tool would not work.
• Adding additional publisher options for publishing Numeric points as Integers and 4 byte floats.
• Upgrading Modbus4j to 3.0.0 to be able to adjust message timing, and reduce dependencies
• Adding settings to override the Modbus4j default message timing settings

Custom Dashboards

• Added Javascript API version 2.0
• Added documentation for API
• New examples for API version 2.0
• Upgraded to work with core version 2.6.x
• Modified RealTimeModel to use 'timestamp' instead of 'time' for its timestamp
• Bugfixes
• Add RealtimeDataProvider and PointEventManager
• CAUTION: Removed persist path to allow full upgrade of module's web folder. Ensure any custom work is moved to the overrides folder in the core.
• To add new files to this module place them in the core/overrides/web/modules/dashboards/web/ folder with an identical structure
• Added ability to override files using the mango-javascript URL mapping prefix

New Modules:

Excel Reports

• This is a powerful reporting module that allows you to use a Excel document as a template for reports. Mango will automatically insert data into the document and optionally email it to you on a schedule. Learn more.Learn more

Measurlogic DTS Cell Data Source

• Data Source to receive energy data sent from a Measurlogic cellular energy meter.

eGauge Data Source

• Data Source Module to poll data from eGauge energy meter including history sync.

Data Point Detail View

• New HTML5 page for viewing data point details. Includes amChart with roll up and interval options for chart.

We started working on this very thing last week and will be adding in the API endpoints needed and making some Angular directives. The only think I'm not clear on will be permissions. Currently for a user to change a event detector setting they would need edit permissions on the data point. Would that be ok or would you need a separate permission level just to edit the event detectors? How soon do you need to supply this to your customer? I think it's going to be at least a couple weeks before we release it.

I think this would be quite difficult. It would not be possible to include a graph in a csv file. A csv file is just a text file. We will be developing a new reports module soon which will use an Excel file as a template. The excel file could contain charts and formula. When the report runs Mango will insert data into the sheet and column that you specify. This will allow you to easily make very custom reports. I don't have an exact time line on this but hope to have it available in the next couple months.

Hi Aldo,

Here is the quick run down:

For manual inputs a Virtual data piont is your best choice for sure.

Meta Data Points create new Data Points based on scripts using values of other data points in the system.

Scripting Data Sources are generally used to change the value of other data points in the system based on scripts. They do have the ability to also create their own data points so there is some crossover.

The other difference is that Meta Data Point have the option to update based on Context update where Scripting Data Sources can only run on a CRON. Meta Data Points also have a tool to generate their own history based on the script.

You can use a CRON pattern on the Scripting data source so yes you could use it to reset a value every hour. You could do this on a Meta Data Point as long as the value to reset was it's own value.

Hope that helps

Here is a screen shot and the code that might help

<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<style>
    .digital-display {
        font-family: 'Orbitron', sans-serif;
        font-size: 40px;
        display: flex;
        height: 120px;
        align-items: center;
        justify-content: center;
    }
</style>
<ma-ui-state-params state-params="pageParams"></ma-ui-state-params>

<ma-point-hierarchy path="['Meters']" hierarchy="meterList"></ma-point-hierarchy>
<div layout layout-align="space-between center">
    <md-button class="md-raised md-accent md-hue-1" ui-sref="ui.energyManagment.electricalDashboard">
        <md-icon>arrow_back</md-icon>
        Back
    </md-button>
        
    <div layout layout-align="end center">
        <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='DAY_SO_FAR'">
            TODAY
        </md-button>
        <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='MONTH_SO_FAR'">
            THIS MONTH
        </md-button>
        <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='PREVIOUS_MONTH'">
            LAST MONTH
        </md-button>
        <md-button class="md-raised md-accent md-hue-3" ng-click="dateBar.preset ='YEAR_SO_FAR'">
            YEAR
        </md-button>
    </div>
</div>

<div ng-init="selectedMeter = pageParams.meterId"></div>

<div ng-if="!pageParams.meterId" layout layout-align="stert center">
    <h2 style="padding-right: 20px;">Select Meter:</h2>
    <md-select flex ng-model="selectedMeter" ng-init="selectedMeter = 'VPM01'">
        <md-option ng-repeat="meterName in meterList.subfolders" ng-value="meterName.name">{{meterName.name}}</md-option>
    </md-select>
    <ma-point-hierarchy path="['Meters', selectedMeter]" hierarchy="$parent.meterData" points></ma-point-hierarchy>
</div>

<div ng-if="pageParams.meterId" layout layout-align="stert center">
    <h2 style="padding-right: 20px;">Select Meter:</h2>
    <md-select flex ng-model="selectedMeter" ng-init="selectedMeter = pageParams.meterId">
        <md-option ng-repeat="meterName in meterList.subfolders" ng-value="meterName.name">{{meterName.name}}</md-option>
    </md-select>
    <ma-point-hierarchy path="['Meters', selectedMeter]" hierarchy="$parent.meterData" points></ma-point-hierarchy>
</div>


<div layout="column" layout-gt-sm="row" layout-align="space-between">
    <md-card flex>
        <md-toolbar class="md-whiteframe-1dp md-hue-1">
    		<div class="md-toolbar-tools">
    			<h2 flex>
    				<span>Instantaneous kW Total</span>
    			</h2>
    		</div>
    	</md-toolbar>
    	<ma-calc input="meterData.points | filter:{name:'Power_Active_Total'} | maFirst" output="Power_Active_Total"></ma-calc>
        <!--<ma-gauge-chart point-xid="{{Power_Active_Total.xid}}" interval="" start="0" end="0.4" -->
        <!--style="width:100%; height:250px; margin-bottom: -35px;" axis-thickness="12" axis-alpha="0.2" axis-label-font-size="10" value-offset="-60" value-font-size="12" tick-interval="" arrow-inner-radius="35" arrow-alpha="0.8"></ma-guage-chart>-->
        <ma-get-point-value point-xid="{{Power_Active_Total.xid}}" point="powerVal"></ma-get-point-value>
        <div class="digital-display">
            {{powerVal.value | number:2}} kW
        </div>
    </md-card>
    <md-card flex>
        <md-toolbar class="md-whiteframe-1dp md-hue-1">
    		<div class="md-toolbar-tools">
    			<h2 flex>
    				<span>Instantaneous kW Demand</span>
    			</h2>
    		</div>
    	</md-toolbar>
        <ma-calc input="meterData.points | filter:{name:'Demand_Active_Total'} | maFirst" output="Demand_Active_Total"></ma-calc>
        <!--<ma-gauge-chart point-xid="{{Demand_Active_Total.xid}}" interval="" start="0" end="0.4" -->
        <!--style="width:100%; height:250px; margin-bottom: -35px;" axis-thickness="12" axis-alpha="0.4" axis-label-font-size="10" value-offset="-60" value-font-size="12" tick-interval="" arrow-inner-radius="35" arrow-alpha="0.8"></ma-guage-chart>-->
        <ma-get-point-value point-xid="{{Demand_Active_Total.xid}}" point="Demand_Active_TotalVal"></ma-get-point-value>
        <div class="digital-display">
            {{Demand_Active_TotalVal.value | number:2}} kW
        </div>
    </md-card>
    <md-card flex>
        <md-toolbar class="md-whiteframe-1dp md-hue-1">
    		<div class="md-toolbar-tools">
    			<h2 flex>
    				<span>Peak kW Demand</span>
    			</h2>
    		</div>
    	</md-toolbar>
        <ma-point-statistics point="Demand_Active_Total" from="dateBar.from" to="dateBar.to" statistics="Demand_Active_Total_Stats" rendered="false">
        </ma-point-statistics>
        <!--<pre>{{ Demand_Active_Total_Stats }}</pre>-->
        <!--<ma-gauge-chart value="Demand_Active_Total_Stats.maximum.value" interval="" start="0" end="0.4" -->
        <!--style="width:100%; height:250px; margin-bottom: -35px;" axis-thickness="12" axis-alpha="0.4" axis-label-font-size="10" value-offset="-60" value-font-size="12" tick-interval="" arrow-inner-radius="35" arrow-alpha="0.8"></ma-guage-chart>-->
        <div class="digital-display">
            {{Demand_Active_Total_Stats.maximum.value| number:2}} kW
        </div>
        
    </md-card>
    <md-card flex>
        <md-toolbar class="md-whiteframe-1dp md-hue-1">
    		<div class="md-toolbar-tools">
    			<h2 flex>
    				<span>Total Energy</span>
    			</h2>
    		</div>
    	</md-toolbar>
    	<ma-calc input="meterData.points | filter:{name:'Energy_Active_Total'} | maFirst" output="Energy_Active_Total"></ma-calc>
        <ma-point-statistics point="Energy_Active_Total" from="dateBar.from" to="dateBar.to" first-last="true" statistics="Energy_Active_Total_Stats" rendered="false">
        </ma-point-statistics>
        <!--<pre>{{Energy_Active_Total_Stats}}</pre>-->
        <!--<ma-gauge-chart value="Energy_Active_Total_Stats[1].value - Energy_Active_Total_Stats[0].value" interval="" start="0" end="40" -->
        <!--style="width:100%; height:250px; margin-bottom: -35px;" axis-thickness="12" axis-alpha="0.2" axis-label-font-size="10" value-offset="-60" value-font-size="12" tick-interval="" arrow-inner-radius="35" arrow-alpha="0.8"></ma-guage-chart>-->
        <div class="digital-display">
            {{(Energy_Active_Total_Stats[1].value - Energy_Active_Total_Stats[0].value)  | number:2}} kWh
        </div>
    </md-card>
</div>
<div layout="column" layout-gt-sm="row">
    <md-card flex="100" flex-gt-md="25">
        <md-toolbar class="md-whiteframe-1dp md-hue-1">
    		<div class="md-toolbar-tools">
    			<h2 flex>
    				<span>Energy Metrics</span>
    			</h2>
    		</div>
    	</md-toolbar>
        <md-list class="md-dense">
            <md-list-item layout>
                <h3>Line-to-Neutral Voltage</h3>
            </md-list-item>
            <md-list-item layout>
                Voltage Line-to-Neutral L1
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Voltage_LN_1'} | maFirst" output="Voltage_LN_1"></ma-calc>
                <ma-point-value point-xid="{{Voltage_LN_1.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Voltage Line-to-Neutral L2
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Voltage_LN_2'} | maFirst" output="Voltage_LN_2"></ma-calc>
                <ma-point-value point-xid="{{Voltage_LN_2.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Voltage Line-to-Neutral L3
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Voltage_LN_3'} | maFirst" output="Voltage_LN_3"></ma-calc>
                <ma-point-value point-xid="{{Voltage_LN_3.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Voltage Line-to-Neutral Average
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Voltage_LN_Average'} | maFirst" output="Voltage_LN_Average"></ma-calc>
                <ma-point-value point-xid="{{Voltage_LN_Average.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>

            <md-divider></md-divider>
            
            <md-list-item layout>
                <h3>Line-to-Line Voltage</h3>
            </md-list-item>
            <md-list-item layout>
                Voltage Line-to-Line L1-2
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Voltage_LL_12'} | maFirst" output="Voltage_LL_12"></ma-calc>
                <ma-point-value point-xid="{{Voltage_LL_12.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Voltage Line-to-Line L2-3
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Voltage_LL_23'} | maFirst" output="Voltage_LL_23"></ma-calc>
                <ma-point-value point-xid="{{Voltage_LL_23.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Voltage Line-to-Line L3-1
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Voltage_LL_31'} | maFirst" output="Voltage_LL_31"></ma-calc>
                <ma-point-value point-xid="{{Voltage_LL_31.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Voltage Line-to-Line Average
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Voltage_LL_Average'} | maFirst" output="Voltage_LL_Average"></ma-calc>
                <ma-point-value point-xid="{{Voltage_LL_Average.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>

            <md-divider></md-divider>
            
            <md-list-item layout>
                <h3>Current</h3>
            </md-list-item>
            <md-list-item layout>
                Current L1
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Current_1'} | maFirst" output="Current_1"></ma-calc>
                <ma-point-value point-xid="{{Current_1.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Current L2
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Current_2'} | maFirst" output="Current_2"></ma-calc>
                <ma-point-value point-xid="{{Current_2.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Current L3
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Current_3'} | maFirst" output="Current_3"></ma-calc>
                <ma-point-value point-xid="{{Current_3.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Current Total
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Current_Total'} | maFirst" output="Current_Total"></ma-calc>
                <ma-point-value point-xid="{{Current_Total.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>

            <md-divider></md-divider>
            
            <md-list-item layout>
                <h3>Power Factor</h3>
            </md-list-item>
            <md-list-item layout>
                Power Factor L1
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'PF_1'} | maFirst" output="PF_1"></ma-calc>
                <ma-point-value point-xid="{{PF_1.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Power Factor L2
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'PF_2'} | maFirst" output="PF_2"></ma-calc>
                <ma-point-value point-xid="{{PF_2.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Power Factor L3
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'PF_3'} | maFirst" output="PF_3"></ma-calc>
                <ma-point-value point-xid="{{PF_3.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Power Factor Overall
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'PF_Overall'} | maFirst" output="PF_Overall"></ma-calc>
                <ma-point-value point-xid="{{PF_Overall.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            
            <md-divider></md-divider>
            
            <md-list-item layout>
                <h3>Active Power</h3>
            </md-list-item>
            <md-list-item layout>
                Active Power L1
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Power_Active_1'} | maFirst" output="Power_Active_1"></ma-calc>
                <ma-point-value point-xid="{{Power_Active_1.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Active Power L2
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Power_Active_2'} | maFirst" output="Power_Active_2"></ma-calc>
                <ma-point-value point-xid="{{Power_Active_2.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Active Power L3
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Power_Active_3'} | maFirst" output="Power_Active_3"></ma-calc>
                <ma-point-value point-xid="{{Power_Active_3.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Active Power Total
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Power_Active_Total'} | maFirst" output="Power_Active_Total"></ma-calc>
                <ma-point-value point-xid="{{Power_Active_Total.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Active Power Demand
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Demand_Active_Total'} | maFirst" output="Demand_Active_Total"></ma-calc>
                <ma-point-value point-xid="{{Demand_Active_Total.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            
            <md-divider></md-divider>
            
            <br>
            <md-list-item layout>
                Frequency
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Frequency'} | maFirst" output="Frequency"></ma-calc>
                <ma-point-value point-xid="{{Frequency.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Reactive Power Total
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Power_Reactive_Total'} | maFirst" output="Power_Reactive_Total"></ma-calc>
                <ma-point-value point-xid="{{Power_Reactive_Total.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
            <md-list-item layout>
                Apparent Power Total
                <span flex></span>
                <ma-calc input="meterData.points | filter:{name:'Power_Apparent_Total'} | maFirst" output="Power_Apparent_Total"></ma-calc>
                <ma-point-value point-xid="{{Power_Apparent_Total.xid}}" enable-popup="left"></ma-point-value>
            </md-list-item>
        </md-list>
    </md-card>
            
    <md-card flex="100" flex-gt-md="75">
        <md-toolbar class="md-whiteframe-1dp md-hue-1">
    		<div class="md-toolbar-tools">
    			<h2 flex>
    				<span>Historical Charts</span>
    			</h2>
    		</div>
    	</md-toolbar>
        <md-card-content layout="column">
            <!--<div layout="row" layout-xs="column">
                <md-input-container flex>
                <label>Preset</label>
                <ma-date-range-picker from="from" to="to" preset="LAST_1_DAYS" update-interval="5 seconds"></ma-date-range-picker>
                </md-input-container>
                <md-input-container flex>
                <label>From date</label>
                <ma-date-picker ng-model="from"></ma-date-picker>
                </md-input-container>
                <md-input-container flex>
                <label>To date</label>
                <ma-date-picker ng-model="to"></ma-date-picker>
                </md-input-container>
            </div>-->
            
            <h2>Active Power Total & Demand</h2>
            <ma-point-values point="Power_Active_Total" values="Power_Active_Total_Values" from="dateBar.from" to="dateBar.to" rollup="AVERAGE" auto-rollup-interval="true"></ma-point-values>
            <ma-point-values point="Demand_Active_Total" values="Demand_Active_Total_Values"  from="dateBar.from" to="dateBar.to" rollup="MAXIMUM" auto-rollup-interval="true"></ma-point-values>
            <ma-serial-chart flex style="height: 300px; width: 100%" series-1-point="Power_Active_Total" series-1-values="Power_Active_Total_Values" series-2-point="Demand_Active_Total" series-2-values="Demand_Active_Total_Values" series-1-color="rgb(45,197,255)" series-2-color="red" series-1-type="line" series-2-type="line" legend="true" balloon="true" default-balloon-text="[[title]]: [[value]]" export="true" stack-type="none">
			</ma-serial-chart>
			
			<h2>kWh Total</h2>
			<ma-point-values point="Energy_Active_Total" values="Energy_Active_Total_Values" from="dateBar.from" to="dateBar.to" rollup="DELTA" auto-rollup-interval="true"></ma-point-values>
            <ma-serial-chart flex style="height: 300px; width: 100%" series-1-point="Energy_Active_Total" series-1-values="Energy_Active_Total_Values" series-1-color="rgb(45,197,255)" default-type="column" legend="true" balloon="true" default-balloon-text="[[title]]: [[value]]" export="true" stack-type="regular">
			</ma-serial-chart>
        </md-card-content>
    </md-card>
</div>

This can easily be done using a DGLux page which we have many tutorial on in this forum.
http://forum.infiniteautomation.com/forum/posts/list/1310.page

Here are some example server side scripts that should do what you need on the Mango Graphic Views:

//Server Side Script
//Toggle on image click

var s = "";
if (!value)
    s += "<img style='cursor:pointer;' src='/modules/sstGraphics/web/graphics/Drinks/drink_empty.png' onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", \"true\");return true;'/>";
else if (value)
    s += "<img style='cursor:pointer;' src='/modules/sstGraphics/web/graphics/Drinks/drink.png' onclick='mango.view.setPoint("+ point.id +", \""+ pointComponent.id +"\", \"false\");return false;'/>";
return s;