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).

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

Insert report Insert parameter Insert "Filter" button Template reference Diff

Cancel