Seek
Table
Reports
Dashboards
Help
demo@seektable.com
Signup
Dashboards
Northwind Orders
Northwind World Map
ECharts Demos
Custom Filter
Northwind Invoice
Bar chart as a slicer
ECharts export to PDF
Dashboards
→
Edit Dashboard
Save
Delete
Cancel
*
Name
*
Enable Exports
All-dashboard exports to download multiple reports as a one file.
*
HTML Template
Hint: use copy-paste to edit HTML code in your favourite editor (VSCode, Notepad++ etc).
<div class="stFilter"> <Widget:Parameter>{"CubeId":"northwind-orders","ParameterName":"filter_country"}</Widget:Parameter> <!-- description text --> <div class="stFilterGroup" style="background-color:#F0F0F0;padding-left:10px;padding-right:10px;"> <div style="line-height:28px; font-size:12px !important;">ECharts bar chart that works as a slicer (applies a filter on click). It is possible to keep bar-chart unchanged when filter is applied (see comments in the HTML template).</div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script> <div class="w50 h100"> <div class="w100 h50"> <Widget:Report>{ "ReportId":"f1117f18a5954782b326c87bc607bbdc", "ReportOverride": { "LimitRows": 5, "RowPage":null }, // force to show only top-5 countries //"SetParameterValues": {"filter_country": null}, // uncomment to avoid filtering by country for bar-chart "ClientWidgetName": "chartCountry", "ClientCustomRenderFunction": "chartCountryRender" }</Widget:Report> <script> function chartCountryRender(context) { var chartData = context.getChartData(); // report's data as labels+series // console.log(chartData); var chart = echarts.init(context.$el[0]); chart.on("click", function (event) { // console.log(event); window.report.setReportParameters({filter_country: event.name}); window.report.refreshParameterInputs(["filter_country"]); }); // eCharts simple bar example: https://echarts.apache.org/examples/en/editor.html?c=bar-simple var option = { xAxis: { type: 'category', data: chartData.labels }, yAxis: { type: 'value' }, series: [ { data: chartData.series[0], type: 'bar' } ] }; // console.log(option); chart.setOption(option); } </script> </div> <div class="w100 h50"> <Widget:Report>{ "ReportId":"f1117f18a5954782b326c87bc607bbdc", "TableOnly":true }</Widget:Report> </div> </div> <div class="w50 h100"> <Widget:Report>{"ReportId":"f420ac4b5cdb4fff9a8d825f4654a767"}</Widget:Report> </div>
Apply parameters: On change
Apply parameters: Filter button
Insert report
Insert parameter
Insert "Filter" button
Template reference
Save
Cancel