I’m developing a web application for a college project, in which I’m using the amcharts library to generate some graphs, however, I can only generate one graph in div’s with the id “chartdiv”, and this prevents me from generating more than one graph on the same page, does anyone have any idea what the error could be?
function createChart(id, data) {
const root = am5.Root.new(id);
root.setThemes([am5themes_Animated.new(root)]);
const chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout
}));
const series = chart.series.push(am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category"
}));
series.slices.template.setAll({
fillOpacity: 1,
stroke: am5.color(0x000000),
strokeWidth: 1
});
series.get("colors").set("colors", [
am5.color(0xa02a89),
am5.color(0x6a1c71),
]);
series.slices.template.set("toggleKey", "none");
series.ticks.template.set("visible", false);
series.labels.template.set("forceHidden", true);
series.data.setAll(data);
series.appear(1000, 100);
}
dataGraphic = [
{value: "{{ vit }}", category: "Vitórias"},
{value: "{{ qtd - vit }}", category: "Derrotas"}
];
am5.ready(createChart("chartdiv", dataGraphic));
I changed the id’s in the function call and it still didn’t work
New contributor
José Maciel is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
wrap your chart creating function call to a function like this
am5.ready(function() {
var root = am5.Root.new("chartdiv");
});
read more about this in the docs about root element
Also provide proper values ( with supported types )
eg: provide number as value
dataGraphic = [
{value: 8, category: "Vitórias"},
{value: 12, category: "Derrotas"}
];
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#chartdiv {
width: 100%;
height: 250px;
}
#chartdiv2 {
width: 100%;
height: 250px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
<div id="chartdiv2"></div>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script>
//var root = am5.Root.new("chartdiv");
//var root2 = am5.Root.new("chartdiv2");
function createChart(id, data) {
const root = am5.Root.new(id);
root.setThemes([am5themes_Animated.new(root)]);
const chart = root.container.children.push(am5percent.PieChart.new(root, {
layout: root.verticalLayout
}));
const series = chart.series.push(am5percent.PieSeries.new(root, {
valueField: "value",
categoryField: "category"
}));
series.slices.template.setAll({
fillOpacity: 1,
stroke: am5.color(0x000000),
strokeWidth: 1
});
series.get("colors").set("colors", [
am5.color(0xa02a89),
am5.color(0x6a1c71),
]);
series.slices.template.set("toggleKey", "none");
series.ticks.template.set("visible", false);
// series.labels.template.set("forceHidden", true);
series.data.setAll(data);
series.appear(1000, 100);
}
dataGraphic = [
{value: 8, category: "Vitórias"},
{value: 12, category: "Derrotas"}
];
am5.ready(function(){
createChart("chartdiv", dataGraphic)
});
am5.ready(function(){
createChart("chartdiv2", dataGraphic)
});
</script>
</body>
</html>
New contributor
VijayKumarSamuel Arulappan is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.