• richard.mortimer

    Hi,

    If I have a point value I get from the Mango device, for example:

    <ma-point-value point-xid="{{ Objects.BattCharge }}"></ma-point-value> it returns 22.5 %

    When I add a display-type=converted such as:

    <ma-point-value display-type="converted" point-xid="{{ Objects.BattCharge }}"></ma-point-value> the value often comes back as 22.500000001 - is there any way to format the number that comes back via this point?

    The desired result is 22.5% (without the space, and only to one decimal place).

    Thanks

    Richard

    posted in Scripting general Discussion read more
  • richard.mortimer

    @craigweb said in Changing class based on data point value:

    Hi Richard

    I tested in the play area as can be seen below. One thing to remember is that whatever does between the {{}} gets evaluated

    Ok, I figured out what I was doing wrong here, and it seems that when you an Angular directive inside a table row; the translation must occur inside a table element, so this won't work:

                <tr data-ng-repeat="Objects in DataPoints">
                    <!-- calculations -->
                    <ma-point-statistics point-xid="{{ Objects.FuelLevel }}" from="time | maMoment:'subtract':7:'days'" to="time" statistics="fuelData"></ma-point-statistics>
                    <ma-point-values point-xid="{{ Objects.FuelLevel }}" values="fuelValues" from="time | maMoment:'subtract':fuelTrend:'days'" to="time" rollup="AVERAGE" rollup-interval="1 DAYS"></ma-point-values>
                    <ma-get-point-value point-xid="{{ Objects.BattCharge }}" point="battery"></ma-get-point-value>-{{ Objects.BattCharge }}-{{ battery }}-
                    <!-- table elements start -->
                    <td>{{ Objects.ID }} - <a href="{{ Objects.URL }}">{{ Objects.Location }}</a></td><!-- Location -->
    
    

    But this will work:

                <tr data-ng-repeat="Objects in DataPoints">
                    <td>{{ Objects.ID }} - <a href="{{ Objects.URL }}">{{ Objects.Location }}</a>
                        <!-- calculations -->
                        <ma-point-statistics point-xid="{{ Objects.FuelLevel }}" from="time | maMoment:'subtract':7:'days'" to="time" statistics="fuelData"></ma-point-statistics>
                        <ma-point-values point-xid="{{ Objects.FuelLevel }}" values="fuelValues" from="time | maMoment:'subtract':fuelTrend:'days'" to="time" rollup="AVERAGE" rollup-interval="1 DAYS"></ma-point-values>
                        <ma-get-point-value point-xid="{{ Objects.BattCharge }}" point="battery"></ma-get-point-value>
                    </td><!-- Location -->
    (etc ...)
    
    

    Oddly, if it's not inside the ng-repeat statement, the evaluation works outside the table element, which is the 'gotcha' that got me .... hope it helps someone in the future!!

    Cheers

    Richard

    (I haven't missed the other points, still working through them, and appreciating the input!!)

    posted in Scripting general Discussion read more
  • richard.mortimer

    Thanks for the suggestions, I ultimately went a different route with this, and bound a slider to the variable that was previously at the top of the page (which was 30 in the first instance) and allowed the user to select how many days worth of data they wanted to see:

    0_1555463825065_014_days.png 0_1555463829221_070_days.png 0_1555463838062_112_days.png 0_1555463848343_500_days.png

    The text box is also editable, so they can manually type a number in, if they wish (the '500' example at the end). I did use some of the styles suggested to modify the axes to a different grey to lessen it's impact upon the page, but it also meant that the X-axes date was relevant again, so the requirement to remove it changed (let's just call it 'agile development :). The slider modifies about 10 graphs across the page and works quite fast.

    Cheers

    Richard

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • richard.mortimer

    Put the ng-repeat inside it's element, but make sure that is surrounded by the div with a class of:

    class="ma-designer-root"
    

    I've also found it handy to give this div a sensible ID (ie not a UUID generated one) on which you can start doing some styling.

    EG:

    <style>
        #main { width: 100%; height: 100%; padding: 0; margin: 0; }
    </style>
    <div class="ma-designer-root" style="width: 1366px; height: 768px; position: relative;" id="main">
        <p ng-repeat="(name, age) in {'adam':20, 'amalie':22}">{{name}} is {{age}}</p>
    </div>
    

    HTH

    Richard

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • richard.mortimer

    @craigweb said in Styling amCharts:

    options=" categoryAxis:{labelsEnabled:false, gridAlpha: 0, axisAlpha: 0}"
    I believe this is what you looking for, not sure didnt test it.

    Thanks for the suggestion, but unfortunately that didn't work either; returns the dates in Unix style format:

    options="{categoryAxis:[{labelsEnabled:false,gridAlpha:'0',axisAlpha:'0'}]}"
    

    Produces:

    0_1555376754148_example.png

    Cheers

    Richard

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • richard.mortimer

    @craigweb said in Changing class based on data point value:

    use <ma-get-point-value point-xid="DP_684160" point="myPoint"></ma-get-point-value> if you would like a variable in you pages scope that you can do logic with. You can then use myPoint in your logic.

    Is it possible to put an AngularJS array element inside this?

    Where the array includes the datapoint-xid as:

    { ... 'BattCharge': 'DP_684160', ... }
    

    They all seem to work in an ma-point-value, but not inside a ma-get-point-value

    <ma-point-value point-xid="{{Objects.BattCharge}}"></ma-point-value>
    
    • this works
    <ma-get-point-value point-xid="{{Objects.BattCharge}}" point="battery"></ma-get-point-value>
    
    • this doesn't work

    Thanks

    Richard

    posted in Scripting general Discussion read more
  • richard.mortimer

    @jared-wiltshire said in Styling amCharts:

    @richard-mortimer said in Styling amCharts:

    Specifically I'm trying to get rid of the X-axis on the trend line graphic below:

    Do you want to hide the whole axis or just the labels?

    @richard-mortimer said in Styling amCharts:

    Also I'd like to make the background canvas slightly smaller,

    What do you mean the "background canvas"? Do you mean changing the size of the whole chart?

    @richard-mortimer said in Styling amCharts:

    is there any documentation on the styles/style names used by amCharts (I couldn't see anything documented on their site).

    Use the chrome debugger to inspect the AmCharts SVG elements and see their classes. This is by far the easiest way IMO, but there is also https://www.amcharts.com/docs/v3/tutorials/css-class-names/

    Thanks - that last link was perfect!!

    Cheers

    Richard

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • richard.mortimer

    @jared-wiltshire said in Changing class based on data point value:

    @richard-mortimer said in Changing class based on data point value:

    Is there any way to paramatize the break points? Is that where I use the ng-init command?

    I'm sorry, I dont understand what you mean. I'll need some more details about what you are trying to achieve.

    Oh, I figured it out, but I'll put here what I did, in case there is a better way to do it.

    Because I have multiple replicated graphs on the page, I used the ng-init command in my main div thus:

    <div id="bg" class="ma-designer-root" style="width: 100%; height: 100%; position: relative;" id=" ... " ng-init="warnBattery=50;badBattery=25;fuelTrend=14">
    

    So when it gets to reading the values; the table cell reads ..

    <td class="mid" ng-class="{'warn': battery1.value < warnBattery, 'bad': battery1.value < badBattery}"><ma-point-value 
    

    So these values warnBattery and badBattery can be set page wide - the next challenge is reading some of these 'trigger' values from the MangoES devices for things like fuel tank levels - as some of our devices are geographically dispersed and have differing levels of alerts.

    Please let mer know if there is a better way of doing it.

    Cheers

    Richard

    posted in Scripting general Discussion read more
  • richard.mortimer

    Hi,

    Is there any way to style the amCharts output? Specifically I'm trying to get rid of the X-axis on the trend line graphic below:

    0_1555047059361_fuel_trend.png

    I've tried to set the options as below, but that returns the date in a unix-style time format, rather then removing it:

     options="{categoryAxis:[{labelsEnabled: false, fontSize: '0'}],valueAxes:[{ unit: '%'}]}">
    

    Can anyone point me in the corect direction for this?

    Also I'd like to make the background canvas slightly smaller, but can't see the correct style to address - is there any documentation on the styles/style names used by amCharts (I couldn't see anything documented on their site).

    Thanks

    Richard

    posted in Dashboard Designer & Custom AngularJS Pages read more
  • richard.mortimer

    @jared-wiltshire Will this also remove the footer? (or, is there a way to do this?)

    Thanks

    Richard

    posted in Dashboard Designer & Custom AngularJS Pages read more