Question

51

How to write your own custom legends for google line chart/ Google line chart legend manipulation

rated 0 times [ 53] [ 2] / answers: 1 / hits: 19106 / 8 Years ago, mon, march 14, 2016, 12:00:00

I am using Google Visualisation to create line charts for my application. I have following requirements in that :

Manipulating events on legends (like doubleClick, which I have
solved somehow)

Wrapping the legends in two rows avoiding pagination (Most imp and required)

I have gone through the following questions to get solution for my answers:
1) Issue with legend pagination (Google Interactive chart API)
Issue : I would avoid playing with font-size because the number of legends may increase over time

2)How the legends on Google charts can be wrapped
Issue: I do not want legends to be anywhere else than at the position:bottom. And maxLines solution does not work on position : bottom

3) Is there any way I can avoid pagination in legends of a google visualisation chart and show all the lines in two lines in a single page?
Issue: This is another link, which mentions my problem, but no useful answers found on it.

4) Google Documentation :
Heading : Chart Legend Text and Style chdl, chdlp, chdls [All charts]
https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs
Heading : Setting Chart Margines
https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all----charts
Heading : Tooltips
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#tooltips-an-introduction
Comment : These are few google documentation links where few legend manipulating properties are mentioned, but still they does not solve my problem.

5)https://github.com/google/google-visualization-issues/issues/1286
Comment : This is the link where I can see that, google has not provided many properties to manipulate legends, and no much useful information to solve my issue

6) Google charts legend manipulation
Comment : This is the only link, where I got a hint about how to solve my issue i.e. writing own legends. But there is no more links provided for documentation, no jsFiddle or no ref links apart from one link which is not useful for me.

While gone through all these, I can see only solution to solve my problem is to write my own custom legends. But I have no idea about how to write a complete element adding to google API.

Please guide me to go through this, any suggestions/links/refs/hints are welcome.

Thank you.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

pierceabnerc

Add To Favorites

Follow

Total Points: 430

Total Questions: 92

Total Answers: 102

Location: Faroe Islands

Member since Thu, Apr 8, 2021

3 Years ago

answered 8 Years ago susanap · Accepted Answer

Example: Build custom legend, which syncs with data and chart...

google.charts.load('44', {

  callback: drawChart,

  packages: ['controls', 'corechart']

});



function drawChart() {

  // adapted from a previous example

  var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21'];



  var data = new google.visualization.DataTable();

  data.addColumn('date', 'X');

  data.addColumn('number', 'Y1');

  data.addColumn('number', 'Y2');



  data.addRow([new Date(2016,  0, 1),   1, 123]);

  data.addRow([new Date(2016,  1, 1),   6,  42]);

  data.addRow([new Date(2016,  2, 1),   4,  49]);

  data.addRow([new Date(2016,  3, 1),  23, 486]);

  data.addRow([new Date(2016,  4, 1),  89, 476]);

  data.addRow([new Date(2016,  5, 1),  46, 444]);

  data.addRow([new Date(2016,  6, 1), 178, 442]);

  data.addRow([new Date(2016,  7, 1),  12, 274]);

  data.addRow([new Date(2016,  8, 1), 123, 934]);

  data.addRow([new Date(2016,  9, 1), 144, 145]);

  data.addRow([new Date(2016, 10, 1), 135, 946]);

  data.addRow([new Date(2016, 11, 1), 178, 747]);



  // use view to add various columns for example purposes

  var view = new google.visualization.DataView(data);

  view.setColumns([0, 1, 2,

    {

      calc: function (data, row) {

        return data.getValue(row, 1) + data.getValue(row, 2);

      },

      type: 'number',

      label: 'Y3'

    },

    {

      calc: function (data, row) {

        return data.getValue(row, 2) - data.getValue(row, 1);

      },

      type: 'number',

      label: 'Y4'

    },

    {

      calc: function (data, row) {

        return data.getValue(row, 1) * 2;

      },

      type: 'number',

      label: 'Y5'

    },

    {

      calc: function (data, row) {

        return data.getValue(row, 2) * 3;

      },

      type: 'number',

      label: 'Y6'

    },

    {

      calc: function (data, row) {

        return data.getValue(row, 1) * 1.5;

      },

      type: 'number',

      label: 'Y7'

    },

    {

      calc: function (data, row) {

        return data.getValue(row, 1) * 1.5;

      },

      type: 'number',

      label: 'Y8'

    }

  ]);



  var control = new google.visualization.ControlWrapper({

    controlType: 'DateRangeFilter',

    containerId: 'control_div',

    options: {

      filterColumnIndex: 0

    }

  });



  var chart = new google.visualization.ChartWrapper({

    chartType: 'LineChart',

    containerId: 'chart_div',

    options: {

      chartArea: {

        width: '80%'

      },

      // add colors for legend mapping

      colors: colorPallette,

      hAxis: {

        format: 'MMM',

        slantedText: false,

        maxAlternation: 1

      },

      legend: 'none',

      width: 320

    }

  });



  // add legend marker

  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);

  }



  // chart ready event

  google.visualization.events.addListener(chart, 'ready', function () {

    var legend = document.getElementById('legend_div');



    // colors from chart

    var colorPallette = chart.getOption('colors');



    // clear previous legend

    legend.innerHTML = '';



    // add legend marker for each Y axis column - skip X axis --> i = 1

    for (var i = 1; i < chart.getDataTable().getNumberOfColumns(); i++) {

      var markerProps = {};

      markerProps.index = i;

      markerProps.color = colorPallette[i - 1];

      markerProps.label = chart.getDataTable().getColumnLabel(i);

      addLegendMarker(markerProps);

    }



    // add click event to each legend marker

    var markers = legend.getElementsByTagName('DIV');

    Array.prototype.forEach.call(markers, function(marker) {

      marker.addEventListener('click', function (e) {

        var marker = e.target || e.srcElement;

        if (marker.tagName.toUpperCase() !== 'DIV') {

          marker = marker.parentNode;

        }

        var columnIndex = parseInt(marker.getAttribute('data-columnIndex'));

        document.getElementById('message_div').innerHTML = 'legend marker clicked = ' + chart.getDataTable().getColumnLabel(columnIndex);

      }, false);

    });

  });



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

  dash.bind([control], [chart]);

  dash.draw(view);

}

#legend_div {

  text-align: center;

  width: 320px;

}



.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 id=chart_div></div>

  <div id=legend_div></div>

  <br/>

  <div id=control_div></div>

  <br/>

  <div id=message_div></div>

</div>



<!-- template for building marker -->

<script id=template-legend-marker type=text/html>

  <div class=legend-marker data-columnIndex={{index}}>

    <div class=legend-marker-color style=background-color: {{color}}></div>

    <span>{{label}}</span>

  </div>

</script>