Google图表类别过滤器-隐藏html标记或将元素转换为链接

Question

Is anybody has an idea how the html tags can be hidden or can be converted to html links in the category filter ? I am having the following issue:

In the chart table for one of the columns I am providing html links. I am setting the property allowHtml:true in the ChartWrapper() . In the table the links are displaying properly. When I put filtering on that column the dropdown is getting the whole value of the column including the html. Unfortunately there isn't a property allowHtml for the ControlWrapper() . Here is how the filter is looking.

Screenshot of the filter

Answer 1

to remove the html from the CategoryFilter ,
for each cell in the data table column,
use the value property ( v: ) for the value to be displayed in the filter,
and the formatted value property ( f: ) for the link

see following working snippet...

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable({ cols: [ {label: 'Link', type: 'string'} ], rows: [ {c:[{v: 'Test 1', f: '<a href="https://www.google.com/">Test 1</a>'}]}, {c:[{v: 'Test 2', f: '<a href="https://www.google.com/">Test 2</a>'}]}, {c:[{v: 'Test 3', f: '<a href="https://www.google.com/">Test 3</a>'}]}, {c:[{v: 'Test 4', f: '<a href="https://www.google.com/">Test 4</a>'}]}, {c:[{v: 'Test 5', f: '<a href="https://www.google.com/">Test 5</a>'}]}, {c:[{v: 'Test 6', f: '<a href="https://www.google.com/">Test 6</a>'}]} ] }); var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard') ); var control = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'control', options: { filterColumnIndex: 0, ui: { allowTyping: false, } } }); var chart = new google.visualization.ChartWrapper({ chartType: 'Table', containerId: 'table', options: { allowHtml: true } }); dashboard.bind(control, chart); dashboard.draw(data); }, packages: ['controls', 'table'] }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="dashboard"> <div id="control"></div> <div id="table"></div> </div> 

---

note: not sure how to get the actual link to display in the filter,
but that could interfere with actually selecting a value anyway