首页 > 代码库 > MVC3_Chart_WebGrid
MVC3_Chart_WebGrid
Demo_Chart_WebGrid
Recently, a demo to design a table and images to display some important data.
In this day, some errors had faced and solved.
Use WebGrid to dispaly the records of table. Use Chart Class to display image.
There are no enough blogs that are complete and accurate，may are outdate or use old tech.
Ok Start Now!
Two Part:
(1) design a table for test, create a view or procedure and input some records for test.
(2) use the view or procedure of the database, design a image by the class of chart and display all the data by the help of WebGrid.
Note: the Part(1) designed is to test and you can use the same method in the database of you computer or server.
In this demo use the view of database,and you can use procedure too.
Part(1) Database
1.Oracle SQL Developer
1.1 USE THE URSR SCOTT,CREATE TABLE METRICS and input some data (ID IS PK), you can copy them from the PR_SUM.XLS,you can copy them.
| ID | STR_YEAR_MONTH | NCDR | baseline | cumulative | target | cumulativetarget |
| 1 | 2014/1/1 | 78 | 72 | 78 | 99 | 99 |
| 2 | 2014/2/1 | 65 | 89 | 143 | 99 | 198 |
| 3 | 2014/3/1 | 79 | 79 | 222 | 99 | 296 |
| 4 | 2014/4/1 | 80 | 84 | 302 | 99 | 395 |
| 5 | 2014/5/1 | 68 | 98 | 370 | 99 | 494 |
| 6 | 2014/6/1 | 48 | 93 | 418 | 99 | 593 |
| 7 | 2014/7/1 | 80 | 80 | 498 | 99 | 691 |
| 8 | 2014/8/1 | 69 | 99 | 790 | ||
| 9 | 2014/9/1 | 100 | 99 | 889 | ||
| 10 | 2014/10/1 | 124 | 99 | 988 | ||
| 11 | 2014/11/1 | 88 | 99 | 1086 | ||
| 12 | 2014/12/1 | 74 | 99 | 1185 |
note:PK id, create a PK,avoid some warning from VS on ODAC.
1.2 Open the METRICS input the data and ensure it.(Data use to test)
associate the record from XLs and table of database ,there are 7 items
test them, if success,you can do next,because the data that you have input them into table now.
And have a see ensure it.
1.3 Use the ROLE OF SYSDBA TO CREATE VIEW and Scheme（方案）：SCOTT , VIEW_SUM
advice: use VIEW or PROCEDURE are not table,because use virtual can do more safe Query and much more effects.
2.MVC+ORACLE+ODAC(use the view of database )
note:Now,you can create a database Context to do much things,it‘s easy.
use the database context to display the all records by the view of databse.
in the HomeController.cs In the HomeController, the Action Index
1 using MvcMetrics.DAL; 2 3 using System.Web.Helpers; 4 5 6 7 //database Context 8 9 private MetricsEntities db = new MetricsEntities();10 11 12 13 14 15 16 17 public ActionResult Index()18 19 {20 21 //ViewBag.Message = "Welcome to ASP.NET MVC!";22 23 //use VIEW from database24 25 var records = db.VIEW_SUM.ToList();26 27 28 29 var grid = new WebGrid(30 31 source: records,32 33 fieldNamePrefix: "grid_",34 35 defaultSort: "RELEASEDATE",// the way of sort36 37 canPage: true,38 39 canSort: true,40 41 ajaxUpdateContainerId: "DivGrid", // ajaxUpadate bind42 43 pageFieldName: "paging",44 45 sortDirectionFieldName: "RELEASEDATE",46 47 rowsPerPage: 4 //per page the count of records48 49 );50 51 return View(grid);52 53 54 55 }
In the view of Index,you can see that
@{ ViewBag.Title = "Home Page";} <h2>@ViewBag.Message</h2><p> To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.</p>Change it.
1 @model WebGrid 2 3 4 5 @{ 6 7 ViewBag.Title = "Test"; 8 9 }10 11 12 13 <div id="DivGrid">14 15 @Model.GetHtml(16 17 columns: @Model.Columns(18 19 @Model.Column("ID", "NO"),20 21 @Model.Column("STR_YEAR_MONTH", format: @<i>@item.STR_YEAR_MONTH</i>, canSort: false),22 23 @Model.Column("NCDR", "NCDR", format: @<b><i>@item.NCDR</i></b>, canSort: false),24 25 @Model.Column("baseline", format: @<i>@item.baseline</i>, canSort: false),26 27 @Model.Column("cumulative",format: @<i>@item.cumulative</i>, canSort: false),28 29 @Model.Column("target", format: @<i>@item.target</i>, canSort: false),30 31 @Model.Column("cumulativetarget", format: @<i>@item.cumulativetarget</i>, canSort: false)),32 33 tableStyle: "grid", headerStyle: "headerStyle1",34 35 selectedRowStyle: "selectedRowStyle",36 37 caption: "List METRICS_DATA Table",38 39 displayHeader: !IsPost,40 41 fillEmptyRows: !IsPost,42 43 emptyRowCellValue: "",44 45 mode: WebGridPagerModes.All,46 47 firstText: "First",48 49 previousText: "Previous", nextText: "Next",50 51 lastText: "Last"52 53 54 55 )56 57 </div>58 59 <h3>60 61 Page Count:62 63 @Html.Encode(@Model.PageCount)64 65 <br/>66 67 Total Record:68 69 @Html.Encode(@Model.TotalRowCount)70 71 </h3>
Note: @model WebGrid, Declare variables the you will use.
now,you can run it,and see the record from table（Metric）
In Controller， you can create a WebGird，and set items,and others, return the WebGrid to View(MVC).
In View of MVC, you can get WebGrid and display the records.
In the Models ,add a class of member
1 public string Date { get; set; }2 3 public double Value { get; set; }
In the HomeController, add this Action
Firstly, add reference System.Web.DataVisualization.
using MvcMetrics.Models;using System.Web.UI.DataVisualization.Charting;using System.IO; public FileResult GetChart() { //NCDR,baseline,cumulative,target,cumulativetarge //We use target make the scale of X and Y //use VIEW of database,get the all records var records = db.VIEW_SUM.ToList(); List<double> dataNCDR = new List<double>();//NCDR List<double> databaseline = new List<double>();//baseline List<double> datacumulative = new List<double>();//cumulative List<Member> datatarget = new List<Member>();//target, X and Y List<double> datacumulativetarget = new List<double>();//cumulativetarget //spefical null,get the data for NCD,baseline,cumulative,target,cumulativetarge foreach (var record in records) { //note : the start is not null,so can deal with it in this way if (record.NCDR != null) dataNCDR.Add((double)record.NCDR); databaseline.Add((double)record.BASELINE); if (record.CUMULATIVE != null) datacumulative.Add((double)record.CUMULATIVE); //Member.Data is the X scale, Member.Value is the Y scale,the important is X scale Member temp = new Member() { Date = record.STR_YEAR_MONTH, Value = http://www.mamicode.com/(double)record.TARGET };"NCDR Test MVC", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold),System.Drawing.Color.FromArgb(26, 59, 105)); Chart1.Titles.Add(t);//add Title of Chart1 //create a area of Chart1,use "Series 1" or others. Chart1.ChartAreas.Add("Series 1"); //set Coordinate axis intervals Of X = 1 Chart1.ChartAreas[0].AxisX.Interval = 1; Chart1.ChartAreas[0].AxisX.IntervalOffset = 1; //the scale of X display in one line or two line when it >= 9 Chart1.ChartAreas[0].AxisX.LabelStyle.IsStaggered = false; //change the x display Angle Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 45; //add Series, five . the "Series 6" is used to make other effect Chart1.Series.Add("Series 1"); Chart1.Series.Add("Series 2"); Chart1.Series.Add("Series 3"); Chart1.Series.Add("Series 4"); Chart1.Series.Add("Series 5"); Chart1.Series.Add("Series 6");//make other effect //test，in one Chart, Column 1 and Line 4 Chart1.Series["Series 1"].ChartType = SeriesChartType.Column;//StackedColumn Column Chart1.Series["Series 2"].ChartType = SeriesChartType.Line; Chart1.Series["Series 3"].ChartType = SeriesChartType.Line; Chart1.Series["Series 4"].ChartType = SeriesChartType.Line; Chart1.Series["Series 5"].ChartType = SeriesChartType.Line; ////make other effect Chart1.Series["Series 6"].ChartType = SeriesChartType.Point; // display the value of the Point Chart1.Series["Series 3"].IsValueShownAsLabel = true; Chart1.Series["Series 5"].IsValueShownAsLabel = true; //DataBindXY() ,X scale,Y scale,use datatarget,"Series 4" Chart1.Series["Series 4"].Points.DataBindXY(datatarget, "date", datatarget, "value"); //make Chart foreach (double value in dataNCDR) { Chart1.Series["Series 1"].Points.AddY(value); } foreach (double value in databaseline) { Chart1.Series["Series 2"].Points.AddY(value); } foreach (double value in datacumulative) { //double effects use the "Series 3" and "Series 6" Chart1.Series["Series 3"].Points.AddY(value); Chart1.Series["Series 6"].Points.AddY(value); } foreach (double value in datacumulativetarget) { Chart1.Series["Series 5"].Points.AddY(value); } //NCDR,baseline,cumulative,target,cumulativetarge Chart1.Series["Series 1"].Name = "NCDR"; Chart1.Series["Series 2"].Name = "baseline"; Chart1.Series["Series 3"].Name = "cumulative"; Chart1.Series["Series 4"].Name = "target"; Chart1.Series["Series 5"].Name = "cumulativetarge"; //the "Series 6" do not displey in the Legend Chart1.Series["Series 6"].IsVisibleInLegend = false; //X Title Chart1.ChartAreas[0].AxisX.Title = "Date"; Chart1.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Anonymous Pro", 10, System.Drawing.FontStyle.Regular); //Y Title Chart1.ChartAreas[0].AxisY.Title = "Value"; Chart1.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Anonymous Pro", 10, System.Drawing.FontStyle.Regular); //x Major Line Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false; Chart1.ChartAreas[0].BorderDashStyle = ChartDashStyle.Solid; //设置chartareas区域的边框样式 //Border the style of Border Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss; Chart1.BorderlineWidth = 2; Chart1.BorderColor = System.Drawing.Color.Black; Chart1.BorderlineDashStyle = ChartDashStyle.Solid; Chart1.BorderWidth = 2; //the location of Legend Legend legend1 = new Legend(); legend1.Docking = Docking.Top; legend1.Alignment = System.Drawing.StringAlignment.Center; Chart1.Legends.Add(legend1); //IO MemoryStream imageStream = new MemoryStream(); Chart1.SaveImage(imageStream, ChartImageFormat.Png); imageStream.Position = 0; return new FileStreamResult(imageStream, "image/png"); }in index.cshtml，add
<div> <img src="http://www.mamicode.com/Home/GetChart" alt="Chart" /></div>
the Chart you can read it from code,enough comments can display the effect of all.
Chart, ChartArea,Series ,Legend, that you can set and make nice images.
At last, the IO (MemoryStream and FileStream ,ImageStream ) that are usually used to display image.
Run,Result:
