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

Insert report Insert parameter Insert "Filter" button Template reference

Cancel