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_year"}</Widget:Parameter> </div> <div class="w50 h100"> <Widget:Report>{ "ReportId":"f1117f18a5954782b326c87bc607bbdc", "ChartOnly":true, "ClientCustomRenderFunction": "worldMapChart" }</Widget:Report> <script src="https://echarts-maps.github.io/echarts-countries-js/echarts.min.js"></script> <script src="https://echarts-maps.github.io/echarts-countries-js/echarts-countries-js/world.js"></script> <script> var countryNamesMapping = { "USA" : "United States", "UK" : "United Kingdom" }; function normalizeCountryName(name) { if (countryNamesMapping.hasOwnProperty(name)) return countryNamesMapping[name]; return name; } function worldMapChart(context) { console.log(context.reportData); // values are in RowTotals var salesTotals = context.reportData.RowTotals.map(function(val, idx) { return val[0]; }); var maxValue = Math.max.apply(null, salesTotals); var chartData = context.reportData.RowTotals.map(function(val, idx) { return {name: normalizeCountryName(context.reportData.RowKeys[idx][0]), value:val[0]}; }); console.log(maxValue); console.log(chartData); var worldMapChart = echarts.init(context.$el[0]); var option = { tooltip: { trigger: 'item', showDelay: 0, transitionDuration: 0.2, formatter: function (params) { const value = ((params.value?params.value:0) + '').split('.'); const valueStr = value[0].replace( /(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,' ); return params.seriesName + '<br/>' + params.name + ': ' + valueStr; } }, visualMap: { left: 'right', min: 0, max: maxValue, inRange: { color: [ '#F0F0F0', '#0000FF' ] }, text: ['High', 'Low'], calculable: true }, "legend": [ { "selectedMode": "multiple", "top": "top", "orient": "horizontal", "data": [""], "left": "center", "show": true } ], "backgroundColor": "#fff", "series": [ { "mapType": "world", "data": chartData, "name": "", "symbol": "circle", "type": "map", "roam": true } ] }; worldMapChart.setOption(option); } </script> </div> <div class="w50 h100"> <a href="#" class="stExportButton stSmallButton" data-report="report" data-format="pdf" data-loadingspinner="true">PDF</a> <a href="#" class="stExportButton stSmallButton" data-report="report" data-format="excel" data-loadingspinner="true">Excel</a> <Widget:Report>{ "ReportId":"f1117f18a5954782b326c87bc607bbdc", "TableOnly":true, "ClientWidgetName":"report" }</Widget:Report> </div>
Apply parameters: On change
Apply parameters: Filter button
Insert report
Insert parameter
Insert "Filter" button
Template reference
Save
Cancel