Coloring XY chart bubbles based on their value
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/xy.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
// add custom handler that fires before the chart is drawn
// the second parameter is means that it is applicable to XY chart only
AmCharts.addInitHandler(function (chart) {
// cycle through all data points and assign color per Y value
for(var x in chart.dataProvider) {
var dp = chart.dataProvider[x];
if (dp.y > 10)
dp.color = "#ff0000";
else if (dp.y > -5)
dp.color = "#fff000";
else
dp.color = "#00ff00";
}
}, ['xy']);
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"theme": "none",
"dataProvider": [{
"y": 10,
"x": 14,
"value": 59,
"Title" :"Hello"
}, {
"y": 5,
"x": 3,
"value": 50,
"Title" :"Oh No"
}, {
"y": -10,
"x": 8,
"value": 19,
}],
"valueAxes": [{
"position":"bottom",
"axisAlpha": 0
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left"
}],
"startDuration": 1.5,
"graphs": [{
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[Title]]</b>",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"colorField": "color",
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}],
"legend": {
"position": "bottom",
"markerType": "circle",
"data" : [{"Title" :"Hello","color":"#00ff00"},{"Title":"ONo","color":"#00ff00"}],
"legend": {
"position": "bottom",
"markerType": "circle",
"data" : [{"Title" :"Hello","color":"#00ff00"},{"Title":"ONo","color":"#00ff00"}],
"listeners": [{
"event": "hideItem",
"method":...