AmCharts balloon tooltip

Question

How can I advertise an AmCharts balloon? It's impossible?

How to add a tooltip to an arrow showing a percentage value?

Copied markup from AmChart documents. But it seems to work only with regular charts, not with sensors.

http://docs.amcharts.com/3/javascriptcharts/AmBalloon http://docs.amcharts.com/3/javascriptcharts/AmAngularGauge

http://jsfiddle.net/shL0g1rc/2/

Code example

var chart = AmCharts.makeChart("chartdiv", { "type": "gauge", "arrows": [ { "value": 130 } ], "titles": [ { "text": "Speedometer", "size": 15 } ], "axes": [ { "bottomText": "0 km/h", "endValue": 220, "valueInterval": 10, "bands": [ { "color": "#00CC00", "endValue": 90, "startValue": 0 }, { "color": "#ffac29", "endValue": 130, "startValue": 90 }, { "color": "#ea3838", "endValue": 220, "startValue": 130, "innerRadius": "95%" } ] } ], "balloon": { "adjustBorderColor": true, "color": "#000000", "cornerRadius": 5, "fillColor": "#FFFFFF" } }); 

Answer 1

You can use balloonText on your oscillation range to display a balloon.

You can also use the "rendered" event to dynamically update balloonText to display arrow values.

 var chart = AmCharts.makeChart("chartdiv", { "type": "gauge", "arrows": [ { "value": 130, "title": "Speed" } ], "titles": [ { "text": "Speedometer", "size": 15 } ], "axes": [ { "bottomText": "0 km/h", "endValue": 220, "valueInterval": 10, "bands": [ { "color": "#00CC00", "endValue": 90, "startValue": 0, "balloonText": "Good" }, { "color": "#ffac29", "endValue": 130, "startValue": 90, "balloonText": "Careful" }, { "color": "#ea3838", "endValue": 220, "startValue": 130, "innerRadius": "95%", "balloonText": "Too Fast!" } ] } ], "balloon": { "adjustBorderColor": true, "color": "#000000", "cornerRadius": 5, "fillColor": "#FFFFFF" }, "listeners": [{ "event": "rendered", "method": function(event) { var chart = event.chart; var text = ""; for(var i = 0; i < chart.arrows.length; i++) { var arrow = chart.arrows[i]; text += arrow.title + ": " + arrow.value + "<br />"; } for(var i = 0; i < chart.axes[0].bands.length; i++) { chart.axes[0].bands[i].balloonText = text; } } }] }); 

 #chartdiv { width: 100%; height: 500px; } 

 <script src="http://www.amcharts.com/lib/3/amcharts.js"></script> <script src="http://www.amcharts.com/lib/3/gauge.js"></script> <div id="chartdiv"></div>