接下来，我们将使用Javascript中Timer()函数来定时访问GetLanguageRank()方法，所以我们需要修改Javascript代码，通过Timer()函数定时调用drawColumnChart()方法，具体实现如下：
<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) + 'https://www.jb51.net/' + dateTime.getDate() + 'https://www.jb51.net/' + 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>
当Google的visualization库加载完毕后，访问回调函数timerStart()，然后使用setInterval()方法每隔1s就调用drawColumnChart()绘制新的柱状图。
图8 柱状图
现在，我们通过Timer()函数实时的访问API接口，数据通过柱状图动态地显示出来。
页面样式
现在，我们已经完成了饼状图和柱状图，接下来，我们需要给仪表程序添加一些简单的CSS效果，具体代码如下：
/*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; }
现在，我们重新运行程序查看页面效果。
图10仪表程序
在本文中，我们通过使用ASP.NET MVC和EF的Database First实现了简单的仪表程序，使用Google Charts控件来显示数据图，这只是一个简单的程序，我们还有很大的改善空间，提供一个内容丰富和功能强大的程序是每个程序员的目标。