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 style="background-color:#F0F0F0; padding:15px; font-size:12px; margin-right:10px;margin-bottom:10px;">
Custom visuals may be exported to PDF only if JS/HTML code is compatible with legacy browsers because in SeekTable PDF exports are generated by <a href="https://wkhtmltopdf.org/" target="_blank">wkhtmltopdf</a>.
<br/>
This demo illustrates how to use ECharts for custom visuals and keep them compatible with dashboard's PDF export.
</div>
<a href="#" class="stExportButton stSmallButton" data-format="pdf" data-loadingspinner="true">Export to PDF</a>

<div class="w50 h75">
<Widget:Report>{
  "ReportId":"f1117f18a5954782b326c87bc607bbdc",
  "ReportOverride": { "LimitRows": 10, "RowPage":null },   // force to show only top-10 countries
  "ClientWidgetName": "chartCountry",
  "ClientCustomRenderFunction": "chartCountryRender"
}</Widget:Report>

<script>
function ensureEchartsLoaded(callback) {
  if (typeof echarts==="undefined") { 
    // use ECharts 4.8.0 (last version that supports legacy browsers) if this is HTML rendering for PDF 
    var echartsVersion = $('body').hasClass("stPdfExport") ? "4.8.0" : "5.5.0";
    var jsUrl = "https://cdnjs.cloudflare.com/ajax/libs/echarts/"+echartsVersion+"/echarts.min.js";
    $.getScript(jsUrl, callback);
  } else {
    callback();
  }
}

function createEchart($el, option) {
  var chart;
  if ($('body').hasClass("stPdfExport")) {
    $el.height(400);
	option.animation = false;
    chart = echarts.init($el[0], null, { renderer: 'svg', width: 800, height: 400 });  
  } else {
    chart = echarts.init($el[0]);  
  }
  chart.setOption(option);
  return chart;
}

function chartCountryRender(context) {
  var chartData = context.getChartData(); // report's data as labels+series
  // console.log(chartData);

  // eCharts simple bar example: https://echarts.apache.org/examples/en/editor.html?c=bar-simple
  var option = {
    color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
    xAxis: {
      type: 'category',
      data: chartData.labels
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data:  chartData.series[0], 
        type: 'bar'
      }
    ]
  };

  // console.log(option);
  ensureEchartsLoaded(function() { createEchart(context.$el, option); });
}
</script>
</div>


<div class="w50 h75">
<Widget:Report>{
  "ReportId":"edb1ee25d81c4acd96d2c9d0f819afde",
  "ClientWidgetName": "chartHorizontalStackedBar",
  "ClientCustomRenderFunction": "chartHorizontalStackedBarRender"
}</Widget:Report>
<script>
function chartHorizontalStackedBarRender(context) {
  var chartData = context.getChartData(); // report's data as labels+series
  //console.log(chartData);
  var series = chartData.series.map(function(s) { 
    return {
      name : s.name,
   	  data : s,
      type: 'bar',
      stack: 'total',	
      label: { show: true },	
	  emphasis: { focus: 'series' }
    };
  });  
  
var option = {
  color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: chartData.labels
  },
  series: series
};  
  //console.log(option);
  ensureEchartsLoaded(function() { createEchart(context.$el, option); });
}
</script>

</div>

Insert report Insert parameter Insert "Filter" button Template reference

Cancel