How to use chart controls in asp.net mvc-practical tips

Microsoft has released a powerful ASP.net chart control that supports rich chart option settings-including columns, dots, bubbles, pie charts, doughnut charts, pyramids, funnels, box diagrams, area, range, Ajax interactions, and more. The Microsoft Chart Control Sample project includes more than 200 chart samples for asp.net pages. In this article, I'll show you how to use the chart control in ASP.net mvc.

Here is a very simple project that shows a comparison of the results of a class. Two fields-ID (this is the only one student) and GPA (average score)-represents a particular student's results. A variety of chart results show that students ' results are compared. I want to focus on how to easily display the same data with different results. In this project, you can add, edit, and delete student scores, and dynamically show changes.

To run this project, you must install the following Microsoft Chart control components for Microsoft Net Framework 3.5 .

Code to start, you will need to refer to the System.Web.UI.DataVisualization assembly .

Once you do this, it is quite a few simple charts added to the View page.

 "alt=" "/>

First, you define a controller that provides the following methods for implementing

#region Chart Component public fileresult createchart (Seriescharttype charttype) {ilist<resultmodel> peoples = 
_resultservice.getresults (); 
Chart Chart = new Chart (); Chart. 
Width = 700; Chart. 
Height = 300; Chart. 
BackColor = Color.FromArgb (211, 223, 240); Chart. 
Borderlinedashstyle = Chartdashstyle.solid; Chart. 
Backsecondarycolor = Color.White; Chart. 
Backgradientstyle = Gradientstyle.topbottom; Chart. 
Borderlinewidth = 1; Chart. 
Palette = Chartcolorpalette.brightpastel; Chart. 
Borderlinecolor = Color.FromArgb (26, 59, 105); Chart. 
Rendertype = rendertype.binarystreaming; Chart. 
Borderskin.skinstyle = Borderskinstyle.emboss; Chart. 
antialiasing = Antialiasingstyles.all; Chart. 
textantialiasingquality = Textantialiasingquality.normal; Chart. 
Titles.add (Createtitle ()); Chart. 
Legends.add (Createlegend ()); Chart. 
Series.add (Createseries (Peoples,charttype)); Chart. 

Chartareas.add (Createchartarea ()); 
MemoryStream ms = new MemoryStream (); Chart. 
SaveImage (MS); Return File (MS. 
GetBuffer (), @ "Image/png"); 
[Nonaction] public title Createtitle () {title title = new Title (); Title. 
Text = "Result Chart"; Title. 
Shadowcolor = Color.FromArgb (32, 0, 0, 0); Title. 
Font = new Font ("Trebuchet MS", 14F, FontStyle.Bold); Title. 
Shadowoffset = 3; Title. 

ForeColor = Color.FromArgb (26, 59, 105); 
return title; 
[nonaction] public Legend createlegend () {Legend Legend = new Legend (); Legend. 
Name = "Result Chart"; Legend. 
docking = Docking.bottom; Legend. 
Alignment = Stringalignment.center; Legend. 
BackColor = color.transparent; Legend. 
Font = new Font (new FontFamily ("Trebuchet MS"), 9); Legend. 

Legendstyle = Legendstyle.row; 
Return legend; [nonaction] public Series createseries (ilist<resultmodel> results, Seriescharttype charttype) {Series Series 
Detail = new Series (); 
Seriesdetail.name = "Result Chart"; 
Seriesdetail.isvalueshownaslabel = false; 
Seriesdetail.color = Color.FromArgb (198, 99, 99); 
Seriesdetail.charttype = ChartType; SerieSdetail.borderwidth = 2; 
seriesdetail["Drawingstyle"] = "Cylinder"; 
seriesdetail["Piedrawingstyle"] = "Softedge"; 

DataPoint Point; 
foreach (Resultmodel result in results) {point = new DataPoint (); Point. 
Axislabel =result.id; Point. Yvalues = new double[] {double. Parse (result. 
GPA)}; 
SERIESDETAIL.POINTS.ADD (point); 

} Seriesdetail.chartarea = "Result Chart"; 
return seriesdetail; 
[nonaction] public ChartArea Createchartarea () {ChartArea ChartArea = new ChartArea (); 
Chartarea.name = "Result Chart"; 
Chartarea.backcolor = color.transparent; 
ChartArea.AxisX.IsLabelAutoFit = false; 
ChartArea.AxisY.IsLabelAutoFit = false; 
ChartArea.AxisX.LabelStyle.Font = new Font ("Verdana,arial,helvetica,sans-serif", 8F, Fontstyle.regular); 
ChartArea.AxisY.LabelStyle.Font = new Font ("Verdana,arial,helvetica,sans-serif", 8F, Fontstyle.regular); 
ChartArea.AxisY.LineColor = Color.FromArgb (64, 64, 64, 64); 
ChartArea.AxisX.LineColor = Color.FromArgb (64, 64, 64, 64); Chartarea.axisy.mAjorgrid.linecolor = Color.FromArgb (64, 64, 64, 64); 
ChartArea.AxisX.MajorGrid.LineColor = Color.FromArgb (64, 64, 64, 64); 

ChartArea.AxisX.Interval = 1; 
return ChartArea;

 } #endregion

Various properties of the chart class, you can control width, height, border color, background color, skin, color palette, and so on. The final form of the picture format is displayed on the page.

The project described here is a small demo example of the ASP.net MVC Chart control, and the final display is as follows:

The above is to tell you how to use the chart control in ASP.net mvc, I hope to help you learn.