Web API Explorer ASP.NET Web API Explorer

In this sample, all the data such as the field list in PviotPanel, the aggregated data are shown in PivotGrid and the detail raw data for some cells are fetched from the DataEngine server api. We also have a client-side option if you prefer.

In this sample, the PivotPanel control is bound with the DataEngine api. And the PivotGrid control is used to show the aggregated data. When double clicking on some cells in the PivotGrid control, a new grid will pop up to show the detail raw data for the cell.

A list of available fields will show in the PivotPanel, and users will be able to drag fields between summary areas to generate data summaries (also known as "views"). Users can also configure the fields by setting their headers, summary functions, filters, and formats.

The PivotPanel control has properties that allow you to customize the view. Use the controls below to modify the values of these properties and see their effect:

Row totals
Column totals
Show Zeros
using Microsoft.AspNetCore.Mvc;

namespace WebApiExplorer.Controllers.Wijmo5Olap
    public class Wijmo5OlapController : Controller
        public IActionResult Index()
            return View();
    ViewBag.Title = "DataEngine";
    ViewBag.HideFeatures = true;
    ViewBag.DemoDescription = false;
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

@section Head{
    <script type="text/javascript">
    window["webAPIService"] = '@(Configuration["WebAPIService"])' + 'api/dataengine';
    <script src="~/Scripts/DataEngine/common.js" type="text/javascript"></script>
    <script src="~/Scripts/DataEngine/wijmo5Olap.js" type="text/javascript"></script>

<div class="title-container">

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-4">
            <div id="pivotPanel"></div>
        <div class="col-sm-8 col-md-8">
            <div id="pivotGrid"></div>

<div class="col-lg-12 ui-helper-clearfix content-panel" style="margin-top:20px">
    <dl class="dl-horizontal">
        <dd><div id="cmbDataSets"></div></dd>
        <dd><div id="cmbRowTotals"></div></dd>
        <dd><div id="cmbColTotals"></div></dd>
        <dd><input id="chkShowZeros" type="checkbox" onclick="chkShowZeros_CheckedChanged()" /></dd>