On hover, multiple nested donut charts not showing balloon text- amcharts

0
votes

Multiple nested donut charts on the same page not working properly. I have two nested donut charts. One is showing ball0on text and another one is not. If I have 4 charts in first nested donut and two charts in second nested donut chart, balloon text will appear for last two outer charts in first and for both inner charts of the second donut.

Reference : Simulating nested donut chart using multiple pie chart instances

"Plugin: Manipulate z-index of the chart" is also there.

JSFIDDLE : PROBLEM STATEMENT

Hover on first nested donut chart inner pie charts, then hover on pie charts of second nested donut chart.

I didn't get any helpful data here : Documentation.

How to make balloon appear for all charts?

/**
 * Plugin: Manipulate z-index of the chart
 */
AmCharts.addInitHandler(function(chart) {

  // init holder for nested charts
  if (AmCharts.nestedChartHolder === undefined)
    AmCharts.nestedChartHolder = {};

  if (chart.bringToFront === true) {
    chart.addListener("init", function(event) {
      // chart inited
      var chart = event.chart;
      var div = chart.div;
      var parent = div.parentNode;

      // add to holder
      if (AmCharts.nestedChartHolder[parent] === undefined)
        AmCharts.nestedChartHolder[parent] = [];
      AmCharts.nestedChartHolder[parent].push(chart);

      // add mouse mouve event
      chart.div.addEventListener('mousemove', function() {

        // calculate current radius
        var x = Math.abs(chart.mouseX - (chart.realWidth / 2));
        var y = Math.abs(chart.mouseY - (chart.realHeight / 2));
        var r = Math.sqrt(x * x + y * y);

        // check which chart smallest chart still matches this radius
        var smallChart;
        var smallRadius;
        for (var i = 0; i < AmCharts.nestedChartHolder[parent].length; i++) {
          var checkChart = AmCharts.nestedChartHolder[parent][i];

          if ((checkChart.radiusReal < r) || (smallRadius < checkChart.radiusReal)) {
            checkChart.div.style.zIndex = 1;
          } else {
            if (smallChart !== undefined)
              smallChart.div.style.zIndex = 1;
            checkChart.div.style.zIndex = 2;
            smallChart = checkChart;
            smallRadius = checkChart.radiusReal;
          }

        }
      }, false);
    });
  }

}, ["pie"]);

/**
 * Create the charts
 */
var pie1 = AmCharts.makeChart("chart1", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "$",
    "value": 100,
    "color": "#090E0F"
  }],
  "startDuration": 0,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 14,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -25,
  "labelColor": "#fff",
  "radius": 25,
  "innerRadius": 0,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]"
});

var pie2 = AmCharts.makeChart("chart2", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "Marketing",
    "value": 33,
    "color": "#BA3233"
  }, {
    "title": "Production",
    "value": 33,
    "color": "#624B6A"
  }, {
    "title": "R&D",
    "value": 33,
    "color": "#6179C0"
  }],
  "startDuration": 1,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 9,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -28,
  "labelColor": "#fff",
  "radius": 80,
  "innerRadius": 27,
  "outlineAlpha": 1,
  "outlineThickness": 4,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]"
});

var pie3 = AmCharts.makeChart("chart3", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "Online",
    "value": 11,
    "color": "#BA3233"
  }, {
    "title": "Print",
    "value": 11,
    "color": "#BA3233"
  }, {
    "title": "Other",
    "value": 11,
    "color": "#BA3233"
  }, {
    "title": "Equipment",
    "value": 16.5,
    "color": "#624B6A"
  }, {
    "title": "Materials",
    "value": 16.5,
    "color": "#624B6A"
  }, {
    "title": "Labs",
    "value": 16.5,
    "color": "#6179C0"
  }, {
    "title": "Patents",
    "value": 16.5,
    "color": "#6179C0"
  }],
  "startDuration": 1,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 8,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -27,
  "labelColor": "#fff",
  "radius": 135,
  "innerRadius": 82,
  "outlineAlpha": 1,
  "outlineThickness": 4,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]"
});

var pi4 = AmCharts.makeChart("chart4", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "Design",
    "value": 5.5,
    "color": "#BA3233"
  }, {
    "title": "P&P",
    "value": 5.5,
    "color": "#BA3233"
  }, {
    "title": "Magazines",
    "value": 11,
    "color": "#BA3233"
  }, {
    "title": "Outdoor",
    "value": 3.66,
    "color": "#BA3233"
  }, {
    "title": "Promo",
    "value": 3.66,
    "color": "#BA3233"
  }, {
    "title": "Endorsement",
    "value": 3.66,
    "color": "#BA3233"
  }, {
    "title": "Maintenance",
    "value": 8.25,
    "color": "#624B6A"
  }, {
    "title": "Acquisition",
    "value": 8.25,
    "color": "#624B6A"
  }, {
    "title": "Raw",
    "value": 5.5,
    "color": "#624B6A"
  }, {
    "title": "Recycling",
    "value": 5.5,
    "color": "#624B6A"
  }, {
    "title": "Logistics",
    "value": 5.5,
    "color": "#624B6A"
  }, {
    "title": "LAB1",
    "value": 3.3,
    "color": "#6179C0"
  }, {
    "title": "LAB2",
    "value": 3.3,
    "color": "#6179C0"
  }, {
    "title": "LAB3",
    "value": 3.3,
    "color": "#6179C0"
  }, {
    "title": "Supply",
    "value": 3.3,
    "color": "#6179C0"
  }, {
    "title": "Disposal",
    "value": 3.3,
    "color": "#6179C0"
  }, {
    "title": "Application",
    "value": 5.5,
    "color": "#6179C0"
  }, {
    "title": "Acquisition",
    "value": 5.5,
    "color": "#6179C0"
  }, {
    "title": "Settlement",
    "value": 5.5,
    "color": "#6179C0"
  }],
  "startDuration": 1,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 8,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -27,
  "labelColor": "#fff",
  "radius": 190,
  "innerRadius": 137,
  "outlineAlpha": 1,
  "outlineThickness": 4,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]",
  "allLabels": [{
    "text": "ACME Inc. Spending Chart",
    "bold": true,
    "size": 18,
    "color": "#404040",
    "x": 0,
    "align": "center",
    "y": 20
  }]
});
var pie5 = AmCharts.makeChart("chart11", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "$",
    "value": 100,
    "color": "#090E0F"
  }],
  "startDuration": 0,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 14,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -25,
  "labelColor": "#fff",
  "radius": 25,
  "innerRadius": 0,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]"
});

var pie6 = AmCharts.makeChart("chart22", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "Marketing",
    "value": 33,
    "color": "#BA3233"
  }, {
    "title": "Production",
    "value": 33,
    "color": "#624B6A"
  }, {
    "title": "R&D",
    "value": 33,
    "color": "#6179C0"
  }],
  "startDuration": 1,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 9,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -28,
  "labelColor": "#fff",
  "radius": 80,
  "innerRadius": 27,
  "outlineAlpha": 1,
  "outlineThickness": 4,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]"
});
#charts,
#charts1 {
  width: 200px;
  height: 500px;
  position: relative;
  margin: 0 auto;
  font-size: 8px;
  flex: 1;
}

#charts {
  width: 400px;
}

.chartdiv {
  width: 400px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
}

#parent {
  display: flex;
  width: 700px;
  border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="parent">
  <div id="charts">
    <div id="chart1" class="chartdiv"></div>
    <div id="chart2" class="chartdiv"></div>
    <div id="chart3" class="chartdiv"></div>
    <div id="chart4" class="chartdiv"></div>
  </div>
  <div id="charts1">
    <div id="chart11" class="chartdiv"></div>
    <div id="chart22" class="chartdiv"></div>
    <div id="chart33" class="chartdiv"></div>
    <div id="chart44" class="chartdiv"></div>
  </div>
</div>
1
javascriptjqueryamcharts

1 Answers

1
votes

There's a bug with the nested plugin where it's using a reference to an element to hold a nest, which doesn't work when you have multiple sets of nested pie charts. A quick fix for this is to have it use the chart div's parent element ID to ensure that each set of pie charts are grouped correctly:

var parent = div.parentNode.id;

Of course this will add a dependency that the container div must have an ID but that's a small requirement.

You'll also want to remove the other divs if they don't have pie charts as they will prevent the mouseover event from firing on the second column's charts.

Updated code below:

/**
 * Plugin: Manipulate z-index of the chart
 */
AmCharts.addInitHandler(function(chart) {

  // init holder for nested charts
  if (AmCharts.nestedChartHolder === undefined)
    AmCharts.nestedChartHolder = {};

  if (chart.bringToFront === true) {
    chart.addListener("init", function(event) {
      // chart inited
      var chart = event.chart;
      var div = chart.div;
      var parent = div.parentNode.id; //changed to use the parent's ID instead of a reference.
      
      // add to holder
      if (AmCharts.nestedChartHolder[parent] === undefined) {
        AmCharts.nestedChartHolder[parent] = [];
      }
      AmCharts.nestedChartHolder[parent].push(chart);

      // add mouse mouve event
        
      chart.div.addEventListener('mousemove', function() {

        // calculate current radius
        var x = Math.abs(chart.mouseX - (chart.realWidth / 2));
        var y = Math.abs(chart.mouseY - (chart.realHeight / 2));
        var r = Math.sqrt(x * x + y * y);

        // check which chart smallest chart still matches this radius
        var smallChart;
        var smallRadius;
        for (var i = 0; i < AmCharts.nestedChartHolder[parent].length; i++) {
          var checkChart = AmCharts.nestedChartHolder[parent][i];

          if ((checkChart.radiusReal < r) || (smallRadius < checkChart.radiusReal)) {
            checkChart.div.style.zIndex = 1;
          } else {
            if (smallChart !== undefined)
              smallChart.div.style.zIndex = 1;
            checkChart.div.style.zIndex = 2;
            smallChart = checkChart;
            smallRadius = checkChart.radiusReal;
          } 
        }
      }, false);
    });
  }

}, ["pie"]);

/**
 * Create the charts
 */
var pie1 = AmCharts.makeChart("chart1", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "$",
    "value": 100,
    "color": "#090E0F"
  }],
  "startDuration": 0,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 14,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -25,
  "labelColor": "#fff",
  "radius": 25,
  "innerRadius": 0,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]"
});

var pie2 = AmCharts.makeChart("chart2", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "Marketing",
    "value": 33,
    "color": "#BA3233"
  }, {
    "title": "Production",
    "value": 33,
    "color": "#624B6A"
  }, {
    "title": "R&D",
    "value": 33,
    "color": "#6179C0"
  }],
  "startDuration": 1,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 9,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -28,
  "labelColor": "#fff",
  "radius": 80,
  "innerRadius": 27,
  "outlineAlpha": 1,
  "outlineThickness": 4,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]"
});

var pie3 = AmCharts.makeChart("chart3", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "Online",
    "value": 11,
    "color": "#BA3233"
  }, {
    "title": "Print",
    "value": 11,
    "color": "#BA3233"
  }, {
    "title": "Other",
    "value": 11,
    "color": "#BA3233"
  }, {
    "title": "Equipment",
    "value": 16.5,
    "color": "#624B6A"
  }, {
    "title": "Materials",
    "value": 16.5,
    "color": "#624B6A"
  }, {
    "title": "Labs",
    "value": 16.5,
    "color": "#6179C0"
  }, {
    "title": "Patents",
    "value": 16.5,
    "color": "#6179C0"
  }],
  "startDuration": 1,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 8,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -27,
  "labelColor": "#fff",
  "radius": 135,
  "innerRadius": 82,
  "outlineAlpha": 1,
  "outlineThickness": 4,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]"
});

var pi4 = AmCharts.makeChart("chart4", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "Design",
    "value": 5.5,
    "color": "#BA3233"
  }, {
    "title": "P&P",
    "value": 5.5,
    "color": "#BA3233"
  }, {
    "title": "Magazines",
    "value": 11,
    "color": "#BA3233"
  }, {
    "title": "Outdoor",
    "value": 3.66,
    "color": "#BA3233"
  }, {
    "title": "Promo",
    "value": 3.66,
    "color": "#BA3233"
  }, {
    "title": "Endorsement",
    "value": 3.66,
    "color": "#BA3233"
  }, {
    "title": "Maintenance",
    "value": 8.25,
    "color": "#624B6A"
  }, {
    "title": "Acquisition",
    "value": 8.25,
    "color": "#624B6A"
  }, {
    "title": "Raw",
    "value": 5.5,
    "color": "#624B6A"
  }, {
    "title": "Recycling",
    "value": 5.5,
    "color": "#624B6A"
  }, {
    "title": "Logistics",
    "value": 5.5,
    "color": "#624B6A"
  }, {
    "title": "LAB1",
    "value": 3.3,
    "color": "#6179C0"
  }, {
    "title": "LAB2",
    "value": 3.3,
    "color": "#6179C0"
  }, {
    "title": "LAB3",
    "value": 3.3,
    "color": "#6179C0"
  }, {
    "title": "Supply",
    "value": 3.3,
    "color": "#6179C0"
  }, {
    "title": "Disposal",
    "value": 3.3,
    "color": "#6179C0"
  }, {
    "title": "Application",
    "value": 5.5,
    "color": "#6179C0"
  }, {
    "title": "Acquisition",
    "value": 5.5,
    "color": "#6179C0"
  }, {
    "title": "Settlement",
    "value": 5.5,
    "color": "#6179C0"
  }],
  "startDuration": 1,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 8,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -27,
  "labelColor": "#fff",
  "radius": 190,
  "innerRadius": 137,
  "outlineAlpha": 1,
  "outlineThickness": 4,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]",
  "allLabels": [{
    "text": "ACME Inc. Spending Chart",
    "bold": true,
    "size": 18,
    "color": "#404040",
    "x": 0,
    "align": "center",
    "y": 20
  }]
});
var pie5 = AmCharts.makeChart("chart11", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "$",
    "value": 100,
    "color": "#090E0F"
  }],
  "startDuration": 0,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 14,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -25,
  "labelColor": "#fff",
  "radius": 25,
  "innerRadius": 0,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]"
});

var pie6 = AmCharts.makeChart("chart22", {
  "type": "pie",
  "bringToFront": true,
  "dataProvider": [{
    "title": "Marketing",
    "value": 33,
    "color": "#BA3233"
  }, {
    "title": "Production",
    "value": 33,
    "color": "#624B6A"
  }, {
    "title": "R&D",
    "value": 33,
    "color": "#6179C0"
  }],
  "startDuration": 1,
  "pullOutRadius": 0,
  "color": "#fff",
  "fontSize": 9,
  "titleField": "title",
  "valueField": "value",
  "colorField": "color",
  "labelRadius": -28,
  "labelColor": "#fff",
  "radius": 80,
  "innerRadius": 27,
  "outlineAlpha": 1,
  "outlineThickness": 4,
  "labelText": "[[title]]",
  "balloonText": "[[title]]: [[value]]"
});
#charts,
#charts1 {
  width: 200px;
  height: 500px;
  position: relative;
  margin: 0 auto;
  font-size: 8px;
  flex: 1;
}

#charts {
  width: 400px;
}

.chartdiv {
  width: 400px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
}

#parent {
  display: flex;
  width: 700px;
  border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<div id="parent">
  <div id="charts">
    <div id="chart1" class="chartdiv"></div>
    <div id="chart2" class="chartdiv"></div>
    <div id="chart3" class="chartdiv"></div>
    <div id="chart4" class="chartdiv"></div>
  </div>
  <div id="charts1">
    <div id="chart11" class="chartdiv"></div>
    <div id="chart22" class="chartdiv"></div>
    <!--
      commented out as the mouseover event doesn't fire if there are empty divs overlapping
    <div id="chart33" class="chartdiv"></div>
    <div id="chart44" class="chartdiv"></div>
    -->
  </div>
</div>