amCharts - Multiple hyper links in a label - amcharts

Is it possible to have multiple links in the same label? I would like to be able to click on "Data One" or "Data Two" and be directed to different urls.
var sourceLabel = chart.createChild(am4core.Label);
sourceLabel.text = "Source: Date one & Data Two";
sourceLabel.align = "right";
sourceLabel.interactionsEnabled = true;
sourceLabel.url = "https://data-one.html";

You can have two links in the same label if you use html instead of text:
sourceLabel.html = 'Data One & Data Two'
If you don't want to use html, then your only option is to create two separate labels.
var chart = am4core.create("chartdiv", am4charts.XYChart);
var sourceLabel = chart.createChild(am4core.Label);
sourceLabel.html = 'Data One & Data Two '
chart.data = [{
"category": "Research",
"value": 450
}, {
"category": "Marketing",
"value": 1200
}, {
"category": "Distribution",
"value": 1850
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 100%; height: 300px;"></div>

Related

Multiple amCharts 4 in firefox

I try to load multiple amcharts charts on one page. The charts work perfectly with both Chrome and Edge. Firefox shows only the first graph and not the other graphs. Hopefully someone can show me how I can solve this problem.
previously question does not have a visible solution
In this example I have made 2 amcharts graphs. If I open this example in Chrome or Edge then all graphs works but not in Firefox. Hopefully with the help of this example you can find out what the problem is.
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var gantt = am4core.create("gantt", am4charts.XYChart);
gantt.hiddenState.properties.opacity = 0; // this creates initial fade-in
gantt.paddingRight = 30;
gantt.dateFormatter.inputDateFormat = "dd.MM.yyyy";
var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;
gantt.data = [
{
category: 'First',
fromDate: '01.01.2022',
toDate: '01.03.2022',
fromDateReal: '01.02.2022',
toDateReal: '01.04.2022',
colorPlan: colorSet.getIndex(0).brighten(0),
colorReal: colorSet.getIndex(8).brighten(0)
},
{
category: 'Second',
fromDate: '01.02.2022',
toDate: '01.05.2022',
fromDateReal: '01.01.2022',
toDateReal: '01.06.2022',
colorPlan: colorSet.getIndex(0).brighten(0),
colorReal: colorSet.getIndex(8).brighten(0)
}
]
var categoryAxisGantt = gantt.yAxes.push(new am4charts.CategoryAxis());
categoryAxisGantt.dataFields.category = "category";
categoryAxisGantt.renderer.grid.template.location = 0;
categoryAxisGantt.renderer.inversed = true;
var yLabelGantt = categoryAxisGantt.renderer.labels.template;
yLabelGantt.wrap = true;
yLabelGantt.maxWidth = 200;
var dateAxisGantt = gantt.xAxes.push(new am4charts.DateAxis());
dateAxisGantt.dateFormatter.dateFormat = "dd.MM.yyyy";
dateAxisGantt.renderer.minGridDistance = 70;
dateAxisGantt.min = (new Date(2022, 01, 01)).getTime();
dateAxisGantt.strictMinMax = true;
dateAxisGantt.renderer.tooltipLocation = 0;
var rangeGantt = dateAxisGantt.axisRanges.create();
rangeGantt.date = new Date();
rangeGantt.grid.stroke = am4core.color("red");
rangeGantt.grid.strokeWidth = 2;
rangeGantt.grid.strokeOpacity = 1;
function createGanttSeries(start, end, category, name, color){
var series1Gantt = gantt.series.push(new am4charts.ColumnSeries());
series1Gantt.columns.template.width = am4core.percent(80);
series1Gantt.columns.template.tooltipText = "{name}\n{category}: {openDateX} - {dateX}";
series1Gantt.dataFields.openDateX = start;
series1Gantt.dataFields.dateX = end;
series1Gantt.dataFields.categoryY = category;
series1Gantt.name = name
series1Gantt.columns.template.propertyFields.fill = color; // get color from data
series1Gantt.columns.template.propertyFields.stroke = color;
series1Gantt.columns.template.strokeOpacity = 1;
}
//план
createGanttSeries("fromDate", "toDate", "category", "План", "colorPlan");
//факт
createGanttSeries("fromDateReal", "toDateReal", "category", "Факт", "colorReal");
gantt.scrollbarX = new am4core.Scrollbar();
// Create chart instance
var chart = am4core.create("dds", am4charts.XYChart);
let title = chart.titles.create();
title.text = "ДДС";
title.fontSize = 25;
title.marginBottom = 30;
// Export
chart.exporting.menu = new am4core.ExportMenu();
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter = new am4core.DateFormatter();
chart.dateFormatter.dateFormat = "MMMM yy";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.name = "ДДС (план)";
columnSeries.dataFields.valueY = "val";
columnSeries.dataFields.dateX = "date";
columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} {dateX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
columnSeries.columns.template.propertyFields.stroke = "stroke";
columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
columnSeries.tooltip.label.textAlign = "middle";
chart.data = [
{
"date": "06.10.2022",
"val": 143566570.46,
"total": 143566570.46
},
{
"date": "09.25.2022",
"val": 35891642.62,
"total": 179458213.08
}
];
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#gantt {
width: 100%;
height: 500px;
}
#dds {
width: 100%;
height: 500px;
}
<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="gantt"></div>
<div id="dds"></div>
You're missing an inputDateFormat for your second chart.
chart.dateFormatter.inputDateFormat = "MM.dd.yyyy";
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var gantt = am4core.create("gantt", am4charts.XYChart);
gantt.hiddenState.properties.opacity = 0; // this creates initial fade-in
gantt.paddingRight = 30;
gantt.dateFormatter.inputDateFormat = "dd.MM.yyyy";
var colorSet = new am4core.ColorSet();
colorSet.saturation = 0.4;
gantt.data = [
{
category: 'First',
fromDate: '01.01.2022',
toDate: '01.03.2022',
fromDateReal: '01.02.2022',
toDateReal: '01.04.2022',
colorPlan: colorSet.getIndex(0).brighten(0),
colorReal: colorSet.getIndex(8).brighten(0)
},
{
category: 'Second',
fromDate: '01.02.2022',
toDate: '01.05.2022',
fromDateReal: '01.01.2022',
toDateReal: '01.06.2022',
colorPlan: colorSet.getIndex(0).brighten(0),
colorReal: colorSet.getIndex(8).brighten(0)
}
]
var categoryAxisGantt = gantt.yAxes.push(new am4charts.CategoryAxis());
categoryAxisGantt.dataFields.category = "category";
categoryAxisGantt.renderer.grid.template.location = 0;
categoryAxisGantt.renderer.inversed = true;
var yLabelGantt = categoryAxisGantt.renderer.labels.template;
yLabelGantt.wrap = true;
yLabelGantt.maxWidth = 200;
var dateAxisGantt = gantt.xAxes.push(new am4charts.DateAxis());
dateAxisGantt.dateFormatter.dateFormat = "dd.MM.yyyy";
dateAxisGantt.renderer.minGridDistance = 70;
dateAxisGantt.min = (new Date(2022, 01, 01)).getTime();
dateAxisGantt.strictMinMax = true;
dateAxisGantt.renderer.tooltipLocation = 0;
var rangeGantt = dateAxisGantt.axisRanges.create();
rangeGantt.date = new Date();
rangeGantt.grid.stroke = am4core.color("red");
rangeGantt.grid.strokeWidth = 2;
rangeGantt.grid.strokeOpacity = 1;
function createGanttSeries(start, end, category, name, color){
var series1Gantt = gantt.series.push(new am4charts.ColumnSeries());
series1Gantt.columns.template.width = am4core.percent(80);
series1Gantt.columns.template.tooltipText = "{name}\n{category}: {openDateX} - {dateX}";
series1Gantt.dataFields.openDateX = start;
series1Gantt.dataFields.dateX = end;
series1Gantt.dataFields.categoryY = category;
series1Gantt.name = name
series1Gantt.columns.template.propertyFields.fill = color; // get color from data
series1Gantt.columns.template.propertyFields.stroke = color;
series1Gantt.columns.template.strokeOpacity = 1;
}
//план
createGanttSeries("fromDate", "toDate", "category", "План", "colorPlan");
//факт
createGanttSeries("fromDateReal", "toDateReal", "category", "Факт", "colorReal");
gantt.scrollbarX = new am4core.Scrollbar();
// Create chart instance
var chart = am4core.create("dds", am4charts.XYChart);
let title = chart.titles.create();
title.text = "ДДС";
title.fontSize = 25;
title.marginBottom = 30;
// Export
chart.exporting.menu = new am4core.ExportMenu();
chart.dateFormatter.inputDateFormat = "MM.dd.yyyy";
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.dateFormatter = new am4core.DateFormatter();
chart.dateFormatter.dateFormat = "MMMM yy";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var columnSeries = chart.series.push(new am4charts.ColumnSeries());
columnSeries.name = "ДДС (план)";
columnSeries.dataFields.valueY = "val";
columnSeries.dataFields.dateX = "date";
columnSeries.columns.template.tooltipText = "[#fff font-size: 15px]{name} {dateX}:\n[/][#fff font-size: 20px]{valueY}[/] [#fff]{additional}[/]"
columnSeries.columns.template.propertyFields.fillOpacity = "fillOpacity";
columnSeries.columns.template.propertyFields.stroke = "stroke";
columnSeries.columns.template.propertyFields.strokeWidth = "strokeWidth";
columnSeries.columns.template.propertyFields.strokeDasharray = "columnDash";
columnSeries.tooltip.label.textAlign = "middle";
chart.data = [
{
"date": "06.10.2022",
"val": 143566570.46,
"total": 143566570.46
},
{
"date": "09.25.2022",
"val": 35891642.62,
"total": 179458213.08
}
];
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#gantt {
width: 100%;
height: 500px;
}
#dds {
width: 100%;
height: 500px;
}
<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="gantt"></div>
<div id="dds"></div>

Amcharts V4 plating a chart in percent rather than absolute using valueYShow

I'm trying to create a chart using AMCharts V4. The values are given in absolute, and I want to have the chart in percentages: values, y-axis, etc.
The docs are here: https://www.amcharts.com/docs/v4/tutorials/plotting-series-from-calculated-values/
However, I'm having some trouble. Pls consider the following codepen forked from the official AMCharts documentation:
https://codepen.io/otmezger/pen/RwVzmjv
As the docs suggest, I have valueAxis.calculateTotals = true; enabled.
The line series.dataFields.valueYShow = "totalPercent"; or series.dataFields.valueYShow = "percent"; renders the graph useless.
only if I disable them, the graph will show in absolute numbers.
what am I missing? how can I make series.dataFields.valueYShow = "percent"; work?
If you want to use percent values in the series, you need to set calculatePercent to true on the series as explained here
series.calculatePercent = true;
series.dataFields.valueYShow = "percent";
series.tooltipText = "{dateX}: [b]{valueY.percent}[/]%";
Demo:
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"date": new Date(2018, 0, 1),
"value": 10
}, {
"date": new Date(2018, 0, 2),
"value": 15
}, {
"date": new Date(2018, 0, 3),
"value": 2
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.calculateTotals = true;
valueAxis.renderer.labels.template.adapter.add("text", function(text) {
return text + "%";
});
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.calculatePercent = true;
series.dataFields.valueYShow = "percent";
series.tooltipText = "{dateX}: [b]{valueY.percent}[/]%";
series.strokeWidth = 2;
var bullet = series.bullets.push(new am4charts.CircleBullet());
bullet.circle.stroke = am4core.color("#fff");
bullet.circle.strokeWidth = 2;
// Finish up setting chart up
chart.cursor = new am4charts.XYCursor();
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: 250px;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

How to set all items in a chart to have the same colour in am charts 4

I have a bar chart and i was wondering if there is a way to make all the graphics have the same colour:
https://codepen.io/conormdowney/pen/xmVRjd
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"category": "Research",
"value1": 450,
"value2": 1200,
"value3": 960,
"value4": 710,
"value5": 900
}, {
"category": "Marketing",
"value1": 1200,
"value2": 450,
"value3": 850,
"value4": 1250,
"value5": 950
}, {
"category": "Distribution",
"value1": 1850,
"value2": 1700,
"value3": 450,
"value4": 870,
"value5": 600
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
//categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
function createSeries(field) {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = field;
series.dataFields.categoryX = "category";
return series;
}
createSeries("value1");
createSeries("value2");
createSeries("value3");
createSeries("value4");
createSeries("value5");```
There are two methods:
The obvious method is to manually set each series color to be the same. You can pull from the chart's color list too, if you prefer, e.g.
series.columns.template.fill = chart.colors.getIndex(0);
series.columns.template.stroke = chart.colors.getIndex(0);
Alternatively, you can set reuse to true on the chart's colors object to have it only reuse colors from the list. Setting the list to a single color will essentially be the same as the lines from the first method:
chart.colors.reuse = true;
chart.colors.list = [
am4core.color("#845EC2")
];
As #xorsparks answer, but my bars were a variation of my one colour. I found that I had to set chart.colors.passOptions = {}; to stop that from happening.

amCharts 4: External Data Source - JSON Output from Database

Still trying to get to grips with amCharts 4 using external data sources, and this is a follow on from my previous question... amCharts 4: External Data Source
I've created a horizontal stacked chart using static data, which works fine (code snippet below).
However, when using the external data source on the same chart, I don't get same result, as the JSON output is different.
This is because the external database table columns and rows are the opposite way around (from the static data) and unfortunately can't be changed at source.
I've gone through the amCharts documentation and demo charts, and tried all sorts to achieve the same chart as the static data version with no success.
e.g. Tried the inversed opposite rotate properties, as well as reconfiguring the chart series and axes.
Maybe, the parseended event can be used to re-map the external data, but to be honest I don't know how.
I've come to a dead-end, and not sure how, or what is the correct (or best practice) method of doing this?
The code (and data structure) for each chart is shown below.
Any help would be very much appreciated. Thanks in advance.
STATIC DATA CHART (Correct)
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
var chartdata = [{
"Name": "Question 1 Shows Here",
"Yes Please": 75,
"Maybe": 45,
"No Thanks": 19
}, {
"Name": "Question 2 Shows Here",
"Yes Please": 35,
"Maybe": 43,
"No Thanks": 26
}, {
"Name": "Question 3 Shows Here",
"Yes Please": 57,
"Maybe": 24,
"No Thanks": 8
}];
chart.data = chartdata;
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.numberFormatter.numberFormat = "#";
valueAxis.min = 0;
valueAxis.transitionDuration = 200;
valueAxis.interpolationDuration = 200;
valueAxis.rangeChangeDuration = 200;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Yes Please";
series.dataFields.categoryY = "Name";
series.name = "Yes Please";
series.tooltipText = "{name}: [bold]{valueX}[/]";
series.stacked = true;
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueX = "Maybe";
series2.dataFields.categoryY = "Name";
series2.name = "Maybe";
series2.tooltipText = "{name}: [bold]{valueX}[/]";
series2.stacked = true;
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueX = "Don’t Know";
series3.dataFields.categoryY = "Name";
series3.name = "Don’t Know";
series3.tooltipText = "{name}: [bold]{valueX}[/]";
series3.stacked = true;
var series4 = chart.series.push(new am4charts.ColumnSeries());
series4.dataFields.valueX = "No Thanks";
series4.dataFields.categoryY = "Name";
series4.name = "No Thanks";
series4.tooltipText = "{name}: [bold]{valueX}[/]";
series4.stacked = true;
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomXY";
// Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 90%; height: 300px";></div>
EXTERNAL DATA CHART (Incorrect)
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
var chartdata = [{
"Name": "Yes Please",
"Question 1 Shows Here": 75,
"Question 2 Shows Here": 45,
"Question 3 Shows Here": 19
}, {
"Name": "Maybe",
"Branding and Logos Score": 367,
"Question 1 Shows Here": 35,
"Question 2 Shows Here": 43,
"Question 3 Shows Here": 26
}, {
"Name": "Don’t Know",
"Question 1 Shows Here": 42,
"Question 2 Shows Here": 31,
"Question 3 Shows Here": 12
}, {
"Name": "No Thanks",
"Question 1 Shows Here": 17,
"Question 2 Shows Here": 27,
"Question 3 Shows Here": 15
}];
chart.data = chartdata;
// Create category axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
// Create value axes
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.numberFormatter.numberFormat = "#";
valueAxis.min = 0;
valueAxis.transitionDuration = 200;
valueAxis.interpolationDuration = 200;
valueAxis.rangeChangeDuration = 200;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Question 1 Shows Here";
series.dataFields.categoryY = "Name";
series.name = "Question 1 Shows Here";
series.tooltipText = "{name}: [bold]{valueX}[/]";
series.stacked = true;
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueX = "Question 2 Shows Here";
series2.dataFields.categoryY = "Name";
series2.name = "Question 2 Shows Here";
series2.tooltipText = "{name}: [bold]{valueX}[/]";
series2.stacked = true;
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueX = "Question 3 Shows Here";
series3.dataFields.categoryY = "Name";
series3.name = "Question 3 Shows Here";
series3.tooltipText = "{name}: [bold]{valueX}[/]";
series3.stacked = true;
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomXY";
chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 90%; height: 300px";></div>
parseended is the way to go in this situation. You'll need to set up a lookup table for your questions and map them to objects containing the values mapped to each response, for example:
chart.dataSource.events.on("parseended", function(ev) {
var questionMap = {}; //lookup table to map questions to data elements
ev.target.data.forEach(function(item) {
Object.keys(item).forEach(function(key) {
if (key.indexOf('Name') == -1) { //act on non-response keys
if (!questionMap[key]) {
questionMap[key] = {"Name": key}; //create an object containing the name/question pair if it doesn't exist
}
questionMap[key][item.Name] = item[key]; // assign response+value to the object (e.g. "Yes, Please": 75)
}
});
});
//remap lookup table as array
ev.target.data = Object.keys(questionMap).map(function(question) {
return questionMap[question];
});
});
Demo below:
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.dataSource.url = dataURI(); //fake URL for demonstration purposes
chart.dataSource.events.on("parseended", function(ev) {
var questionMap = {}; //lookup table to map questions to data elements
ev.target.data.forEach(function(item) {
Object.keys(item).forEach(function(key) {
if (key.indexOf('Name') == -1) { //act on non-response keys
if (!questionMap[key]) {
questionMap[key] = {
"Name": key
}; //create an object containing the name/question pair if it doesn't exist
}
questionMap[key][item.Name] = item[key]; // assign response+value to the object (e.g. "Yes, Please": 75)
}
});
});
//remap lookup table as array
ev.target.data = Object.keys(questionMap).map(function(question) {
return questionMap[question];
});
});
// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "Name";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.numberFormatter.numberFormat = "#";
valueAxis.min = 0;
valueAxis.transitionDuration = 200;
valueAxis.interpolationDuration = 200;
valueAxis.rangeChangeDuration = 200;
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "Yes Please";
series.dataFields.categoryY = "Name";
series.name = "Yes Please";
series.tooltipText = "{name}: [bold]{valueX}[/]";
series.stacked = true;
var series2 = chart.series.push(new am4charts.ColumnSeries());
series2.dataFields.valueX = "Maybe";
series2.dataFields.categoryY = "Name";
series2.name = "Maybe";
series2.tooltipText = "{name}: [bold]{valueX}[/]";
series2.stacked = true;
var series3 = chart.series.push(new am4charts.ColumnSeries());
series3.dataFields.valueX = "Don’t Know";
series3.dataFields.categoryY = "Name";
series3.name = "Don’t Know";
series3.tooltipText = "{name}: [bold]{valueX}[/]";
series3.stacked = true;
var series4 = chart.series.push(new am4charts.ColumnSeries());
series4.dataFields.valueX = "No Thanks";
series4.dataFields.categoryY = "Name";
series4.name = "No Thanks";
series4.tooltipText = "{name}: [bold]{valueX}[/]";
series4.stacked = true;
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomXY";
// Add legend
chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";
function dataURI() {
return "data:application/json;base64,W3sKICAiTmFtZSI6ICJZZXMgUGxlYXNlIiwKICAiUXVlc3Rpb24gMSBTaG93cyBIZXJlIjogNzUsCiAgIlF1ZXN0aW9uIDIgU2hvd3MgSGVyZSI6IDQ1LAogICJRdWVzdGlvbiAzIFNob3dzIEhlcmUiOiAxOQp9LCB7CiAgIk5hbWUiOiAiTWF5YmUiLAogICJCcmFuZGluZyBhbmQgTG9nb3MgU2NvcmUiOiAzNjcsCiAgIlF1ZXN0aW9uIDEgU2hvd3MgSGVyZSI6IDM1LAogICJRdWVzdGlvbiAyIFNob3dzIEhlcmUiOiA0MywKICAiUXVlc3Rpb24gMyBTaG93cyBIZXJlIjogMjYKfSwgewogICJOYW1lIjogIkRvbuKAmXQgS25vdyIsCiAgIlF1ZXN0aW9uIDEgU2hvd3MgSGVyZSI6IDQyLAogICJRdWVzdGlvbiAyIFNob3dzIEhlcmUiOiAzMSwKICAiUXVlc3Rpb24gMyBTaG93cyBIZXJlIjogMTIKfSwgewogICJOYW1lIjogIk5vIFRoYW5rcyIsCiAgIlF1ZXN0aW9uIDEgU2hvd3MgSGVyZSI6IDE3LAogICJRdWVzdGlvbiAyIFNob3dzIEhlcmUiOiAyNywKICAiUXVlc3Rpb24gMyBTaG93cyBIZXJlIjogMTUKfV0=";
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv" style="width: 90%; height: 300px" ;></div>

amchart indicator loading not stopping even chart is appear

im try using Amchart plugin into my system. Chart successful appear when i run basic code for chart. Then im try to use a custom for loading indicator. But the problem is indicator for loading not stopping even chart is appear.
Below is the JS script
am4core.useTheme(am4themes_animated);
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"category": "Research",
"value": 450
}, {
"category": "Marketing",
"value": 1200
}, {
"category": "Distribution",
"value": 1850
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.grid.template.location = 0;
//categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "value";
series.dataFields.categoryX = "category";
var indicator;
var indicatorInterval;
function showIndicator() {
if (!indicator) {
indicator = chart.tooltipContainer.createChild(am4core.Container);
indicator.background.fill = am4core.color("#fff");
indicator.width = am4core.percent(100);
indicator.height = am4core.percent(100);
var indicatorLabel = indicator.createChild(am4core.Label);
indicatorLabel.text = "Loading stuff...";
indicatorLabel.align = "center";
indicatorLabel.valign = "middle";
indicatorLabel.dy = 50;
var hourglass = indicator.createChild(am4core.Image);
hourglass.href = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/hourglass.svg";
hourglass.align = "center";
hourglass.valign = "middle";
hourglass.horizontalCenter = "middle";
hourglass.verticalCenter = "middle";
hourglass.scale = 0.7;
}
indicator.hide(0);
indicator.show();
clearInterval(indicatorInterval);
indicatorInterval = setInterval(function() {
hourglass.animate([{
from: 0,
to: 360,
property: "rotation"
}], 2000);
}, 3000);
}
function hideIndicator() {
indicator.hide();
clearInterval(indicatorInterval);
}
showIndicator();
Below is the html code
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>
im already try a few method, but no lucky for me. Any suggestion
On amchart4 documentation (https://www.amcharts.com/docs/v4/tutorials/custom-loading-indicator/), it only shows how you can create a custom loading indicator. It doesn't hook up hideIndicator() event when the chart is finished rendering.
There is a Ready event you can use now (https://github.com/amcharts/amcharts4/issues/436#issuecomment-441370242). You can just simply hook up hideIndicator() function to the Ready event:
...
chart.events.on("ready", function(ev){
hideIndicator();
});
...
fiddle: https://jsfiddle.net/davidliang2008/akpe5f4b/1/

Resources