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

  • 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