Highlight a single bar on click in amcharts - javascript

I have a bar chart from amcharts. I need to highlight a single bar on click on bar. Current scenario is when I click multiple bar, all bars highlighted.
Here is my code
"listeners": [{
"event": "clickGraphItem",
"method": function(event) {
var node = event.item.columnGraphics.node.lastChild;
node.setAttribute("stroke","#8198b4");
node.setAttribute("fill","#8198b4");
}
}]
Any help? Thank You.

Instead of modifying the node, use fillColorsField instead, which allows you to set/unset the currently selected column's highlight and allows you to go through the rest of the chart's data to make sure only one item is selected.
"graphs": [{
// ...
"fillColorsField": "selected"
}],
"zoomOutOnDataUpdate": false, //recommended so that the chart doesn't reset the current zoom after clicking on a column
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
//if the current item is already selected, deselect it
if (e.item.dataContext.selected) {
e.item.dataContext.selected = undefined;
}
else {
//otherwise, find any other columns that were selected and deselect them
for (var i = 0; i < e.chart.dataProvider.length; ++i) {
if (e.chart.dataProvider[i].selected) {
e.chart.dataProvider[i].selected = undefined;
break;
}
}
e.item.dataContext.selected = "#8198b4";
}
e.chart.validateData(); //update chart
}
}]
Demo below:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"country": "Brazil",
"visits": 395
}],
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits",
"fillColorsField": "selected"
}],
"categoryField": "country",
"zoomOutOnDataUpdate": false, //recommended so that the chart doesn't reset the current zoom after clicking on a column
"listeners": [{
"event": "clickGraphItem",
"method": function(e) {
//if the current item is already selected, deselect it
if (e.item.dataContext.selected) {
e.item.dataContext.selected = undefined;
}
else {
//otherwise, find any other columns that were selected and deselect them
for (var i = 0; i < e.chart.dataProvider.length; ++i) {
if (e.chart.dataProvider[i].selected) {
e.chart.dataProvider[i].selected = undefined;
break;
}
}
e.item.dataContext.selected = "#8198b4";
}
e.chart.validateData(); //update chart
}
}]
});
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>

Related

AmCharts 3 - Remove Listener on first run (reference function inside itself)

I would like to know how to add a listener that only runs once, I believe in the end this is mostly a generic javascript question, but I might be missing something.
Here's what I have :
const listener = chart.addListener('rendered', () => {
console.log('Chart rendered! This should only print once!');
doSomethingToChart(chart);
chart.removeListener(chart, 'rendered', listener);
})
The problem here is, is not removing the listener, the console.log is printing on each render. How can I fix this?
addListener doesn't have a return value at all, nor makes any mention of one in the documentation, which is why your code doesn't work. Just store the function reference separately before you add the listner, then call removeListener on that reference and it will work, for example:
let counter = 0;
const listener = () => {
console.log('dataUpdated called', counter += 1);
};
chart.addListener('dataUpdated', listener);
let timer = setInterval(() => {
chart.validateData(); //triggers dataUpdated
if (counter == 3) {
chart.removeListener(chart, 'dataUpdated', listener);
console.log('dataUpdated removed')
chart.validateData(); //one more call to confirm that the listner no longer runs
clearInterval(timer);
}
}, 1500);
Demo:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"country": "USA",
"visits": 2025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}, {
"country": "Brazil",
"visits": 395
}],
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"categoryField": "country"
}, 100);
let counter = 0;
const listener = () => {
console.log('dataUpdated called', counter += 1);
};
chart.addListener('dataUpdated', listener);
let timer = setInterval(() => {
chart.validateData(); //this triggers dataUpdated
if (counter == 3) {
chart.removeListener(chart, 'dataUpdated', listener);
console.log('dataUpdated removed')
chart.validateData(); //confirm that listner isn't called anymore
clearInterval(timer);
}
}, 1500);
html,
body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
Just use use the listener like this:
const listener = () => {
console.log('Chart rendered! This should only print once!');
// ...
chart.removeListener(chart, 'rendered', listener);
};
chart.addListener('rendered', listener);
Here is a codepen showing the behavior.
Alternatively you can use an external variable to save the state:
let executedOnce = false;
chart.addListener('rendered', () => {
if (executedOnce) {
return;
}
executedOnce = true;
console.log('Chart rendered! This should only print once!');
// ...
});
Beside that I would recommend switching to amcharts4, because it is much more flexible and has even new chart types. You can migrate easily, beginning with just one chart. You can use amcharts3 and amcharts4 in parallel (Migration Guide).
In amcharts4 you can subscribe once to an event (docs):
chart.events.once('datavalidated' => {
// ...
});

Error Loading another script in the JS File

I am trying to create chart in my widget. I am using AM Charts for this purpose.
I am having a script file(.js) in which I am unable to load the AM Charts. The scripts are getting loaded but I am getting the error "AmCharts is not defined".
My Widget Code:
(function () {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
jQuery = window.jQuery.noConflict(true);
main();
}
/******** Our main function ********/
function main() {
var LanguageVal = 1;
jQuery(document).ready(function ($) {
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "Content/css/DailyPrices.css"
});
css_link.appendTo('head');
var css_link1 = $("<link>", {
rel: "stylesheet",
type: "text/css",
media:"all",
href: "https://www.amcharts.com/lib/3/plugins/export/export.css"
});
css_link1.appendTo('head');
var css_link2 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/amcharts.js",
});
css_link2.appendTo('head');
var css_link3 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/serial.js",
});
css_link3.appendTo('head');
var css_link4 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/plugins/export/export.min.js",
});
css_link4.appendTo('head');
var css_link5 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/themes/light.js",
});
css_link5.appendTo('head');
$.ajax({
url: "http://localhost:44360/api/TodayPrice/DailyPrice",
data: { Language: LanguageVal },
success: function (result) {
var list1 = result.data;
var list2 = result.HeaderLst;
var TodayDieselPrice = list1[0].TodayDieselPrice;
var TodayPetrolPrice = list1[0].TodayPetrolPrice;
var YesterdayDieselPrice = list1[0].YesterdayDieselPrice;
var YesterdayPetrolPrice = list1[0].YesterdayPetrolPrice;
var PetrolText = list1[0].PetrolText;
var DieselText = list1[0].DieselText;
var PetrolIconColor = list1[0].PetrolIconColor;
var DieselIconColor = list1[0].DieselIconColor;
var FirstHeader = list2[0].FirstHeader;
var SecondHeader = list2[0].SecondHeader;
var ThirdHeader = list2[0].ThirdHeader;
var FourthHeader = list2[0].FourthHeader;
var FifthHeader = list2[0].FifthHeader;
var LastHeader = list2[0].LastHeader;
$("#example-widget-container").append('<div class="WholeDiv row"><div class="col-md-12 firstrow"><div style="float:left;padding:8px">'+FirstHeader+'</div><div style="float:right"><img src="Content/images/Petrol-pump-icon.png"/></div></div>'+
'<div class="col-md-12 secondrow"><div class="col-md-3">'+SecondHeader+'</div><div class="col-md-4">'+ThirdHeader+'</div><div class="col-md-2"></div><div class="col-md-3">'+FourthHeader+'</div></div><div class="col-md-12 thirdrow"><div class="col-md-3">'+PetrolText+'</div><div class="col-md-4">'+YesterdayPetrolPrice+'</div><div class="col-md-2"><div class="PIconColor"></div></div><div class="col-md-3">'+TodayPetrolPrice+'</div></div>'+
'<div class="col-md-12 fourthrow"><div class="col-md-3">'+DieselText+'</div><div class="col-md-4">'+YesterdayDieselPrice+'</div><div class="col-md-2"><div class="DIconColor"></div></div><div class="col-md-3">'+TodayDieselPrice+'</div></div><div class="col-md-12 fifthrow"> <div style="float:left"><a>'+FifthHeader+'</a></div> <div style="float:right" class="sponsorDiv"><div class="sponsorTextDiv">Powered By ICICI</div></div></div></div>');
$("#example-widget-container").append('<div id="chartdiv"></div>');
if (PetrolIconColor == "Red") {
$('.PIconColor').addClass('arrow-up');
}
else
{
$('.PIconColor').addClass('arrow-down');
}
if (DieselIconColor == "Red") {
$('.DIconColor').addClass('arrow-up');
}
else {
$('.DIconColor').addClass('arrow-down');
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError);
}
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
});
}
})(); // We call our anonymous function immediately
HTML Code:
<div id="example-widget-container"></div>
Try following order atleast AmCharts issue seems to be resolved
function loadChart() {
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 70,
"dataProvider": [{
"country": "USA",
"visits": 3025,
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left",
"title": "Visitors from country"
}],
"startDuration": 1,
"graphs": [{
"balloonText": "<b>[[category]]: [[value]]</b>",
"fillColorsField": "color",
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 45
},
"export": {
"enabled": true
}
});
}
(function () {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type", "text/javascript");
script_tag.setAttribute("src",
"https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "Content/css/DailyPrices.css"
});
css_link.appendTo('head');
var css_link1 = $("<link>", {
rel: "stylesheet",
type: "text/css",
media:"all",
href: "https://www.amcharts.com/lib/3/plugins/export/export.css"
});
css_link1.appendTo('head');
var css_link2 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/amcharts.js",
});
css_link2.appendTo('head');
var css_link3 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/serial.js",
});
css_link3.appendTo('head');
if (script_tag.readyState) {
script_tag.onreadystatechange = function () { // For old versions of IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
} else {
script_tag.onload = scriptLoadHandler;
}
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}
else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
setTimeout(function(){
// wait for amchart to load
var css_link4 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/plugins/export/export.min.js",
});
css_link4.appendTo('head');
jQuery = window.jQuery.noConflict(true);
var css_link5 = $("<script>", {
type: "text/javascript",
src: "https://www.amcharts.com/lib/3/themes/light.js",
});
css_link5.appendTo('head');
main();
}, 1000);
}
/******** Our main function ********/
function main() {
var LanguageVal = 1;
jQuery(document).ready(function ($) {
$.ajax({
url: "http://localhost:44360/api/TodayPrice/DailyPrice",
data: { Language: LanguageVal },
success: function (result) {
var list1 = result.data;
var list2 = result.HeaderLst;
var TodayDieselPrice = list1[0].TodayDieselPrice;
var TodayPetrolPrice = list1[0].TodayPetrolPrice;
var YesterdayDieselPrice = list1[0].YesterdayDieselPrice;
var YesterdayPetrolPrice = list1[0].YesterdayPetrolPrice;
var PetrolText = list1[0].PetrolText;
var DieselText = list1[0].DieselText;
var PetrolIconColor = list1[0].PetrolIconColor;
var DieselIconColor = list1[0].DieselIconColor;
var FirstHeader = list2[0].FirstHeader;
var SecondHeader = list2[0].SecondHeader;
var ThirdHeader = list2[0].ThirdHeader;
var FourthHeader = list2[0].FourthHeader;
var FifthHeader = list2[0].FifthHeader;
var LastHeader = list2[0].LastHeader;
$("#example-widget-container").append('<div class="WholeDiv row"><div class="col-md-12 firstrow"><div style="float:left;padding:8px">'+FirstHeader+'</div><div style="float:right"><img src="Content/images/Petrol-pump-icon.png"/></div></div>'+
'<div class="col-md-12 secondrow"><div class="col-md-3">'+SecondHeader+'</div><div class="col-md-4">'+ThirdHeader+'</div><div class="col-md-2"></div><div class="col-md-3">'+FourthHeader+'</div></div><div class="col-md-12 thirdrow"><div class="col-md-3">'+PetrolText+'</div><div class="col-md-4">'+YesterdayPetrolPrice+'</div><div class="col-md-2"><div class="PIconColor"></div></div><div class="col-md-3">'+TodayPetrolPrice+'</div></div>'+
'<div class="col-md-12 fourthrow"><div class="col-md-3">'+DieselText+'</div><div class="col-md-4">'+YesterdayDieselPrice+'</div><div class="col-md-2"><div class="DIconColor"></div></div><div class="col-md-3">'+TodayDieselPrice+'</div></div><div class="col-md-12 fifthrow"> <div style="float:left"><a>'+FifthHeader+'</a></div> <div style="float:right" class="sponsorDiv"><div class="sponsorTextDiv">Powered By ICICI</div></div></div></div>');
$("#example-widget-container").append('<div id="chartdiv"></div>');
if (PetrolIconColor == "Red") {
$('.PIconColor').addClass('arrow-up');
}
else
{
$('.PIconColor').addClass('arrow-down');
}
if (DieselIconColor == "Red") {
$('.DIconColor').addClass('arrow-up');
}
else {
$('.DIconColor').addClass('arrow-down');
}
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(thrownError);
}
});
loadChart();
});
}
})();

Highcharts 5 - Radar Charts with circle round the outside

I'm using Highcharts 5 in styled mode, when I create a radar chart in this mode I get a circle around the outside of the chart.
Styled Mode Example
<script src="https://code.highcharts.com/js/highcharts.js"></script>
<script src="https://code.highcharts.com/js/highcharts-more.js"></script>
<script src="https://code.highcharts.com/js/modules/exporting.js"></script>
<link rel="stylesheet" href="http://code.highcharts.com/css/highcharts.css">
<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
$(function() {
Highcharts.chart('container', {
"chart": {
"polar": true,
},
"exporting": {
"enabled": true,
"filename": "bar",
"url": "http://export.highcharts.com",
"chartOptions": {
"chart": {
"backgroundColor": "white"
}
}
},
"plotOptions": {
"pie": {
"dataLabels": {
"enabled": true
}
}
},
"series": [{
"data": [
[1379790000],
[1330780000],
[324897000],
[260581000],
[206927000],
[194772000],
[86987000],
[161401000],
[146727405],
[126693000]
],
"id": "series-7"
}],
"xAxis": {
"categories": ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"],
"title": {},
"labels": {
"rotation": 0,
"enabled": true
},
"lineWidth": 0,
"tickmarkPlacement": "on"
},
"yAxis": {
"title": {},
"gridLineInterpolation": "polygon",
"lineWidth": 0
},
"title": {
"text": "Population of Countries"
},
"subtitle": {
"text": "Bar Chart"
},
"loading": false
});
});
http://jsfiddle.net/8pv79gy9/
However if I run the same configuration in the normal mode used by Highcharts previously I don't get the circle round the outside.
http://jsfiddle.net/fex0hnoy/
Any suggestions or solution welcome, this maybe a Highcharts 5 issue.
In a styled mode lineWidth property is replaced by css stroke-width.
If you want to set axis line width to 0, then you have to use css for axis line class (by default it is 1)
.highcharts-xaxis .highcharts-axis-line {
stroke-width: 0;
}
example: http://jsfiddle.net/8pv79gy9/1/
Or can use yaxis as Circle:
"yAxis": {
"title": {},
"gridLineInterpolation": "circle",
"lineWidth": 0
},
http://jsfiddle.net/8pv79gy9/2/

How to change amcharts pie themes?

My HTML code is like this :
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
My Javascript code is like this :
var chart;
var legend;
var chartData = [
{
"country": "Czech Republic",
"litres": 301.9
},
{
"country": "Ireland",
"litres": 201.1
},
{
"country": "Germany",
"litres": 165.8
},
{
"country": "Australia",
"litres": 139.9
},
{
"country": "Austria",
"litres": 128.3
},
{
"country": "UK",
"litres": 99
},
{
"country": "Belgium",
"litres": 60
}
];
console.log(chartData);
AmCharts.ready(function () {
// PIE CHART
chart = new AmCharts.AmPieChart();
chart.dataProvider = chartData;
chart.titleField = "country";
chart.valueField = "litres";
// WRITE
chart.write("chartdiv");
});
Demo and complete code is like this : https://jsfiddle.net/oscar11/4qdan7k7/2/
I want to change amchart themes like this : https://www.amcharts.com/demos/simple-pie-chart/
I add light.js library, but the themes not change
Any solution to solve my problem?
You need to specify the theme option while initializing as below and also make use of makeChart directly instead of Amcharts.AmPieChart(). Your updated code would be:
AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": chartData,
"valueField": "litres",
"titleField": "country",
"export": {
"enabled": true
}
});
UPDATED FIDDLE

amcharts serial Column With Rotated Series color array not working

I have some issues with serial chart (Column With Rotated Series).
My dataProvider does not have a color field. I used the colors option with an array of colors, but it still does not work.
Please help me.
http://jsfiddle.net/bfbgz0sc/1/
zeroin thank for your response ,
amCharts Help & Support said to me , each color within the array is reserved for every individual graph.
Unfortunately rather than defining all colors within the dataprovider is no other ways to do it.
Code Snippet:
//input data
var input=[{
"country": "USA",
"visits": 3025
}, {
"country": "China",
"visits": 1882
}, {
"country": "Japan",
"visits": 1809
}, {
"country": "Germany",
"visits": 1322
}, {
"country": "UK",
"visits": 1122
}, {
"country": "France",
"visits": 1114
}, {
"country": "India",
"visits": 984
}, {
"country": "Spain",
"visits": 711
}, {
"country": "Netherlands",
"visits": 665
}, {
"country": "Russia",
"visits": 580
}, {
"country": "South Korea",
"visits": 443
}, {
"country": "Canada",
"visits": 441
}];
//your custom colors
var colors= ['#FF6600', '#FCD202', '#B0DE09', '#0D8ECF', '#2A0CD0', '#CD0D74', '#CC0000', '#00CC00', '#0000CC', '#DDDDDD', '#999999', '#333333', '#990000']
//inject color attribute with value
for (i = 0; i < input.length; i++) {input[i].color = colors[i];}
//amCharts initialization code goes here
...
...
Output
Checkout this JSFiddle to see the solution in action:
http://jsfiddle.net/bfbgz0sc/4/
Colors property works only for separate graphs, not for data items. So you should add colors to dataProvider.

Categories