DashboardLayout Concepts

DashboardLayout is a layout control that allows you to create dynamic dashboards for interactive data visualization. It allows you to organize and present data in a consolidated form with the help of images, grids, charts, maps, etc in different layouts. This makes it easy for you to monitor the presented information.

The DashboardLayout control acts as a container which lets you dynamically place controls within tiles also called child containers. These child containers can be arranged in four different types of layouts supported by the DashboardLayout control i.e. Flow, AutoGrid, ManualGrid and Split. The appropriate layout is attached to the DashboardLayout control to achieve the specific layout. The control lets you resize and rearrange these child containers at runtime to create an ideal workspace.

Being able to choose layouts that fits screen requirements is the core feature of the control. Other built-in features include drag and drop, maximize and restore, and save and load layouts.

KPIs for 2025

Sales:

Expenses:

Profit:

Cost Budgeting for 2025

Countrywise Sales for 2025

Sales Dashboard for 2025

Country

Last 12 Months

Current Year(mil.)

Status

All

$121,464,048,308

$21,609,475,016

Germany

$20,071,426,891

$20,584,065,725

Japan

$20,019,325,723

China

$18,905,204,552

India

$20,274,550,401

Options

allowDrag

allowResize

allowMaximize

allowHide

allowShowAll

// This file locates: "Scripts/Lesson/C1Nav/DashboardLayout.js".
c1.documentReady(function () {
    var dashboardLayout = wijmo.Control.getControl('#dashboardLayout');
 
    // toggle allowDrag property
    document.getElementById('allowDrag').addEventListener('click', function (e) {
        dashboardLayout.allowDrag = e.target.checked;
    });
 
    // toggle allowResize property
    document.getElementById('allowResize').addEventListener('click', function (e) {
        dashboardLayout.allowResize = e.target.checked;
    });
 
    // toggle allowMaximize property
    document.getElementById('allowMaximize').addEventListener('click', function (e) {
        dashboardLayout.allowMaximize = e.target.checked;
    });
 
    // toggle allowHide property
    document.getElementById('allowHide').addEventListener('click', function (e) {
        dashboardLayout.allowHide = e.target.checked;
    });
 
    // toggle allowShowAll property
    document.getElementById('allowShowAll').addEventListener('click', function (e) {
        dashboardLayout.allowShowAll = e.target.checked;
    });
});

using LearnMvcClient.Models;
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Adding
        public ActionResult DashboardLayout()
        {
            return View(new DashboardData());
        }
    }
}

@model DashboardData
 
<h1>
    @Html.Raw(Resources.C1Nav.DashboardLayout_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Nav.DashboardLayout_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.DashboardLayout_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.DashboardLayout_Text3)
</p>
 
@Html.Partial("_DashboardLayoutElements", Model)
@(Html.C1().DashboardLayout().Id("dashboardLayout")
    .AttachAutoGridLayout(aglb=> aglb.MaxRowsOrColumns(3)
    .CellSize(303)
    .Orientation(LayoutOrientation.Vertical)
    .Items(isb =>
    {
        isb.Add().Children(cb =>
        {
            cb.Add().HeaderText(string.Format(Resources.C1Nav.KPIs, Model.SalesDashboardStr))
                .Content("#kpiGauges")
                .RowSpan(1).ColumnSpan(1);
            cb.Add().HeaderText(string.Format(Resources.C1Nav.CostBudget, Model.CostBudgetingStr))
                .Content("#costBudgetingChart")
                .RowSpan(1).ColumnSpan(1);
            cb.Add().HeaderText(string.Format(Resources.C1Nav.Countrywise, Model.CountrywiseSalesStr))
                .Content("#countrywiseSalesChart")
                .RowSpan(1).ColumnSpan(1);
        });
        isb.Add().Children(cb =>
        {
            cb.Add().HeaderText(string.Format(Resources.C1Nav.SalesDashboard, Model.SalesDashboardStr))
                .Content("#salesDashboardFGrid")
                .ColumnSpan(1).RowSpan(1);
        });
    })))
 
<h4>
    Options
</h4>
<div class="options">
    <label for="allowDrag">
        allowDrag
    </label>
    <input id="allowDrag" type="checkbox" checked="checked">
</div>
<div class="options">
    <label for="allowResize">
        allowResize
    </label>
    <input id="allowResize" type="checkbox" checked="checked">
</div>
<div class="options">
    <label for="allowMaximize">
        allowMaximize
    </label>
    <input id="allowMaximize" type="checkbox" checked="checked">
</div>
<div class="options">
    <label for="allowHide">
        allowHide
    </label>
    <input id="allowHide" type="checkbox" checked="checked">
</div>
<div class="options">
    <label for="allowShowAll">
        allowShowAll
    </label>
    <input id="allowShowAll" type="checkbox" checked="checked">
</div>

@using C1.Web.Mvc.Grid;
@using C1.Web.Mvc.Chart;
@using System.Drawing;
@model DashboardData
<style>
    .liContentChart.wj-flexchart {
        min-width: 240px;
        margin: 0px;
        padding: 4px;
        border: none;
        height: 240px;
    }
</style>
 
<script id="last12MonthTemplate" type="text/template">
    @(Html.C1().FlexChart()
        .Height("20px")
        .Width("*")
        .CssStyle("padding", "0px")
        .Legend(Position.None).ChartType(ChartType.Line)
        .ToTemplate()
        .TemplateBind("ItemsSource", "Last12MonthsSales")
        .AxisX(axb => axb.MajorUnit(100).AxisLine(false)
                .MinorGrid(false).Labels(false).Position(Position.None))
        .AxisY(ayb => ayb.AxisLine(false).MinorGrid(false).Labels(false)
                .Position(Position.None))
        .Series(ssb => ssb.Add().Binding("Sales")))
</script>
<script id="statusTemplate" type="text/template">
    @(Html.C1().BulletGraph()
        .Direction(GaugeDirection.Right)
        .ShowRanges(true).Thickness(0.5).Min(0)
        .ToTemplate()
        .TemplateBind("Bad", "BulletGBad")
        .TemplateBind("Target", "BulletGTarget")
        .TemplateBind("Good", "BulletGGood")
        .TemplateBind("Max", "BulletGMax")
        .TemplateBind("Value", "BulletGValue"))
</script>
<div style="position:absolute;left:-10000px; top:-10000px; visibility:hidden">
    @(Html.C1().FlexGrid()
        .Id("salesDashboardFGrid")
        .IsReadOnly(true).AutoGenerateColumns(false)
        .HeadersVisibility(HeadersVisibility.Column)
        .AllowResizing(AllowResizing.None)
        .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row)
        .Bind(Model.SalesDashboardData)
        .Columns(clsb =>
        {
            clsb.Add(cb => cb.Header(Resources.C1Nav.Share_Header1).Binding("Country").Width("*"));
            clsb.Add(cb => cb.Header(Resources.C1Nav.Share_Header2).Width("2*")
                .CellTemplate(ctb => ctb.TemplateId("last12MonthTemplate")));
            clsb.Add(cb => cb.Header(Resources.C1Nav.Share_Header3).Binding("Sales")
                .Format("c0").Width("*"));
            clsb.Add(cb => cb.Header(Resources.C1Nav.Share_Header4).Width("*")
                .CellTemplate(ctb => ctb.TemplateId("statusTemplate")));
        }))
 
    <div id="kpiGauges">
        <div id="kPIsSalesGaugeValue" style="display:inline-block;margin-bottom:8px;text-align:left;width:100%;">
            @Resources.C1Nav.Share_Text1:
        </div>
        @(Html.C1().LinearGauge()
            .Id("kPIsSalesGauge")
            .Min(0)
            .Max(Model.KPIsData.Where(x => x.Country == "All").Select(x => x.Max).FirstOrDefault())
            .Value(Model.KPIsData.Where(x => x.Country == "All").Select(x => x.Sales).FirstOrDefault())
            .ThumbSize(30d)
            .ShowText(ShowText.None)
            .Width("90%")
            .Pointer(rb => rb.Color(Color.Green)))
        <div id="kPIsExpensesGaugeValue" style="display:inline-block;margin:20px 0px 8px 0px;text-align:left;width:100%;">
            @Resources.C1Nav.Share_Text2:
        </div>
        @(Html.C1().LinearGauge()
            .Id("kPIsExpensesGauge")
            .Min(0)
            .Max(Model.KPIsData.Where(x => x.Country == "All").Select(x => x.Max).FirstOrDefault())
            .Value(Model.KPIsData.Where(x => x.Country == "All").Select(x => x.Expenses).FirstOrDefault())
            .ThumbSize(30d)
            .ShowText(ShowText.None)
            .Width("90%")
            .Pointer(rb => rb.Color(Color.Red)))
        <div id="kPIsProfitGaugeValue" style="display:inline-block;margin: 20px 0px 8px 0px;text-align:left;width:100%;">
            @Resources.C1Nav.Share_Text3:
        </div>
        @(Html.C1().LinearGauge()
            .Id("kPIsProfitGauge")
            .Min(0)
            .Max(Model.KPIsData.Where(x => x.Country == "All").Select(x => x.Sales).FirstOrDefault())
            .Value(Model.KPIsData.Where(x => x.Country == "All").Select(x => x.Profit).FirstOrDefault())
            .ThumbSize(30d)
            .ShowText(ShowText.None)
            .Width("90%")
            .Pointer(rb => rb.Color(System.Drawing.Color.Gold)))
 
    </div>
 
    @(Html.C1().FlexChart()
        .Id("monthlySalesChart")
        .CssClass("liContentChart")
        .BindingX("TxnDate")
        .ChartType(ChartType.Line)
        .Legend(Position.Top)
        .Bind(Model.MonthlySalesData)
        .AxisY(ayb => ayb.Title(Resources.C1Nav.Share_Text6).Format("g4,,"))
        .Series(ssb =>
        {
            ssb.Add().Name(Resources.C1Nav.Share_Text1).Binding("Sales");
            ssb.Add().Name(Resources.C1Nav.Share_Text2).Binding("Expenses");
            ssb.AddTrendLine().Name(Resources.C1Nav.Share_Text4).Binding("Sales")
                .SampleCount(200).TrendLineOrder(3)
                .FitType(TrendLineFitType.AverageY);
        })
        .Tooltip(ttb => ttb.Content("<b>{seriesName}</b><br/>{x} {y:c0}"))
        .SupportGestures(sgb => sgb.MouseAction(MouseAction.Zoom)
            .Id("monthlySalesChart_gestures").InteractiveAxes(InteractiveAxes.X)
            .ScaleX(0.5f).ScaleY(0.5f)
            .PosX(0f).PosY(0f))
        .ShowAnimation(ab => ab.AnimationMode(AnimationMode.All)
            .Easing(Easing.Swing).Duration(400)))
 
    @(Html.C1().FlexChart()
        .Id("costBudgetingChart")
        .CssClass("liContentChart")
        .BindingX("Country").ChartType(ChartType.Column)
        .Legend(Position.Top)
        .Bind(Model.CostBudgetingData)
        .AxisY(ayb => ayb.Title(Resources.C1Nav.Share_Text6).Format("g4,,").LogBase(10))
        .Series(ssb =>
        {
            ssb.Add().Name(Resources.C1Nav.Share_Text5).Binding("Budget");
            ssb.Add().Name(Resources.C1Nav.Share_Text2).Binding("Expenses");
        })
        .Tooltip(ttb => ttb.Content("<b>{seriesName}</b><br/>{x} {y:c0}")))
 
    @(Html.C1().FlexChart()
        .Id("countrywiseSalesChart")
        .CssClass("liContentChart")
        .BindingX("Country")
        .ChartType(ChartType.Bar)
        .Legend(Position.Top)
        .Bind(Model.CountrywiseSalesData)
        .AxisY(ayb => ayb.Title(Resources.C1Nav.Share_Text6).Format("g4,,"))
        .Series(ssb =>
        {
            ssb.Add().Name(Resources.C1Nav.Share_Text1).Binding("Sales");
            ssb.Add().Name(Resources.C1Nav.Share_Text2).Binding("Expenses");
        })
        .Tooltip(ttb => ttb.Content("<b>{seriesName}</b><br/>{x} {y:c0}"))
        .ShowAnimation(ab => ab.AnimationMode(AnimationMode.All)
            .Easing(Easing.Swing).Duration(400)))
</div>