<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Integrating AmChart Code]]></title><description><![CDATA[<p dir="auto">Hi All</p>
<p dir="auto">i have created a chart i would like to use at the AmChart code editor.<br />
but would need some help to get it into mango, maybe as an userModule.</p>
<p dir="auto">Here the code i would like to get into Mango:</p>
<p dir="auto"><strong>HTML:</strong><br />
&lt;script src="<a href="https://www.amcharts.com/lib/4/core.js" rel="nofollow ugc">https://www.amcharts.com/lib/4/core.js</a>"&gt;&lt;/script&gt;<br />
&lt;script src="<a href="https://www.amcharts.com/lib/4/charts.js" rel="nofollow ugc">https://www.amcharts.com/lib/4/charts.js</a>"&gt;&lt;/script&gt;<br />
&lt;script src="<a href="https://www.amcharts.com/lib/4/themes/animated.js" rel="nofollow ugc">https://www.amcharts.com/lib/4/themes/animated.js</a>"&gt;&lt;/script&gt;<br />
&lt;div id="chartdiv"&gt;&lt;/div&gt;<br />
&lt;div id="piechart1" class="asset"&gt;&lt;/div&gt;<br />
&lt;div id="piechart2" class="asset"&gt;&lt;/div&gt;<br />
&lt;div id="piechart3" class="asset"&gt;&lt;/div&gt;</p>
<p dir="auto"><strong>JavaScript:</strong></p>
<p dir="auto">// Themes begin<br />
am4core.useTheme(am4themes_animated);<br />
// Themes end</p>
<p dir="auto">var data = [{<br />
"catergory": "ZPL Supplier Brazing",<br />
"units": 500,<br />
"pie": [{<br />
"value": 250,<br />
"title": "Cat #1"<br />
}, {<br />
"value": 150,<br />
"title": "Cat #2"<br />
}, {<br />
"value": 100,<br />
"title": "Cat #3"<br />
}]<br />
},{<br />
"catergory": "ZNL Supplier Brazing",<br />
"units": 300,<br />
"pie": [{<br />
"value": 250,<br />
"title": "Cat #1"<br />
}, {<br />
"value": 150,<br />
"title": "Cat #2"<br />
}, {<br />
"value": 100,<br />
"title": "Cat #3"<br />
}]<br />
},{<br />
"catergory": "ZPL Factory Brazing",<br />
"units": 300,<br />
"pie": [{<br />
"value": 250,<br />
"title": "Cat #1"<br />
}, {<br />
"value": 150,<br />
"title": "Cat #2"<br />
}, {<br />
"value": 100,<br />
"title": "Cat #3"<br />
}]<br />
},{<br />
"catergory": "ZNL Factory Brazing",<br />
"units": 300,<br />
"pie": [{<br />
"value": 250,<br />
"title": "Cat #1"<br />
}, {<br />
"value": 150,<br />
"title": "Cat #2"<br />
}, {<br />
"value": 100,<br />
"title": "Cat #3"<br />
}]<br />
},{<br />
"catergory": "Supplier Mechanic",<br />
"units": 150,<br />
"pie": [{<br />
"value": 250,<br />
"title": "Cat #1"<br />
}, {<br />
"value": 150,<br />
"title": "Cat #2"<br />
}, {<br />
"value": 100,<br />
"title": "Cat #3"<br />
}]<br />
},{<br />
"catergory": "Factory Mechanic",<br />
"units": 300,<br />
"pie": [{<br />
"value": 250,<br />
"title": "Cat #1"<br />
}, {<br />
"value": 150,<br />
"title": "Cat #2"<br />
}, {<br />
"value": 100,<br />
"title": "Cat #3"</p>
<p dir="auto">}]<br />
}];</p>
<p dir="auto">// Create chart instance<br />
var chart = am4core.create("chartdiv", am4charts.XYChart);<br />
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in</p>
<p dir="auto">// Add data<br />
chart.data = data;</p>
<p dir="auto">// Create axes<br />
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());<br />
categoryAxis.dataFields.category = "catergory";<br />
categoryAxis.renderer.grid.template.disabled = true;</p>
<p dir="auto">var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());<br />
valueAxis.title.text = "Units";<br />
valueAxis.min = 0;<br />
valueAxis.renderer.baseGrid.disabled = true;<br />
valueAxis.renderer.grid.template.strokeOpacity = 0.07;</p>
<p dir="auto">// Create series<br />
var series = chart.series.push(new am4charts.ColumnSeries());<br />
series.dataFields.valueY = "units";<br />
series.dataFields.categoryX = "catergory";<br />
series.tooltip.pointerOrientation = "vertical";</p>
<p dir="auto">var columnTemplate = series.columns.template;<br />
// add tooltip on column, not template, so that slices could also have tooltip<br />
columnTemplate.column.tooltipText = "Series: {name}\nCategory: {categoryX}\nValue: {valueY}";<br />
columnTemplate.column.tooltipY = 0;<br />
columnTemplate.column.cornerRadiusTopLeft = 20;<br />
columnTemplate.column.cornerRadiusTopRight = 20;<br />
columnTemplate.strokeOpacity = 0;</p>
<p dir="auto">// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set<br />
columnTemplate.adapter.add("fill", function(fill, target) {<br />
var color = chart.colors.getIndex(target.dataItem.index * 3);<br />
return color;<br />
});</p>
<p dir="auto">// create pie chart as a column child<br />
var pieChart = series.columns.template.createChild(am4charts.PieChart);<br />
pieChart.width = am4core.percent(80);<br />
pieChart.height = am4core.percent(80);<br />
pieChart.align = "center";<br />
pieChart.valign = "middle";<br />
pieChart.dataFields.data = "pie";</p>
<p dir="auto">var pieSeries = pieChart.series.push(new am4charts.PieSeries());<br />
pieSeries.dataFields.value = "value";<br />
pieSeries.dataFields.category = "title";<br />
pieSeries.labels.template.disabled = true;<br />
pieSeries.ticks.template.disabled = true;<br />
pieSeries.slices.template.strokeWidth = 1;</p>
<p dir="auto">pieSeries.slices.template.adapter.add("stroke", function(stroke, target) {<br />
return chart.colors.getIndex(target.parent.parent.dataItem.index * 3);<br />
});</p>
<p dir="auto">pieSeries.slices.template.adapter.add("fill", function(fill, target) {<br />
return am4core.color("#ffffff")<br />
});</p>
<p dir="auto">pieSeries.slices.template.adapter.add("fillOpacity", function(fillOpacity, target) {<br />
return (target.dataItem.index + 1) * 0.2;<br />
});</p>
<p dir="auto">pieSeries.hiddenState.properties.startAngle = -90;<br />
pieSeries.hiddenState.properties.endAngle = 270;</p>
<p dir="auto">// this moves the pie out of the column if column is too small<br />
pieChart.adapter.add("verticalCenter", function(verticalCenter, target) {<br />
var point = am4core.utils.spritePointToSprite({ x: 0, y: 0 }, target.seriesContainer, chart.plotContainer);<br />
point.y -= target.dy;</p>
<p dir="auto">if (point.y &gt; chart.plotContainer.measuredHeight - 15) {<br />
target.dy = -target.seriesContainer.measuredHeight - 15;<br />
}<br />
else {<br />
target.dy = 0;<br />
}<br />
return verticalCenter<br />
})</p>
<p dir="auto"><strong>CSS:</strong></p>
<p dir="auto">body {<br />
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";<br />
}</p>
<p dir="auto">#chartdiv {<br />
width: 100%;<br />
height: 500px;<br />
}</p>
<p dir="auto"><strong>Here also an example how the chart would look like:</strong><br />
<img src="https://camo.nodebb.org/46ed32af89e2a6f923a8b6908dadcc7b057ea8d8?url=https%3A%2F%2Fi.imgur.com%2F3XMLKFk.jpg" alt="0_1591986349967_Bullets Chart.JPG" class=" img-fluid img-markdown" /></p>
]]></description><link>https://forum.mango-os.com/topic/4844/integrating-amchart-code</link><generator>RSS for Node</generator><lastBuildDate>Sun, 19 Jul 2026 22:21:30 GMT</lastBuildDate><atom:link href="https://forum.mango-os.com/topic/4844.rss" rel="self" type="application/rss+xml"/><pubDate>Fri, 12 Jun 2020 18:06:12 GMT</pubDate><ttl>60</ttl></channel></rss>