• R
    RonnyHinkel

    Hi All

    i have created a chart i would like to use at the AmChart code editor.
    but would need some help to get it into mango, maybe as an userModule.

    Here the code i would like to get into Mango:

    HTML:
    <script src="https://www.amcharts.com/lib/4/core.js"></script>
    <script src="https://www.amcharts.com/lib/4/charts.js"></script>
    <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
    <div id="chartdiv"></div>
    <div id="piechart1" class="asset"></div>
    <div id="piechart2" class="asset"></div>
    <div id="piechart3" class="asset"></div>

    JavaScript:

    // Themes begin
    am4core.useTheme(am4themes_animated);
    // Themes end

    var data = [{
    "catergory": "ZPL Supplier Brazing",
    "units": 500,
    "pie": [{
    "value": 250,
    "title": "Cat #1"
    }, {
    "value": 150,
    "title": "Cat #2"
    }, {
    "value": 100,
    "title": "Cat #3"
    }]
    },{
    "catergory": "ZNL Supplier Brazing",
    "units": 300,
    "pie": [{
    "value": 250,
    "title": "Cat #1"
    }, {
    "value": 150,
    "title": "Cat #2"
    }, {
    "value": 100,
    "title": "Cat #3"
    }]
    },{
    "catergory": "ZPL Factory Brazing",
    "units": 300,
    "pie": [{
    "value": 250,
    "title": "Cat #1"
    }, {
    "value": 150,
    "title": "Cat #2"
    }, {
    "value": 100,
    "title": "Cat #3"
    }]
    },{
    "catergory": "ZNL Factory Brazing",
    "units": 300,
    "pie": [{
    "value": 250,
    "title": "Cat #1"
    }, {
    "value": 150,
    "title": "Cat #2"
    }, {
    "value": 100,
    "title": "Cat #3"
    }]
    },{
    "catergory": "Supplier Mechanic",
    "units": 150,
    "pie": [{
    "value": 250,
    "title": "Cat #1"
    }, {
    "value": 150,
    "title": "Cat #2"
    }, {
    "value": 100,
    "title": "Cat #3"
    }]
    },{
    "catergory": "Factory Mechanic",
    "units": 300,
    "pie": [{
    "value": 250,
    "title": "Cat #1"
    }, {
    "value": 150,
    "title": "Cat #2"
    }, {
    "value": 100,
    "title": "Cat #3"

    }]
    }];

    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

    // Add data
    chart.data = data;

    // Create axes
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "catergory";
    categoryAxis.renderer.grid.template.disabled = true;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.title.text = "Units";
    valueAxis.min = 0;
    valueAxis.renderer.baseGrid.disabled = true;
    valueAxis.renderer.grid.template.strokeOpacity = 0.07;

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "units";
    series.dataFields.categoryX = "catergory";
    series.tooltip.pointerOrientation = "vertical";

    var columnTemplate = series.columns.template;
    // add tooltip on column, not template, so that slices could also have tooltip
    columnTemplate.column.tooltipText = "Series: {name}\nCategory: {categoryX}\nValue: {valueY}";
    columnTemplate.column.tooltipY = 0;
    columnTemplate.column.cornerRadiusTopLeft = 20;
    columnTemplate.column.cornerRadiusTopRight = 20;
    columnTemplate.strokeOpacity = 0;

    // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
    columnTemplate.adapter.add("fill", function(fill, target) {
    var color = chart.colors.getIndex(target.dataItem.index * 3);
    return color;
    });

    // create pie chart as a column child
    var pieChart = series.columns.template.createChild(am4charts.PieChart);
    pieChart.width = am4core.percent(80);
    pieChart.height = am4core.percent(80);
    pieChart.align = "center";
    pieChart.valign = "middle";
    pieChart.dataFields.data = "pie";

    var pieSeries = pieChart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "value";
    pieSeries.dataFields.category = "title";
    pieSeries.labels.template.disabled = true;
    pieSeries.ticks.template.disabled = true;
    pieSeries.slices.template.strokeWidth = 1;

    pieSeries.slices.template.adapter.add("stroke", function(stroke, target) {
    return chart.colors.getIndex(target.parent.parent.dataItem.index * 3);
    });

    pieSeries.slices.template.adapter.add("fill", function(fill, target) {
    return am4core.color("#ffffff")
    });

    pieSeries.slices.template.adapter.add("fillOpacity", function(fillOpacity, target) {
    return (target.dataItem.index + 1) * 0.2;
    });

    pieSeries.hiddenState.properties.startAngle = -90;
    pieSeries.hiddenState.properties.endAngle = 270;

    // this moves the pie out of the column if column is too small
    pieChart.adapter.add("verticalCenter", function(verticalCenter, target) {
    var point = am4core.utils.spritePointToSprite({ x: 0, y: 0 }, target.seriesContainer, chart.plotContainer);
    point.y -= target.dy;

    if (point.y > chart.plotContainer.measuredHeight - 15) {
    target.dy = -target.seriesContainer.measuredHeight - 15;
    }
    else {
    target.dy = 0;
    }
    return verticalCenter
    })

    CSS:

    body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

    #chartdiv {
    width: 100%;
    height: 500px;
    }

    Here also an example how the chart would look like:
    0_1591986349967_Bullets Chart.JPG

    posted in User help read more
  • R
    RonnyHinkel

    Hi all

    i would like to change all switch and text input back to default with the button Finish.
    While the Button Finish also change the page.

    0_1590474439127_Comp page.JPG

    any good and simple idea?

    posted in How-To read more
  • R
    RonnyHinkel

    @craigweb
    Hi Craig, this option is unfortunately not working too

    posted in How-To read more
  • R
    RonnyHinkel

    @craigweb
    have tryed it, but looks like the state chart isn't taking options

    posted in How-To read more
  • R
    RonnyHinkel

    @craigweb

    <ma-point-values point-xid="DP_efcdc3c7-25da-48b2-8422-8dbaf2fd879f" point="point3" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
    </ma-point-values>
    
    
    <ma-point-values point-xid="DP_4159a949-2267-4487-8c4d-eee7a2bbe5a6" 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-xid="DP_a5993877-9c52-4814-a3fc-bc9d2e915dde" point="point2" values="point2Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
    </ma-point-values>
     <ma-point-values point-xid="DP_7e26a972-510c-4fa0-aea7-9e6183219289" point="point4" values="point4Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
    </ma-point-values>
     <ma-point-values point-xid="DP_c9d4c9e5-a2a0-4aae-a0bc-0cf42358be92" point="point5" values="point5Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
    </ma-point-values>
     <ma-point-values point-xid="DP_16174ae7-b83f-4352-b7b9-3fa3c963de5b" point="point6" values="point6Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
    </ma-point-values>
     <ma-point-values point-xid="DP_66f1217d-a9dc-40cc-91c3-d6b4cdbcb149" point="point7" values="point7Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
    </ma-point-values>
        <ma-serial-chart id="48ebbc26-4836-4ca0-b4ee-49f47dd0ad82" style="position: absolute; width: 100%; height: 400px; left: -14px; top: 161px;" series-1-values="point1Values" series-1-point="point1" series-1-type="line" series-1-title="TBM 1 Earth Pressure 1" series-2-values="point2Values" series-2-point="point2" series-2-type="line" series-2-title="TBM 1 Earth Pressure 2" series-3-values="point4Values" series-3-point="point4" series-3-type="line" series-3-title="TBM 1 Earth Pressure 3" series-4-values="point5Values" series-4-point="point5" series-4-type="line" series-4-title="TBM 1 Earth Pressure 4" series-5-values="point6Values" series-5-point="point6" series-5-type="line" series-5-title="TBM 1 Earth Pressure 5" series-6-values="point7Values" series-6-point="point7" series-6-type="line" series-6-title="TBM 1 Earth Pressure 6" legend="true" balloon="true" export="false" options="{synchronizeGrid: true, valueAxes:[{title:'Bar'}], categoryAxis:{labelRotation:45}}">&gt;&gt;</ma-serial-chart>
        <ma-state-chart id="1bea8253-7d93-41a7-8e18-a3887c67ba23" series1-values="point3Values" style="position: absolute; width: 100%; height: 80px; left: 3px; top: 130px;" series1-title="Ring" option="{categoryAxis:{labelTime: transparent}}">&gt;</ma-state-chart>
    

    posted in How-To read more
  • R
    RonnyHinkel

    Hi all
    i use a serial chart combined with a state chart
    when selecting specific date range, the values coming correct, but the time at the state chart is off

    0_1584007509012_Screenshot 2020-03-12 at 17.58.15.png

    <ma-serial-chart id="48ebbc26-4836-4ca0-b4ee-49f47dd0ad82" style="position: absolute; width: 100%; height: 400px; left: -14px; top: 161px;" series-1-values="point1Values" series-1-point="point1" series-1-type="line" series-1-title="TBM 1 Earth Pressure 1" series-2-values="point2Values" series-2-point="point2" series-2-type="line" series-2-title="TBM 1 Earth Pressure 2" series-3-values="point4Values" series-3-point="point4" series-3-type="line" series-3-title="TBM 1 Earth Pressure 3" series-4-values="point5Values" series-4-point="point5" series-4-type="line" series-4-title="TBM 1 Earth Pressure 4" series-5-values="point6Values" series-5-point="point6" series-5-type="line" series-5-title="TBM 1 Earth Pressure 5" series-6-values="point7Values" series-6-point="point7" series-6-type="line" series-6-title="TBM 1 Earth Pressure 6" legend="true" balloon="true" export="false" options="{synchronizeGrid: true, valueAxes:[{title:'Bar'}], categoryAxis:{labelRotation:45}}">>></ma-serial-chart>
    <ma-state-chart id="1bea8253-7d93-41a7-8e18-a3887c67ba23" series1-values="point3Values" style="position: absolute; width: 100%; height: 80px; left: 3px; top: 130px;" series1-title="Ring" option="{categoryAxis:{labelTime: transparent}}">></ma-state-chart>

    all series values are configured with the rollup

    <ma-point-values point-xid="DP_efcdc3c7-25da-48b2-8422-8dbaf2fd879f" point="point3" values="point3Values" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
    </ma-point-values>

    as well the state chart won't accept any option, like to transparent the displayed date, but keep the data value label.

    Has any one a idea how to hide the categoryAxis at the state chart?

    posted in How-To read more
  • R
    RonnyHinkel

    @mattfox
    Were hoping there would be a if condition
    <ma-point-values point-xid="DP_bf4e8b98-ff25-439c-a63e-4af21bc92902" point="point1" values="point1Values" if>0.0 from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals}} {{dateBar.rollupIntervalPeriod}}">
    </ma-point-values>

    posted in Mango Automation general Discussion read more
  • R
    RonnyHinkel

    Hi
    I would like to filter fault values from the chart, for here i would like to filter out the value 0

    0_1582189520373_Screenshot 2020-02-20 at 17.02.50.png

    Unfortunately the 0 value gets generated from the PLC system while reseting and so i also collect those data, as is a change of value.

    How can i filter out those values?

    posted in Mango Automation general Discussion read more
  • R
    RonnyHinkel

    what i could imagine to have a over layer chart, stacked column chart 90 deg turned, and hide the Y and X axis. What do you think? could that work? and where do i get this option from?

    posted in How-To read more
  • R
    RonnyHinkel

    thats the code i'm using:

    <ma-serial-chart id="1bd32ce8-28ba-40f2-85c5-4fae624d2b8d" style="position: absolute; width: 100%; height: 275px; left: 0px; top: 0px;" series-1-values="point1Values" series-1-point="point1" series-1-type="line" series-1-title="Trust Pressure" series-1-color="#DBA901" series-2-values="point2Values" series-2-point="point2" series-2-type="line" series-2-title="PPS Chainage CHD" series-2-color="#2ab7ca" series-2-axis="right" series-3-values="point3Values" series-3-point="point3" series-3-type="step" series-3-title="Ring Number"  legend="true" balloon="true" export="true"></ma-serial-chart>

    posted in How-To read more