Flexmonster - Dashboard

Demos

by cbutton

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
	<button id="printAll">Print All</button>
<div id="page1">
  <div class="row">
    <div class="title">Sales Trend</div>
    <div id="pivot-container-1"></div>
  </div>
</div>
<div id="page2">
  <div class="row">
    <div class="col">
      <div class="title">Sales by Category</div>
      <div id="pivot-container-2"></div>
    </div>
    <div class="col" style="float:right">
      <div class="title">Sales by Region</div>
      <div id="pivot-container-3"></div>
    </div>
  </div>
  <div class="row">
    <div class="title">Sales Data</div>
    <div id="pivot-container-4"></div>
  </div>
</div>

CSS

@media screen {
  #page2 {
    display: none;
  }
}
@media print {
  #page2, #printAll {
    display: initial;
  }
}
    
    
.title {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 15px;
}

.col {
  width: 49%;
  display: inline-block;
}

JavaScript

document.getElementById('printAll').onclick=function(){
			window.print();
		};
    
new Flexmonster({
  container: "#pivot-container-1",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "Date.Year"
      }],
      columns: [{
        uniqueName: "[Measures]"
      }],
      measures: [{
        uniqueName: "Price"
      }],
    },
    options: {
      viewType: "charts",
      configuratorActive: false,
      configuratorButton: false,
      chart: {
        type: "line",
        showMeasures: false,
        showFilter: false,
      }
    }
  },
  height: 220
});

new Flexmonster({
  container: "#pivot-container-2",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "[Measures]"
      }],
      columns: [{
        uniqueName: "Category"
      }],
      measures: [{
        uniqueName: "Price"
      }],
    },
    options: {
      viewType: "charts",
      configuratorActive: false,
      configuratorButton: false,
      chart: {
        type: "column",
        showMeasures: false,
        showFilter: false,
      }
    }
  },
  height: 220
});

new Flexmonster({
  container: "#pivot-container-3",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },
    slice: {
      rows: [{
        uniqueName: "[Measures]"
      }],
      columns: [{
        uniqueName: "Region"
      }],
      measures: [{
        uniqueName: "Price"
      }],
    },
    options: {
      viewType: "charts",
      configuratorActive: false,
      configuratorButton: false,
      chart: {
        type: "column",
        showMeasures: false,
        showFilter: false,
      }
    }
  },
  height: 220
});

new Flexmonster({
  container:...