javascript - Disable line that appears on a legend click for Google Line Chart -
whenever series gets clicked on legend in google line chart, seems line appears above data trendline. possible stop behavior? not find in docs.
when legend clicked, entire series selected,
means row value null
chart.getselection()
return like...
{row: null, column 1}
vs. when data point clicked / selected, row have number reference row: 1
, etc...
as such, use 'select'
event listener , cancel selection when row null
chart.setselection([]);
see following working snippet...
google.charts.load('current', { callback: function () { var container = document.getelementbyid('chart_div'); var chart = new google.visualization.linechart(container); var datatable = new google.visualization.datatable(); datatable.addcolumn({type: 'string', label: 'year'}); // series 0 datatable.addcolumn({type: 'number', label: 'category a'}); datatable.addcolumn({type: 'string', role: 'tooltip', p: {html: true}}); // series 1 datatable.addcolumn({type: 'number', label: 'category b'}); datatable.addcolumn({type: 'string', role: 'tooltip', p: {html: true}}); // series 2 datatable.addcolumn({type: 'number', label: 'category c'}); datatable.addcolumn({type: 'string', role: 'tooltip', p: {html: true}}); datatable.addrows([ ['2014', 1000, null, 2000, null, 3000, null], ['2015', 2000, null, 4000, null, 6000, null], ['2016', 3000, null, 6000, null, 9000, null], ]); (var = 0; < datatable.getnumberofrows(); i++) { datatable.setvalue(i, 2, gettooltip(i, 1)); datatable.setvalue(i, 4, gettooltip(i, 3)); datatable.setvalue(i, 6, gettooltip(i, 5)); } function gettooltip(rowindex, columnindex) { return '<div class="ggl-tooltip"><span>' + datatable.getvalue(rowindex, 0) + ': </span>' + datatable.getformattedvalue(rowindex, columnindex) + '</div>'; } // use 'select' listener disable selection on legend click google.visualization.events.addlistener(chart, 'select', function () { var selection = chart.getselection(); if (selection.length > 0) { if (selection[0].row === null) { chart.setselection([]); } } }); chart.draw(datatable, { legend: { position: 'bottom' }, pointsize: 4, tooltip: { ishtml: true } }); }, packages: ['corechart'] });
.ggl-tooltip { border: 1px solid #e0e0e0; font-family: arial, helvetica; font-size: 10pt; padding: 12px 12px 12px 12px; } .ggl-tooltip span { font-weight: bold; }
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
Comments
Post a Comment