Saturday, January 16, 2016

ASP.NET MVC Sales Dashboard Demo Application

As I was doing some research on chart controls to be integrated in ASP.NET MVC, I found a working from Shield UI which is MVC 4 regarding Sales Dashboard. As I was running the application to the browser, only the left container shows the chart.
The right and bottom part does not show anything. It seems the remaining chart samples will be manually shown to the browser by entering the correct URL. To solve this, I added a ViewModel class, modified the HTML markup in the Index view and modified the codes in Home Controller. See updates below:

SalesDashboardViewModel.cs
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace SalesDashboardMVC.Models
{
    public class SalesDashboardViewModel
    {
        public IEnumerable<QuarterlySales> Quarterly_Sales { get; set; }
        public IEnumerable<SalesByProduct> Sales_By_Products { get; set; }
        public IEnumerable<PerformanceData> Performance_Data { get; set; }        
    }
}

Home Controller
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
public class HomeController : Controller
    {
        private SalesDashboardViewModel modelSalesDashboard;
 
        public ActionResult Index()
        {
            modelSalesDashboard = new SalesDashboardViewModel();
            modelSalesDashboard.Quarterly_Sales = QuarterlySales.GetData();
            modelSalesDashboard.Performance_Data = PerformanceData.GetDataByQuarter("Q1");
            modelSalesDashboard.Sales_By_Products = SalesByProduct.GetDataByProductAndQuarter("Men", "Q1");
 
            return View(modelSalesDashboard);
        }}

Index View
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
@model SalesDashboardMVC.Models.SalesDashboardViewModel
 
<div class="dashboard">
    <div class="header">        
        Sales DashBoard using <span class="highlight">Shield UI ASP.NET Chart</span>        
    </div>
    <div class="topleft">
        @(Html.ShieldChart(Model.Quarterly_Sales)
            .Name("quarterlySales")
            .HtmlAttribute("class", "chart")
            .PrimaryHeader(header => header.Text("Quarterly Sales"))
            .Export(false)
            .Tooltip(tooltip => tooltip.CustomPointText("Sales Volume: <b>{point.y}</b>"))
            .AxisX(axisX => axisX.CategoricalValues(model => model.Quarter))
            .AxisY(axisY => axisY.Title(title => title.Text("Quarterly Overview")))
            .DataSeries(dataSeries => dataSeries
                .Bar()
                .Data(model => model.Sales)
                .EnablePointSelection(true))
            .ChartLegend(chartLegend => chartLegend
                .Align(Shield.Mvc.UI.Chart.Align.Center))
            .Events(events => events.PointSelect("app.quarterSelected")))
    </div>
    <div class="topright">
         @(Html.ShieldChart(Model.Performance_Data)
            .Name("productsByQuarter")
            .HtmlAttribute("class", "chart")
            .Export(false)
            .PrimaryHeader(header => header.Text("Select a Quarter to show products sales"))
            .AxisY(axisY => axisY.Title(title => title.Text("Break-Down for selected quarter")))
            .DataSeries(dataSeries => dataSeries
                .Donut()
                .Name("Q Data")
                .Data(model => new
                {
                    collectionAlias = model.Product,
                    x = model.Product, 
                    y = model.Data,
                })
                .EnablePointSelection(true)
                .AddToLegend(true))
            .ChartLegend(chartLegend => chartLegend.Align(Shield.Mvc.UI.Chart.Align.Center))
            .Events(events => events.PointSelect("app.productSelected")))      
      
    </div>
    <div class="bottom">  
         @(Html.ShieldChart(Model.Sales_By_Products)
            .Name("salesDetails")
            .HtmlAttribute("class", "chart")
            .PrimaryHeader(header => header.Text("Select a product to show sales details"))
            .Export(false)
            .DataSeries(dataSeries => dataSeries
                .Line()
                .Data(model => model.QuarterSales)
                .AddToLegend(false)))
    </div>
</div>

Screenshot:
Original Sample Code and Article Here: ASP.NET MVC Sales Dashboard Application

Greg Esguerra

0 comments:

Post a Comment