Flexmonster - Dashboard

Demos

by Ravi A

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/flexmonster/2.3/demo.css">
<script src="https://cdn.flexmonster.com/flexmonster.js"></script>

<div class="row">
  <div class="title">Sales Data</div>
  <div id="pivot-container-4"></div>
</div>

CSS

.title {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 5px;
  font-size: 15px;
}

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

JavaScript

new Flexmonster({
  container: "#pivot-container-4",
  componentFolder: "https://cdn.flexmonster.com/",
  report: {
    dataSource: {
      dataSourceType: "json",
      data: getData()
    },slice: {
        rows: [
            {
                "uniqueName": "Category"
            },
            {
                "uniqueName": "Color"
            },
            {
                "uniqueName": "Business Type"
            },
            {
                "uniqueName": "Region"
            }
        ],
        columns: [
            {
                "uniqueName": "[Measures]"
            }
        ],
        measures: [
            {
                "uniqueName": "Price",
                "aggregation": "sum"
            },
            {
                "uniqueName": "Quantity",
                "aggregation": "sum"
            },
            {
                "uniqueName": "Discount",
                "aggregation": "sum"
            }
        ],
        expands: {
            rows: [
                {
                    tuple: [
                        "category.[accessories]",
                        "color.[green]"
                    ]
                },
                {
                    tuple: [
                        "category.[accessories]",
                        "color.[green]",
                        "business type.[value added reseller]"
                    ]
                },
                {
                    tuple: [
                        "category.[accessories]",
                        "color.[green]",
                        "business type.[warehouse]"
                    ]
                }
            ]
        }
    },
    options: {
      viewType: "charts",
      configuratorActive: false,
      configuratorButton: false,
      grid: {
        type: "classic",
        showFilter: false,
      },
      chart:{
      type:"column_line"
      }
    }
  },
  toolbar: true,
  height: 400
});

function getData() {
  return [{
   ...