Flexmonster - Dashboard

Demos

by Flexmonster Pivot Table

HTML

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

<div class="demo-box">
  <div class="demo-title">
    Treatment Costs by Departments
  </div>
  <div id="pivot-container-1"></div>
</div>

<div class="demo-box">
  <div class="row">
    <div class="col-6">
      <div class="demo-title">
        Overall Customer Satisfaction
      </div>
      <div id="pie-chart-container"></div>
    </div>
    <div class="col-6">
      <div class="demo-title right-text">
        Customer Satisfaction by Patient Status
      </div>
      <div id="column-chart-container"></div>
    </div>
  </div>
</div>

<div class="demo-box">
  <div class="demo-title">
    Customer Satisfaction by Average Waiting Time
  </div>
  <div class="row">
    <div class="col-6">
      <div id="pivot-container-2"></div>
    </div>
    <div class="col-6">
      <div id="bar-chart-container"></div>
    </div>
  </div>
</div>

CSS

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

/* Chart styles */
#fm-pivot-view .fm-axis > .fm-refLine {
  stroke-dasharray: 4px;
}

#fm-pivot-view .fm-axis-dividers > .fm-refLine {
  stroke: none;
}

#fm-pivot-view .fm-arc path {
  stroke-width: 1.5px !important;
}

#fm-pivot-view .fm-barStack path {
  stroke-width: 1px !important;
}

/* General colors (e.g., in pie chart) */
.fm-charts-color-1 {
  fill: #00a45a !important;
}

.fm-charts-color-2 {
  fill: #7e41ff !important;
}

.fm-charts-color-3 {
  fill: #df3800 !important;
}

.fm-charts-color-4 {
  fill: #ffb800 !important;
}

.fm-charts-color-5 {
  fill: #00a45a !important;
}

.fm-charts-color-6 {
  fill: #6F5674 !important;
}

.fm-charts-color-7 {
  fill: #64343F !important;
}

/* Changing colors of columns in a stacked column chart */
#column-chart-container .fm-charts-color-1 {
  fill: #00a45a !important;
}

#column-chart-container .fm-charts-color-2 {
  fill: #df3800 !important;
}

#column-chart-container .fm-charts-color-3 {
  fill: none;
}

div #fm-chart-legend div table tr td #lst1 li span#fm-icon-display.fm-ui-element {
  background-color: #df3800 !important;
}

/* Header styles */
#fm-pivot-view .fm-x.fm-axis.fm-title {
  font-size: 14px;
}

/* Hiding text labels from charts */
text#fm-yAxis-label {
  visibility: hidden !important;
}

text#fm-xAxis-label {
  visibility: hidden !important;
}

text.fm-x.fm-axis.fm-title {
  visibility: hidden !important;
}

/* Other */
.demo-box {
  background-color: #fafafa;
  position: relative;
  padding: 30px;
  margin-bottom: 20px;
  border: 1px solid #e9e9e9;
}

.demo-title {
  font-size: 18px;
  margin-bottom: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.right-text {
  text-align: right;
}

.description-blocks {
  margin: 30px 0 30px 0;
}

.col-6 {
  float: left;
  width: calc(50% - 10px);
  margin-right:...

JavaScript

const pivot_table_1 = new Flexmonster({
  container: "#pivot-container-1",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 385,
  report: {
    dataSource: {
      type: "json",
      filename: "https://cdn.flexmonster.com/data/dashboad-demo-data.json"
    },
    slice: {
      rows: [
        {
          uniqueName: "Division"
        }
      ],
      columns: [
        {
          uniqueName: "Patient Status"
        },
        {
          uniqueName: "[Measures]"
        }
      ],
      measures: [
        {
          uniqueName: "Treatment Cost",
          aggregation: "sum",
          format: "currency"
        }
      ]
    },
    conditions: [
      {
        formula: "#value < 6000",
        measure: "Treatment Cost",
        aggregation: "sum",
        format: {
          backgroundColor: "#00A45A",
          color: "#fff",
          fontFamily: "Arial",
          fontSize: "12px"
        },
        isTotal: false
      },
      {
        formula: "#value > 12000",
        measure: "Treatment Cost",
        aggregation: "sum",
        format: {
          backgroundColor: "#df3800",
          color: "#fff",
          fontFamily: "Arial",
          fontSize: "12px"
        },
        isTotal: false
      }
    ],
    options: {
      configuratorButton: false,
      drillThrough: false,
      timePattern: "m'h' ss'min'"
    },
    formats: [
      {
        name: "",
        thousandsSeparator: ",",
        decimalSeparator: ".",
        decimalPlaces: 2
      },
      {
        name: "currency",
        currencySymbol: "$"
      }
    ],
    tableSizes: {
      columns: [
        {
          tuple: [],
          measure: {
            uniqueName: "Treatment Cost",
            aggregation: "sum"
          },
          width: 180
        },
        {
          tuple: ["patient status.[inpatient]"],
          measure: {
            uniqueName: "Treatment...