Flexmonster - Live data update

Demos

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div id="pivot-container"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

.header-cell {
  background-color: #F7F7F7 !important;
  border-bottom: 1px solid #E9E9E9 !important;
  border-right: 1px solid #E9E9E9 !important;
}

#fm-pivot-view .fm-grid-layout div.fm-cell {
  padding-left: 20px;
}

#fm-pivot-view .fm-header {
  background-color: #e9e9e9 !important;
  border-right: 1px solid #d5d5d5 !important;
  border-bottom: 1px solid #d5d5d5 !important;
}

.fm-updated-cell-down {
  color: #DF3800 !important;
  font-weight: bold !important;
  background-image: none !important;
  -webkit-animation: fadeIt 5s ease-in-out;
  -moz-animation: fadeIt 5s ease-in-out;
  -o-animation: fadeIt 5s ease-in-out;
  animation: fadeIt 5s ease-in-out;
}

.fm-updated-cell-down::before {
  content: "\2193 \00a0";
  position: relative;
  bottom: 2px;
}

.fm-updated-cell-up {
  color: #00A45A !important;
  font-weight: bold !important;
  background-image: none !important;
  -webkit-animation: fadeIt1 5s ease-in-out;
  -moz-animation: fadeIt1 5s ease-in-out;
  -o-animation: fadeIt1 5s ease-in-out;
  animation: fadeIt1 5s ease-in-out;
}

.fm-updated-cell-up::before {
  content: '\2191 \00a0';
  position: relative;
  bottom: 2px;
}

@-webkit-keyframes fadeIt {
  0% {
    background-color: #FFFFFF;
  }

  20% {
    background-color: #F9D7CC;
    border-bottom: 1px solid #e9c5ba;
    border-right: 1px solid #e9c5ba;
  }

  50% {
    background-color: #F9D7CC;
    border-bottom: 1px solid #e9c5ba;
    border-right: 1px solid #e9c5ba;
  }

  100% {
    background-color: #FFFFFF;
  }
}

@-moz-keyframes fadeIt {
  0% {
    background-color: #FFFFFF;
  }

  20% {
    background-color: #F9D7CC;
    border-bottom: 1px solid #e9c5ba;
    border-right: 1px solid #e9c5ba;
  }

  50% {
    background-color: #F9D7CC;
    border-bottom: 1px solid #e9c5ba;
    border-right: 1px solid #e9c5ba;
  }

  100% {
   ...

JavaScript

const pivot = new Flexmonster({
  container: "pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 450,
  report: {
    dataSource: {
      type: "json",
      data: [
        {
          "ID": "ISK",
          "Currency": "ISK",
          "Bid Rate": 144.904417,
          "Ask Rate": 144.904417
        }
      ],
      mapping: {
        "ID": {
          type: "id"
        },
        "Currency": {
          type: "string"
        },
        "Bid Rate": {
          type: "number"
        },
        "Ask Rate": {
          type: "number"
        }
      }
    },
    slice: {
      rows: [
        {
          uniqueName: "Currency",
          sort: "asc"
        }
      ],
      columns: [
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Bid Rate",
          aggregation: "sum",
          format: "rate_format"
        },
        {
          uniqueName: "Ask Rate",
          aggregation: "sum",
          format: "rate_format"
        },
        {
          uniqueName: "Spread",
          formula: "(sum('Ask Rate') - sum('Bid Rate')",
          caption: "Spread",
          format: "spread_format"
        }
      ],
      flatOrder: ["Bid Rate", "Currency", "Ask Rate", "Spread"]
    },
    options: {
      grid: {
        type: "flat",
        showFilter: false,
        showHeaders: false,
        showTotals: "off",
        showGrandTotals: "off"
      },
      configuratorButton: false,
      drillThrough: false
    },
    conditions: [
      {
        formula:
          "if(#updateDifference < 0, 'fm-updated-cell-down', 'fm-updated-cell-up')"
      }
    ],
    formats: [
      {
        name: "rate_format",
        decimalPlaces: 4,
        textAlign: "left",
        thousandsSeparator: ",",
        decimalSeparator: "."
      },
      {
        name: "spread_format",
       ...