MVC 6 Project from Scratch

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Http;
using Microsoft.Framework.DependencyInjection;

namespace WebApplication1
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }

        public void Configure(IApplicationBuilder app)
        {
             app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action}/{id?}",
                    defaults: new { controller = "Home", action = "Index" });
            });
        }
    }
}


Courtesy: SpaProgrammer.com

Advertisements

Feature comparison between various Chart & Graph tools

HighCharts

  • Free for non-commercial
  • Very very rich & interactive examples.
  • Documentation is awesome.
  • Perhaps, easy to use.
  • I haven’t use it yet. But I think I should strongly recommend it.

Chart.js

  • Free
  • Rich examples
  • Very good documentation.
  • Easy to use.
  • I recommend it. Personally I used it in a project and feel happy.

Flot

  • Free
  • Examples are not rich.
  • Documentation is not fully featured. Difficult for novish.
  • But it has robust capabilities.

CanvasJs

  • Free for non-commercial, An attribution link is displayed to the bottom right of the chart.

JQuery SparkLines

  • Tiny chart

Line Chart With Chart.js

We are going to plot a line chart as follows-

chartjs line chart

I choosed chart.js for this task. This type of chart is easy with chart.js. It’s free also.

Here is the client-side code:

 <canvas id="canvas" height="85"></canvas>
<script>
    
    //array variable to hold the x-axis label
    var chartLabels = []; 

    //Data can be sent from server as DataTable or List<T> or simply an array.
    //I'm sending here a string[].
    //Iterate the source to populate the chart label array.
    @foreach(var label in ViewBag.ChartLabel)
    {
       <text>
           chartLabels.push('@label');
       </text>
    }
    //or, var chartLabels = @Html.Raw(Json.Encode(ViewBag.ChartLabel));

    //array variable to hold the data for 1st line (top most)
    var line1 = [];

    //Data can be sent from server as DataTable or List<T> or simply an array.
    //I'm sending here an int[].
    //Iterate the source to populate the line1 array.
    @foreach (var item in ViewBag.Data1)
    {
       <text>
          line1.push(@item);
       </text>
    }
    //or, var line1 = @Html.Raw(Json.Encode(ViewBag.Data1));


    //array variable to hold the data for 2nd line (bottom most)
    var line2= [];

    //Data can be sent from server as DataTable or List<T> or simply an array.
    //I'm sending here an int[].
    //Iterate the source to populate the line2 array.
    @foreach (var item in ViewBag.Data2)
    {
       <text>
            line2.push(@item);
       </text>
    }
    //or, var line2 = @Html.Raw(Json.Encode(ViewBag.Data2));
 
   //=========================================================================
    Note: The following can be used in stead of the above foreach loops 
    var labels = @Html.Raw(Json.Encode(ViewBag.ChartLabel));
    //=========================================================================

    //This is default instruction from chart.js
    var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
    

    var lineChartData = 
    {
       labels: chartLabels,
       datasets:
       [
          {
             label: "My First dataset",
             fillColor: "rgba(151,187,205,0.2)",
             strokeColor: "rgba(151,187,205,1)",
             pointColor: "rgba(151,187,205,1)",
             pointStrokeColor: "#fff",
             pointHighlightFill: "#fff",
             pointHighlightStroke: "rgba(151,187,205,1)",
             data: line1
         },
         {
            label: "My Second dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: line2
         }
         //More datasets can be added here. That will draw another line.
       ]
    }

    window.onload = function () 
    {
       var ctx = document.getElementById("canvas").getContext("2d");
       window.myLine = new Chart(ctx).Line(lineChartData, {
       responsive: true
       });
    }
</script>

Get Hourly Data from SQL Server DateTime Field


SELECT DATEPART(dd, SurveyorActivityDateTime) AS myday, 
       DATEPART(hh, SurveyorActivityDateTime) AS myhour, 
       Count(RetailerId) AS Quantity
FROM [RobiPosMapping].[dbo].[Retailer]
WHERE CAST(SurveyorActivityDateTime AS DATE) = '2015-06-04'
GROUP BY DATEPART(dd, SurveyorActivityDateTime), 
         DATEPART(hh, SurveyorActivityDateTime)