Geek Answers Handbook

How to write your own legends for google chart graphics / google chart graphics manipulation

I am using Google Visualization to create line charts for my application. I have the following requirements:

  • Manipulation of events according to legends (for example, doubleClick, which I have somehow decided)
  • Wrapping legends in two lines, avoiding pagination (most imp are required)

I got the following questions in order to get answers to my answers: 1) Pagination problem (Google Interactive chart API) Problem: I would avoid playing with font size, because the number of legends can increase over time

2) How can I cover the legends in Google charts Problem. I don’t want the legends to be anywhere else than in position: below. And maxLines solution does not work in position: bottom

3) Is there a way to avoid pagination in the legends of a Google visualization chart and show all rows in two rows on the same page? Problem. This is another link that mentions my problem, but there are no helpful answers to it.

4) Google Documentation: Title: Legend Chart Text and Style chdl, chdlp, chdls [All Graphics] https://developers.google.com/chart/image/docs/chart_params#axis-label-styles-chxs Title: Margin Setup https://developers.google.com/chart/image/docs/chart_params#chart-margins-chma-all----charts Title: Tips https://developers.google.com/chart/interactive/docs/customizing_tooltip_content # tooltips-an-introduction Comment: These are a few links to google documentation documentation that mention several legend manipulation properties, but they still don't solve my problem.

5) https://github.com/google/google-visualization-issues/issues/1286 Comment: This is a link in which I see that Google did not provide many properties for managing legends and does not contain a lot of useful information to solve my problem .

6) manipulation of legends in Google graphics Comment: This is the only link where I received a hint on how to solve my problem, that is, write my own legends. But there are no more links for documentation, no jsFiddle links or no links, except for one link that does not suit me.

Having gone through all this, I see that the only solution to solve my problem is to write my own legends. But I have no idea how to write a complete element adding to the Google API.

I ask you to advise that any suggestions / links / links / tips are welcome.

Thanks.

+6
source share
2 answers

Example: creating a custom legend that synchronizes with data and a 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>
+8
source 
  if ($("#source svg text[text-anchor='end']").length > 0){ var n = $("#source svg text[text-anchor='end']").length; $("#source svg text[text-anchor='end']")[n-5].innerHTML = ""; $("#source svg text[text-anchor='end']")[n-4].innerHTML = "Create your own legend"; $("#source svg text[text-anchor='end']")[n-3].innerHTML = "Create your own legend"; $("#source svg text[text-anchor='end']")[n-2].innerHTML = "Create your own legend"; $("#source svg text[text-anchor='end']")[n-1].innerHTML = ""; }
0
source

More articles:


All Articles