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).
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/echarts-stat@1.2.0/dist/ecStat.min.js"></script> <ul class="tabs"> <li class="active"><a href="#scatter">Scatter + Regression</a></li> <li><a href="#bubble">Bubble Chart</a></li> </ul> <div id="scatter"> <div class="w100 h100"> <Widget:Report>{"ReportId":"f1117f18a5954782b326c87bc607bbdc", "ClientCustomRenderFunction": "eCharts_scatter_demo"}</Widget:Report> </div> </div> <div id="bubble"> <div class="w100 h100"> <Widget:Report>{"ReportId":"f1117f18a5954782b326c87bc607bbdc", "ClientCustomRenderFunction": "eCharts_bubble_demo"}</Widget:Report> </div> </div> <script> // This is adopted E-Charts example: https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression function eCharts_scatter_demo(context) { console.log(context.reportData); // take a look at 'reportData' structure // prepare chartData in a form like in E-Chart example // measure values are in 'reportData.RowTotals' and dim values are in reportData.RowKeys var chartData = context.reportData.RowTotals.map(function(val, idx) { return [ val[0], // sum of LineTotal val[1], // count context.reportData.RowKeys[idx][0], // country ]; }); console.log(chartData); var myChart = echarts.init(context.$el[0]); echarts.registerTransform(ecStat.transform.regression); var option = { dataset : [ { source : chartData }, { transform: { type: 'ecStat:regression', config: { method: 'polynomial', order: 3 } } } ], title: { text: 'Orders Count vs Sales per country', left: 'center', top: 16 }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } }, xAxis: { splitLine: { lineStyle: { type: 'dashed' } }, splitNumber: 20 }, yAxis: { min: -40, splitLine: { lineStyle: { type: 'dashed' } } }, series: [ { name: 'scatter', type: 'scatter' }, { name: 'line', type: 'line', smooth: true, datasetIndex: 1, symbolSize: 0.1, symbol: 'circle', label: { show: true, fontSize: 16 }, labelLayout: { dx: -20 }, encode: { label: 2, tooltip: 1 } } ] }; myChart.setOption(option) } </script> <script> // you may use this helper function to get unpivoted dataset suitable for eCharts function unpivotData(pvtReportData) { var result = []; var pushValues = function(fromArr, toArr) { for (var i=0; i<fromArr.length; i++) toArr.push(fromArr[i]); }; for (var r=0; r<pvtReportData.RowKeys.length; r++) { if (pvtReportData.Columns.length>0) { for (var c=0; c<pvtReportData.ColumnKeys.length; c++) { var values = []; pushValues(pvtReportData.RowKeys[r], values); pushValues(pvtReportData.ColumnKeys[c], values); pushValues(pvtReportData.Values[r][c], values); result.push(values); } } else { var values = []; pushValues(pvtReportData.RowKeys[r], values); pushValues(pvtReportData.RowTotals[r], values); result.push(values); } } return result; } function eCharts_bubble_demo(context) { var chartData = unpivotData( context.reportData ); console.log(chartData); var option = { dataset : [ { dimensions: ["country", "year", "sales", "orders", "items"], source : chartData }, { transform: { type: 'filter', config: { dimension: 1, eq: "1998" } // to avoid mess on the chart, show only "1998" } }, ], xAxis: { splitLine: { show: false } }, yAxis: { splitLine: { show: false } }, grid: { left: 100, right: 130 }, series: [ { datasetIndex:1, type: 'scatter', encode: { x: "orders", y: "items" }, symbolSize: function (data) { return Math.sqrt(data[3]) * 3; }, emphasis: { focus: 'self' }, labelLayout: function () { return { x: myChart.getWidth() - 100, moveOverlap: 'shiftY' }; }, labelLine: { show: true, length2: 5, lineStyle: { color: '#bbb' } }, label: { show: true, formatter: function (param) { return param.data[0]; }, position: 'right', minMargin: 2 } } ] }; var myChart = echarts.init(context.$el[0]); myChart.setOption(option) } </script>
Apply parameters: On change
Apply parameters: Filter button
Insert report
Insert parameter
Insert "Filter" button
Template reference
Save
Cancel