amCharts Balloon: Is there a way to consolidate all the data into one balloon?

1
votes

Edit: I am using v2 of JavaScript Stock Chart

I have got another question concerning amCharts. I am trying to consolidate all my data into one balloon. I am aware of this guide:

http://www.amcharts.com/tutorials/showing-only-one-balloon-for-all-graphs/

... but it did not work for me. It seems my code only allows one HTML <br>

As soon as I put more of them into my code like so:

graph.balloonText = “graph1:[[value1]]<br>graph2:[[value2]]<br>graph3:[[value3]]”;

it looks like this: IMAGE HERE

This is not what I obviously want. My final goal is to have ONE balloon only.

graph = new AmCharts.AmGraph();
graph.valueAxis = valueAxis3;
graph.balloonText = "graph1:[[pages]]<br>graph2:[[ctr]]<br>graph3:[[impressions]]";
//graph.balloonText = "Click Through Rate: [[ctr]]%";
graph.title = "CTR";
graph.valueField = "ctr";
graph.type = "line";
graph.lineAlpha = 1;
graph.lineThickness = 2;
graph.lineColor = "#fabf3a";
graph.fillAlphas = 0;
graph.hidden = false;
chart.addGraph(graph);

Please help me

1
htmlchartsamcharts
What version of the JavaScript Charts are you running? – martynasma
Just an idea. Try adding a space after each <br>. The line-wrapping algorithm might think this is one long string. – martynasma
@martynasma I am using v2 – Spacemoose
@martynasma I had already tried the spaces. It does not fix the issue. Only the first <br> is recognised. – Spacemoose
I don't think V2 supports HTML balloons. You should really consider upgrading to V3. – martynasma

1 Answers

0
votes

I found out after some research how this works. AmCharts does not inherently offer this functionality. I had to write my own JS code for it.

chart.addListener("init", function () {
  function formatGraph(url, data) {
    return "<p style='text-align: left;'>" +
           "<img src='" + url + "' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'>" +
           "<span style='font-size:14px; color:#000000;'>" +
           "<b>" + data + "</b>" +
           "</span>" +
           "</p>"
  }

  function balloonFunction(info) {
    var data = info.dataContext;
    var graphs = chart.graphs;

    return (graphs[0].hidden
             ? ""
             : formatGraph("http://www.amcharts.com/lib/3/images/car.png", data.cars)) +
           (graphs[1].hidden
             ? ""
             : formatGraph("http://www.amcharts.com/lib/3/images/motorcycle.png", data.motorcycles)) +
           (graphs[2].hidden
             ? ""
             : formatGraph("http://www.amcharts.com/lib/3/images/bicycle.png", data.bicycles));
  }

  function showBalloon() {
    var seen = false;
    var graphs = chart.graphs;

    for (var i = 0; i < graphs.length; ++i) {
      var graph = graphs[i];

      graph.balloonFunction = balloonFunction;

      if (!graph.hidden && !seen) {
        seen = true;
        delete graph.balloonText;

      } else {
        graph.balloonText = "";
      }
    }

    chart.validateNow();
  }

  showBalloon();

  chart.legend.addListener("hideItem", function () {
    showBalloon();
  });

  chart.legend.addListener("showItem", function () {
    showBalloon();
  });