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

  • I have a serial chart with 4 axis, "left", "right", "left-2 ", "right-2 " and I have the corresponding min,max ,axisColor assignments in the valueAxes array. The synchronizeGrid is off, all works fine!

    When I try to add a 5th axis, it doesnt like the "left-4". I have tried searching this forum and the amcharts docs. I must be missing it


  • @dgm There is no left-4 i'm afraid, this can be seen in the code provided by infinite for the mangoUI dashboard, also thanks for scouring the forums first then asking, it prevents doubling up on the same content:
    https://github.com/infiniteautomation/ma-dashboards/blob/main/UI/web-src/ngMango/directives/serialChart.js

     valueAxes: [{
                    id: 'left',
                    position: 'left',
                    axisThickness: 2
                },{
                    id: 'right',
                    position: 'right',
                    axisThickness: 2
                },{
                    id: 'left-2',
                    position: 'left',
                    offset: 50,
                    axisThickness: 2
                },{
                    id: 'right-2',
                    position: 'right',
                    offset: 50,
                    axisThickness: 2
                }],
    

    However, from looking at this, perhaps it's not impossible to set your own using the code above as a guide, make your own "left-4" with a value axes option and give it an offset.
    There is a check in the code to map values to their corresponding axes, so I think this is more than feasible for you.

    chart.valueAxes.some(axis => {
                    if (axis.id === opts.valueAxis) {
                        graphAxis = axis;
                        return true;
                    }
                });
    

    See how you go

    Fox


  • Thanks for the help!

    Unfortunately I cant seem to get past the 4 , and i had to go back to using
    series-x-axis="left-2" and etc. to make it work. I was not able to get the additional parameters in the valueAxes array to work.

    as for the check in the code, my javascript skill is there yet.


  • First, are you using the individual point-x-series attributes instead of points and values?
    If you are using the latter, input into the page between braces your points variable to see their order:

    {{points}}
    

    Then from that put them into each series attribute:

    series-1-point="points[0]" series-2-point="points[1]" series-1-values="pointVals['values_'+points[0].xid ]"
    

    or something to that effect, I can't remember the format of the values output from the ma-point-values directive.
    You'll be able to assign each series to an axis then.

    Fox


  • MattFox,

    this is how I had been doing it( times 4 as I have 4 pens charting)
    series-1-values="point1Values" series-1-point="point1" series-1-type="{{point1ChartType}}" series-1-color="{{point1Color}}" series-1-axis="left"
    ... of course series 3 and 4 used series-3-axis="left-2" and series-4-axis="right-2"

    then, I removed the all the series-x-axis attributes etc. and tried to add the code you suggested from mangoUI dashboard into my valueAxes array.


  • use three ` (tilde) each side of your text. It makes it easier to view the markup/code
    You still need to set the series-x-axis values with your valueAxes markup so the code can link the two together.


  • Thanks MattFox,

    So, I created a series-5-axis="right-4" . Then added a 5th part to the valueAxes array like so:
    id: 'right-4',
    position: 'right',
    offset: 100,
    axisThickness: 2

    everything checks out!


  • Nicely done, glad I could be of assistance!