ASP.NET MVC實(shí)現(xiàn)儀表程序

!-- Dashboard UI START -->
body>
 div>
  @{ Html.RenderAction("Dashboard_Pie", "DashBoard"); }
 /div>
 div>
  @{ Html.RenderAction("Dashboard_AreaChart", "DashBoard"); }
 /div>
 div>
  @{ Html.RenderAction("Dashboard_ColumnChart", "DashBoard"); }
 /div>
/body>
!-- Dashboard UI END -->

!-- Adds Google js api reference.-->
script type="text/javascript" src="https://www.google.com/jsapi">/script>

script type="text/javascript">
 google.load("visualization", "1", { packages: ["corechart"] });
 google.setOnLoadCallback(drawPieChart);

/script>

/**
* Draws the pie chart.
**/
function drawPieChart() {

 // Gets data from GetLanguageRank().
 $.ajax({
  type: 'GET',
  dataType: 'json',
  url: '%= Url.Content("") %>',
  data: {},
  success: function(data) {
   var dt = new google.visualization.DataTable();

   dt.addColumn('string', 'Language');
   dt.addColumn('number', 'Question');

   // Adds data.
   for (var i = 0; i  data.length; i++) {
    dt.addRow([data[i].Name, data[i].Question]);
   }

   var options = {
    title: "Top 25 programming language"
   };

   // Draws pie implemention.
   var chart = new google.visualization.PieChart(document.getElementById('pieChart'));
   chart.draw(dt, options);
  },
  error: function(xhr, textStatus, e) {
   console.log('Status: ' + textStatus + ' Error: ' + e.toString());
  },
  complete: function() {
  }

 });
}

!-- Pie chart page -->
!DOCTYPE html>
html xmlns="http://www.w3.org/1999/xhtml">
head id="Head1" runat="server">
 meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 title>/title>
/head>
body>
 form id="form2" runat="server">
  div id="pieChart">
  /div>
 /form>
/body>
/html>

/// summary>
/// The language model.
/// /summary>
public class QuestionTag
{
 public int Id { get; set; }
 public string Name { get; set; }
 public int Question { get; set; }
 public DateTime CreateOn { get; set; }
}

/// summary>
/// Gets language rank data.
/// /summary>
/// returns>JSON arrary./returns>
public JsonResult GetLanguageRank()
{
 // Gets data from database.
}

-- =============================================
-- Description: Table for storing question tag data
-- =============================================
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[QuestionTags](
 [Name] [varchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,
 [Question] [int] NOT NULL,
 [CreateOn] [datetime] NOT NULL
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF

-- =============================================
-- Description: Imports csv data into database.
-- =============================================
BULK INSERT QuestionTags
FROM 'C:\Users\Administrator\Desktop\Stackoverflow Tags Data.csv'
WITH
(
 FIRSTROW = 2,   -- Start row excludes header.
 FIELDTERMINATOR = ',', --CSV field delimiter
 ROWTERMINATOR = '\n', --Use to shift the control to next row
 ERRORFILE = 'C:\Users\Administrator\Desktop\ErrorLog.csv'，?
 TABLOCK
)

/// summary>
/// Gets language rank data.
/// /summary>
/// param name="index">Specifies the range of data,
/// for instance, when index is 0, then get the data range from Jan/1/2010 till Feb/2/2010.
/// /param>
/// returns>JSON Array/returns>
public JsonResult GetLanguageRank(int index = 0)
{
 using (var db = new DashboardDbContext())
 {
   var result = (from tags in db.QuestionTags
       orderby tags.CreateOn ascending 
   select new { tags.Id, tags.Name, tags.Question, tags.CreateOn }).Skip((index % 42) * 25).Take(25).ToList();
   return Json(result, JsonRequestBehavior.AllowGet);
 }   
}

script type="text/javascript">
 google.load("visualization", "1", { packages: ["corechart"] });
 google.setOnLoadCallback(timerStart);

 var cnt = 0, t;
 function timerStart() {
  t = window.setInterval(drawColumnChart, 1000);
 }

 function timerStop() {
  clearTimeout(t);
 }

 function drawColumnChart() {

  $.ajax({
   type: 'GET',
   dataType: 'json',
   url: '%= Url.Content("~/Dashboard/GetLanguageRank") %>',
   data: { index: cnt },
   success: function(data) {
    var dt = new google.visualization.DataTable();

    dt.addColumn('string', 'Language');
    dt.addColumn('number', 'Question');

    for (var i = 0; i  data.length; i++) {
     dt.addRow([data[i].Name, data[i].Question]);
    }

    var dateTime = new Date(parseInt(data[0].CreateOn.substr(6)));

    var options = {
    title: "Top 25 programming language on " + 
     (dateTime.getMonth() + 1) + '/' + dateTime.getDate() + '/' + dateTime.getFullYear(),
     //width: 600,
     height: 500
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('columnChart'));
    chart.draw(dt, options);
   },
   error: function(xhr, textStatus, e) {
    timerStop();
    console.log('Status: ' + textStatus + ' Error: ' + e.toString());
   },
   complete: function() {
    cnt = cnt + 1;
   }

  });
 }
/script>

/*Dashboard APP CSS*/
.pageHeader
{
 height: 20px;
 background-color: #2C2C2C;
 padding: 10px 10px;
 margin-bottom: 10px;
 color: White;
 position: relative;
}

 .pageHeader h1
 {
  font: normal 1.2em Arial;
  color: White;
  margin: 0;
  padding: 0;
 }

 .pageHeader .platformular
 {
  position: absolute;
  top: 10px;
  right: 10px;
 }

.pageBody
{
 margin: 0 10px;
}

.pageFooter
{
 clear: both;
 padding-top: 10px;
 width: 100%;
 text-align: center;
 font-size: 0.8em;
 color: #686868;
 margin: 25px 0 0 0;
 border-top: solid 1px #e7e7e7;
}