Fetch the legend in customized HTML in google charts

Question

I am trying to fetch the legends in donut style google charts. I have made the customized HTML area to place the legends, however, I am unable to fetch it from the charts.

I have placed the entire code on GitHub at https://github.com/Sushant-ABdigital/Admin-Panel

I have checked the stakeoverflow question but I could not get help. link: Google charts legend manipulation

I request you all to help me with code or reference material to get the details of legend in the specified area.

Thank you, SB

So you're asking someone to go review all your code and find the information for you ? — Striped, Mar 04 '18 at 15:18
the information can be found in the data table used to draw the chart, no need for chart manipulation... — WhiteHat, Mar 04 '18 at 20:10
@WhiteHat Thank you for your comment. in fact, I got one of your post suggesting the answer. https://stackoverflow.com/questions/35987014/how-to-write-your-own-custom-legends-for-google-line-chart-google-line-chart-le Unfortunately, while working with pie chart I am getting few errors. I am trying to resolve and post an update on my progress tomorrow. — Sushant, Mar 05 '18 at 16:49
@WhiteHat Hi, I tried the solution. I could generate the custom HTML. however, I require your help. Currently, the chart legend does not highlight the corresponding pieSlice on hover and the filter slider shows the error as "One or more participants failed to draw()". Will it be possible for you to look at the codepen at [link](https://codepen.io/sushantb/pen/XZvYJK)? Please help. Thanks — Sushant, Mar 07 '18 at 07:44

score 2 · Accepted Answer · answered Mar 07 '18 at 17:20

to correct the issue with the slider,
need to use filtered data table from pie chart when building markers
(see comment below //...)

to highlight slice on hover, simply use the chart's setSelection method

see following working snippet...

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Donuts eaten');
  data.addRows([
    ['Jackson' , 5],
    ['Elisa', 7],
    ['Robert', 3],
    ['John', 2],
    ['Jessica', 6],
    ['Aaron', 1],
    ['Margareth', 8]
  ]);

  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div')
  );

  var donutRangeSlider = new google.visualization.ControlWrapper({
    controlType: 'NumberRangeFilter',
    containerId: 'filter_div',
    options: {
      filterColumnLabel: 'Donuts eaten'
    }
  });

  var pieChart = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div',
    options: {
      width: 300,
      height: 300,
      pieSliceText: 'value',
      legend: 'none',
      colors: [
        "#ee99fd",
        "#949ed5",
        "#fd6e6e",
        "#e6ddda",
        "#fdcf57",
        "#51b8ae",
        "#bada55"
      ],
      pieHole: 0.4
    }
  });

  function addLegendMarker(markerProps) {
    var legendMarker = document.getElementById('template-legend-marker').innerHTML;
    for (var handle in markerProps) {
      if (markerProps.hasOwnProperty(handle)) {
        legendMarker = legendMarker.replace('{{' + handle + '}}', markerProps[handle]);
      }
    }
    document.getElementById('legend_div').insertAdjacentHTML('beforeEnd', legendMarker);
  }

  google.visualization.events.addListener(pieChart, 'ready', function () {
    var legend = document.getElementById('legend_div');
    legend.innerHTML = '';
    // use filtered data table from piechart
    for (var i = 0; i < pieChart.getDataTable().getNumberOfRows(); i++) {
      var markerProps = {};
      markerProps.index = i;
      markerProps.color = pieChart.getOption('colors')[i];
      markerProps.label = pieChart.getDataTable().getValue(i, 0);
      addLegendMarker(markerProps);
    }

    // add legend hover
    var markers = legend.getElementsByTagName('DIV');
    Array.prototype.forEach.call(markers, function(marker) {
      marker.addEventListener('mouseover', function (e) {
        var marker = e.target || e.srcElement;
        if (marker.className !== 'legend-marker') {
          marker = marker.parentNode;
        }
        var rowIndex = parseInt(marker.getAttribute('data-rowIndex'));
        pieChart.getChart().setSelection([{row: rowIndex}]);
      }, false);
      marker.addEventListener('mouseout', function (e) {
        var marker = e.target || e.srcElement;
        if (marker.className !== 'legend-marker') {
          marker = marker.parentNode;
        }
        var rowIndex = parseInt(marker.getAttribute('data-rowIndex'));
        var selection = pieChart.getChart().getSelection();
        if (selection.length > 0) {
          if (selection[0].row === rowIndex) {
            pieChart.getChart().setSelection([]);
          }
        }
      }, false);
    });
  });

  dashboard.bind(donutRangeSlider, pieChart);
  dashboard.draw(data);
});

#legend_div {
  text-align: center;
  width: 500px;
}

.legend-marker {
  display: inline-block;
  padding: 16px 4px 8px 4px;
}

.legend-marker-color {
  display: inline-block;
  height: 12px;
  width: 12px;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="chart_div"></div>
  <div id="legend_div"></div>
  <div id="message_div"></div>
</div>

<script id="template-legend-marker" type="text/html">
  <div class="legend-marker" data-rowIndex="{{index}}">
    <div class="legend-marker-color" style="background-color: {{color}}"></div>
    <span>{{label}}</span>
  </div>
</script>

Thank you very much!! This was the functionality I wanted. Can you suggest any reading material apart from google documentation to learn more about these charts? — Sushant, Mar 08 '18 at 04:44

Fetch the legend in customized HTML in google charts

1 Answers1