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:

Hi all, i'm trying to get the lableText for my column charts to work.
But somehow haven't come around a good option.

Help would be very much apricated.

 <ma-serial-chart style="position: absolute; height: 350px; width: 700px; " 	
    series-1-values='[{"value":1, "labelText": "[[value]]", "timestamp":"Battery Lowor/No Battery"}]' 
    
    series-2-values='[{"value":2, "labelText":2, "timestamp":"Software Error"}]' 	
    
    series-3-values='[{"value":3, "timestamp":"Keypad test Error"}]' 	
    
    series-4-values='[{"value":4, "timestamp":"X1 Continuity"}]' 	
    
    series-5-values='[{"value":5, "timestamp":"X3 Continuity"}]' 	
    
    series-6-values='[{"value":6, "timestamp":"X4 Continuity"}]' 	
    
    series-7-values='[{"value":7, "timestamp": "Pressure out of Tolerance"}]' 
   	
    
    series-8-values='[{"value":8, "timestamp":"No Humidity Sensor"}]'
    
    series-9-values='[{"value":9, "timestamp":"Line Freq out of the 59 to 61 Hertz Range"}]'
    
    series-10-values='[{"value":10, "timestamp":"Temperature sensor wiring or delta Error"}]'
    
    default-type="column" labelText="[[value]]" legend="false" balloon="true" options="{categoryAxis:{parseDates:false, labelRotation:45}, tooltipText: value, labelText: [value], depth3D: 20, angle: 40, rotate: true, synchronizeGrid: false, valueAxes:[{ minimum:0, maximum:100,}]}"
    ></ma-serial-chart>	

Hi all

i'm using ma-calc and statistics on the most of my pages, while all having the same rollup.
to simplify and increase loading speed of some pages, i would like to us the values from /ui/test1 in another page /ui/test2.

would be very crateful for some help.

Thank You

@mattfox
Perfect thats working for me

Thank you very much Mattfox

@mattfox
no thats just a left over from trying, sorry about that

@mattfox
yes you're correct

@mattfox

the timestamp would be from Serial number to Serial Number+1

@MattFox

@mattfox

@mattfox
Hi Mattfox
what i'm trying to do is a production report based on serial numbers. for this we have the selection of the serial number. After selection of the serial number, there is a start and end time for each serial number, which i would like to use for every datapoint at this page.

<md-select ng-model="serialID" ng-required="true" ng-change="callOnChange()" >
<md-option ng-repeat="serial in serials" ng-value="{{serial.value}}" > {{serial.value}} </md-option>
</md-select>


<ma-point-values point-xid="DP_bf4e8b98-ff25-439c-a63e-4af21bc92902" point="point1" values="point1Values" from="serialID.first.timestamp" to="serialID.last.timestamp" >
</ma-point-values>

@mattfox

<md-select ng-model="serialID" ng-required="true" ng-change="callOnChange()" >
<md-option ng-repeat="serial in serials" ng-value="{{serial.value}}" > {{serial.value}} </md-option>
</md-select>

 <ma-point-statistics point-xid="DP_7e9b56ef-578c-4a0a-96bc-289a29ccc37b" from='serialID' to='(serialID+1)' statistics="Ring"></ma-point-statistics>

if i would like to use the SerialID with a MA-point-statistics as a from- to, how i could include those values?
Sorry, really trying since days and have no conclusion yet.

Thank you for giving me some help!!!