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 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>
Apply parameters: On change
Apply parameters: Filter button
Insert report
Insert parameter
Insert "Filter" button
Template reference
Save
Cancel