Flexmonster - Pivot Table demo

Demos

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<base href="http://demos.telerik.com/kendo-ui/tabstrip/index">
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
<script src="https://cdn.flexmonster.com/2.4/flexmonster.js"></script>
<div>
<h3>hila</h3>
<div>
<div id="example">
    <div class="demo-section k-content">
        <div id="tabstrip">
            <ul>
                <li class="k-state-active">
                    Paris
                </li>
                <li>
                    New York
                </li>
            </ul>
            <div>
            <!--  <div id="pivot-container"></div> -->
            <span class="rainy">&nbsp;</span>
                <div class="weather">
                    <h2>17<span>&ordm;C</span></h2>
                    <p>Rainy weather in Paris.</p>
                </div>
            </div>
            <div>
                <div id="pivot-container"></div>
            </div>
        </div>
    </div>
</div>

CSS

.sunny, .cloudy, .rainy {
                    display: block;
                    margin: 30px auto 10px;
                    width: 128px;
                    height: 128px;
                    background: url('../content/web/tabstrip/weather.png') transparent no-repeat 0 0;
                }

                .cloudy{
                    background-position: -128px 0;
                }

                .rainy{
                    background-position: -256px 0;
                }

                .weather {
                    margin: 0 auto 30px;
                    text-align: center;
                }

                #tabstrip h2 {
                    font-weight: lighter;
                    font-size: 5em;
                    line-height: 1;
                    padding: 0 0 0 30px;
                    margin: 0;
                }

                #tabstrip h2 span {
                    background: none;
                    padding-left: 5px;
                    font-size: .3em;
                    vertical-align: top;
                }

                #tabstrip p {
                    margin: 0;
                    padding: 0;
                }

JavaScript

$(document).ready(function() {
                
                    function onShow(e) {
                    flexmonster.refresh();
                }
                
                    $("#tabstrip").kendoTabStrip({
                        show: onShow,
                        animation:  {
                            open: {
                                effects: "fadeIn"
                            }
                        }
                    });
                });
                
                   
new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/2.4/",
  width: "100%",
  height: "300px",
  toolbar: true,
  report: {
 
    "dataSource":
    {
        "data": [
        {
            "TNUM":
            {
                "type": "string"
            },
            "_1START":
            {
                "type": "string"
            },
            "_1END":
            {
                "type": "string"
            },
            "_1QTY":
            {
                "type": "number"
            },
            "ROW_TO_DELETE":
            {
                "type": "delete"
            }
        },
        {
            "TNUM": "AAC781",
            "_1START": "2017-09-28",
            "_1END": "2017-09-28",
            "_1QTY": 288,
            "NUMREC": 1
        }]
    },
    "slice":
    {},
    "formats": [
    {
        "name": "",
        "thousandsSeparator": ",",
        "decimalSeparator": ".",
        "decimalPlaces": 2,
        "maxDecimalPlaces": 2,
        "maxSymbols": 20,
        "currencySymbol": "",
        "currencySymbolAlign": "left",
        "isPercent": "false",
        "nullValue": "",
        "infinityValue": "Infinity",
        "divideByZeroValue": "Infinity",
        "textAlign": "right"
    }],
    "conditions": [
    {
        "formula": "#value < 0",
        "format":
        {
            "backgroundColor": "#FF0000",
            "color": "#FFFFFF",
           ...