Free Web Development Online Tutorials, Learn to Code
How to build data analytics in mvc application, data visualization in C# example

Data Analysis using MVC example

Analytics has been an important component for all type of business applications, so, as an developer you may have a question, like can we build analytics using! the answer is, yes! has been evolved drastically, especially if we look at core framework, using latest features of core we can build anything that any modern web application demands, there are many plug-in and libraries for developing analytics in mvc application.

Data visualization in framework

There are many in-built capabilities in mvc framework for developing analytics with data visualization, and then there are plenty of third-party component like dundas chart etc, which allow us to create excellent data visualization capabilities.

Here are some examples from our real-time product development experience, which will help you to understand what type of simple analytics can help business owner to make decision, and you as business consultant should consider enhance as product features.

Product Popularity Analysis

product popularity analysis

This analytics is the combination of raw data and data visualization that will give a quick understanding of which products are more popular and potential buyers are clicking often, the data may help product owner to bring more variation of same product or thinking of putting more competitive price structure, so that sales volume can increase.

Lead Analysis

lead analysis

Generating quality lead is always tough, and there are various stages before any lead finally get converted to sales, the above analytics will tell business owner which are different lead source are more fruitful, which are the industry are generating more successful business etc.

Now if you notice in above two examples, one common thing is dataset, first we need to prepare the dataset with all required columns, make sure you keep all important columns first, which can be visible at first appearance, other column values can be displayed when user click on detail view or expand the report.

Here are two most efficient ways you can create data source.

  • Create data source using dataset or datatable object.
  • Creating data source from sql view in linq query or in object.

We can create chart using chart component in, there are various methods like AddSeries, AddLegend, Write etc which allow you to customise your chart, you also can select the right chartType depending on how you want the chart!

public ActionResult chart_productGeoPopularity()
var results = from p in _AdminService.GetVisitor(200)
group p by p.Region
into g
select new
rowKey = g.Key,
TotalCount = g.ToList().Count
string[] xArray = results.Select(s => s.rowKey).ToArray();
int[] yVisitCount = results.Select(p => p.TotalCount).ToArray();

        var grafico = new Chart(width: 310, height: 330);
        grafico.AddTitle("Last 200 Visit Geo Report " + @DateTime.Now.ToShortDateString())
        name: "Geo",
        axisLabel: "Region",
        chartType: "Pyramid",
        xValue: xArray,
        yValues: yVisitCount)
        .AddLegend("GEO Popularity", "Region")
        return null;

You can add multiple series in any chart, apart from one x-axis, all series can be added in y-axis, finally the Write method will create the image using the specified data.

string[] xArray = results.Select(s => s.rowKey.VisitDateTime.ToString("dd-MM")).ToArray();
long[] yProduct = results.Select(p => p.rowKey.ProductId).Cast<long>().ToArray();
long[] yCategory = results.Select(p => p.rowKey.CategoryId).Cast<long>().ToArray();
long[] yProductType = results.Select(p => p.rowKey.SubCategoryId).Cast<long>().ToArray();

var grafico = new Chart(width: 580, height: 330)
.AddTitle("Last 200 Product Visit Report - " + @DateTime.Now.ToShortDateString())
chartType: "Spline",
name: "Product",
axisLabel: "Product",
xValue: xArray,
yValues: yProduct)

            chartType: "Spline",
        name: "Category",
        axisLabel: "Category",
        xValue: xArray,
        yValues: yCategory)

.AddLegend("Popularity Indicator", "Yellow")

The above piece of code was written in .net framework 4.7.2 version, with new version and in .net core you probably find lot more additional features and functionality of chart component, and in nuget there are many additional chart component available, which will allow you to create different type of data visualization.

The new chart component will allow you to bind data source directly with chart instance in your razor page, like example below.

var data = db.Query("SELECT Name, Price FROM Product");
var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Product Sales")
        .DataBindTable(dataSource: data, xField: "Name")

There are also some paid and highly customizable charting component for mvc application like Canvasjs, Dundas chart, Telerik etc.

You should also read following posts

You may also read
Best web designing technologies and best practice
web designing technologies
NUnit Testing C# Tutorial
NUnit Testing Tutorial C#
How to Check Website Traffic and Optimize Website
How to Check Website Traffic