AmCharts Gauge Balloon Tooltip

4
votes

How can I ad an balloon to an AmCharts Gauge? Is this not possible?

How can I add an balloon tooltip to the arrow showing the value in percent?

Copied the markup from AmChart docs. But only seems to work with regular charts and not gauges.

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

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

Code Sample

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"
  }
});
1
javascripthtmlgraphchartsamcharts

1 Answers

5
votes

You can use balloonText on your gauge band to display the balloon.

You can also use "rendered" event, to dynamically update balloonText so it reflects the 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>