Setting header of panels in JavaScript Dashboard Layout control
18 Nov 201818 minutes to read
The Dashboard Layout control is primarily used to represent data for monitoring or managing processes. Data or any HTML template can be placed as the panel content of a panel using the content property. A word or phrase summarizing 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 shown how to add content for each panel using the header and content properties of the panels.
// initialize Dashboard Layout control
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 Dashboard Layout
dashboard.appendTo('#dashboard_default');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Dashboard Layout </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Dashboard Layout Control">
<meta name="author" content="Syncfusion">
<link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/34.1.29/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/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>
<style>
#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;
}
</style>
</body>
</html>Placing controls as content of panels
Controls such as charts, grids, maps, and gauges can present complex data in a dashboard. These controls can be used as panel content by assigning the corresponding control element to the contentproperty of the panel.
The following sample demonstrates how to add EJ2 Chart controls as the content for panels in the Dashboard Layout control.
// initialize Dashboard Layout control
var 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 Dashboard Layout
dashboard.appendTo('#dashboard_default');
var 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 }
];
var chart = new ej.charts.Chart({
primaryXAxis: {
valueType: 'Category'
},
series: [{
dataSource: chartData,
xName: 'month',
yName: 'sales',
type: 'Column'
}],
height: "162px"
}, '#column');
var 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 },
];
var linechart = new ej.charts.Chart({
series: [{
dataSource: lineData,
xName: 'x', yName: 'y',
//Series type as line
type: 'Line'
}],
height: "162px"
}, '#line');
var 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');
var 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 Dashboard Layout </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Essential JS 2 Dashboard Layout Control">
<meta name="author" content="Syncfusion">
<link href="//cdn.syncfusion.com/ej2/32.1.19/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/32.1.19/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/32.1.19/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/32.1.19/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/32.1.19/ej2-circulargauge/styles/bootstrap5.3.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/34.1.29/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>
<style>
#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;
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;
}
</style>
</body>
</html>Refer to the JavaScript Dashboard Layout feature tour page for its groundbreaking feature representations. Also explore our JavaScript Dashboard Layout example to knows how to present and manipulate data.