Edit Dashboard | SeekTable

^* 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>


<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>

Insert report Insert parameter Insert "Filter" button Template reference

Cancel