Search results

Header and Content in JavaScript (ES5) Dashboard Layout control

The Dashboard layout component is mostly used to represent the data used for monitoring or managing a process. These data or any HTML template can be placed as the content of a panel using the content property. Also, word or phrase that summarize about the panel’s content can be added as the header on the top of each panel using the header property of the panel.

The following sample demonstrates how to add content for each panel using the header and content properties of the panels.

Source
Preview
index.js
index.html
index.css
// initialize dashboardlayout component
var dashboard  = new ej.layouts.DashboardLayout({
    cellSpacing: [10, 10],
    columns:6,
    panels: [{'id':'Panel0', 'sizeX': 1, 'sizeY': 1,'row': 0, 'col': 0, header:'<div>Panel 0</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel1', 'sizeX': 3, 'sizeY': 2,'row': 0, 'col': 1, header:'<div>Panel 1</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel2', 'sizeX': 1, 'sizeY': 3,'row': 0, 'col': 4, header:'<div>Panel 2</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel3', 'sizeX': 1, 'sizeY': 1,'row': 1, 'col': 0, header:'<div>Panel 3</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel4', 'sizeX': 2, 'sizeY': 1,'row': 2, 'col': 0, header:'<div>Panel 4</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel5', 'sizeX': 1, 'sizeY': 1,'row': 2, 'col': 2, header:'<div>Panel 5</div>', content:'<div class="content">Panel Content<div>'},
    {'id':'Panel6','sizeX': 1, 'sizeY': 1,'row': 2, 'col': 3, header:'<div>Panel 6</div>', content:'<div class="content">Panel Content<div>'}
    ]
});
// render initialized dashboardlayout
dashboard.appendTo('#dashboard_default');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DashboardLayout </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 DashboardLayout Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="container">
            <div id="dashboard_default"></div>
        </div>
        
    

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  margin: 0 auto;
  width: 500px;
}

#dashboard_default .e-panel .e-panel-container .content {
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
  line-height: 100%;
}

.e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
  color: rgba(0, 0, 0, 0.61);
}

.e-panel .e-header-text {
  padding: 12px 0 12px 0;
}

#dashboard .e-panel-container .e-panel-header {
  border-bottom: 1px solid #888383;
}

.e-dashboard-layout.e-control .e-panel:hover {
  border: 0px;
}

.e-dashboard-layout.e-control .e-panel .e-panel-header {
  font-size: 15px;
  font-weight: 500;
  height: 37px;
  padding: 10px;
  vertical-align: middle;
  /* text-align: left; */
  border-bottom: 0.5px solid rgba(0, 0, 0, .125);
}

.e-panel-header {
  padding: 10px;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
}

#dashboard_default .e-panel { 
  transition:none !important; 
}

Placing components as content of panels

In a dashboard, components like the chart, grids, maps, gauge etc. can be used to present a complex data. Any such components can be placed as the panel content by assigning the corresponding component element as the content of the panel.

The following sample demonstrates how to add ej2-chart components as the content for each panel in the dashboard layout component.

Source
Preview
index.js
index.html
index.css
// initialize dashboardlayout component
let dashboard  = new ej.layouts.DashboardLayout({
    cellSpacing: [10, 10],
    columns: 6,
    panels: [{'id':'Panel1', 'sizeX': 3, 'sizeY': 2,'row': 0, 'col': 0, header:'<div class="header"> Product usage ratio </div>', content:'<div id="pie"><div>'},
    {'id':'Panel2', 'sizeX': 3, 'sizeY': 2,'row': 0, 'col': 3, header:'<div class="header"> Last year Sales Comparison </div>', content:'<div id="column"><div>' },
    {'id':'Panel3', 'sizeX': 3, 'sizeY': 2,'row': 0, 'col': 3,  header:'<div class="header"> Mobile browsers usage </div>', content:'<div id="pie1"><div>' },
    {'id':'Panel4', 'sizeX': 3, 'sizeY': 2,'row': 1, 'col': 0, header:'<div class="header"> Sales increase percentage </div>', content:'<div id="line"><div>' }
    ]
});
// render initialized dashboardlayout
dashboard.appendTo('#dashboard_default');

let chartData = [
      { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
      { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
      { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
      { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
      { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
      { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
let chart = new ej.charts.Chart({
    primaryXAxis: {
        valueType: 'Category'
    },
    series:[{
        dataSource: chartData,
        xName: 'month',
        yName: 'sales',
        type: 'Column'
    }],
    height:"162px"
}, '#column');

let lineData = [
     { x: 2013, y: 28 }, { x: 2014, y: 25 },{ x: 2015, y: 26 }, { x: 2016, y: 27 },
    { x: 2017, y: 32 }, { x: 2018, y: 35 },
];
let linechart = new ej.charts.Chart({
    series:[{
        dataSource: lineData,
        xName: 'x', yName: 'y',
        //Series type as line
        type: 'Line'
    }],
    height:"162px"
}, '#line');

let accChart = new ej.charts.AccumulationChart({
    series: [
        {
            dataSource: [{ x: 'TypeScript', y: 13, text: 'TS 13%' }, { x: 'React', y: 12.5, text: 'Reat 12.5%' },{ x: 'MVC', y: 12, text: 'MVC 12%' },{ x: 'Core', y: 12.5, text: 'Core 12.5%' },{ x: 'Vue', y: 10, text: 'Vue 10%' },{ x: 'Angular', y: 40, text: 'Angular 40%' }],
            xName: 'x',
            yName: 'y',
            innerRadius: "20%"
        }],
        tooltip:{enable: true},
        height:"162px"
}, '#pie');

let piechart = new ej.charts.AccumulationChart({
  // Initialize the chart series
        series: [
            {
                dataSource: [
                    { 'x': 'Chrome', y: 37, text: '37%' }, { 'x': 'UC Browser', y: 17, text: '17%' },
                    { 'x': 'iPhone', y: 19, text: '19%' },
                    { 'x': 'Others', y: 4, text: '4%' }, { 'x': 'Opera', y: 11, text: '11%' },
                    { 'x': 'Android', y: 12, text: '12%' }
                ],
                dataLabel: {
                    visible: true, position: 'Inside', name: 'text', font: { fontWeight: '600' }
                },
                radius: '70%', xName: 'x', yName: 'y', name: 'Browser'
            }
        ],
        center: { x: '50%', y: '50%' },
        enableSmartLabels: true,
        height:"162px",
        enableAnimation: false,
        legendSettings: { visible: false },
        // Initialize tht tooltip
        tooltip: { enable: true, format: '${point.x} : <b>${point.y}%</b>' },

}, '#pie1');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DashboardLayout </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 DashboardLayout Component">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-circulargauge/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="container">
            <div id="dashboard_default"></div>
        </div>
        
    

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
  margin: 0 auto;
  width: 600px;
}

.e-dashboard-layout.e-control .e-panel .e-panel-container .e-panel-header {
  color: rgba(0, 0, 0, 0.61);
}

.e-panel .e-header-text {
  padding: 12px 0 12px 0;
}

#dashboard .e-panel-container .e-panel-header {
  border-bottom: 1px solid #888383;
}

.e-dashboard-layout.e-control .e-panel:hover {
  border: 0px;
}

.e-dashboard-layout.e-control .e-panel .e-panel-header {
  font-size: 15px;
  font-weight: 500;
  height: 37px;
  padding: 10px;
  vertical-align: middle;
  /* text-align: left; */
  border-bottom: 0.5px solid rgba(0, 0, 0, .125);
}

.e-panel-header {
  padding: 10px;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
}

.e-dashboard-layout.e-control .e-panel .e-panel-header{
  height:30px
}
.e-dashboard-layout.e-control .e-panel .e-panel-header div{
  text-align: center;
}

.header{
  padding: 5px;
}

.e-panel-content{
  height: 162px;
}

#dashboard_default .e-panel { 
  transition:none !important; 
}