How to use chart controls in ASP. net mvc, asp. netmvc

How to use chart controls in ASP. net mvc, asp. netmvc

Microsoft released a powerful ASP. NET chart control, Supports rich chart Options settings-including columns, points, Bubbles, pie charts, ring charts, pyramid, funnel, box charts, area, range, AJAX interaction, and more. The Microsoft chart control sample project contains more than 200 Chart samples on the ASP. NET page. In this article, I will show you how to use chart controls in ASP. NET MVC.

This section describes a very simple project and shows a comparison of the results of a class. Two fields-ID (this is the only student) and GPA (average score)-represent the results of a specific student. The results of various charts are displayed, and the students' results are compared. I want to focus on how to easily display different results of the same data. In this project, you can add, edit, and delete student scores and dynamically display changes.

To run this project, you must install the followingMicrosoft chart control component of Microsoft Net Framework 3.5.

Code, you will need to referenceSystem. Web. UI. DataVisualization assembly.

Once you do this, it is quite a lot of simple charts added to the view page.

First define a controller and provide the following implementation methods:

#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 seriesDetail = 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 attributes of the chart class, including width, height, border color, background color, skin, and color palette. Finally, the image format is displayed on the page.

The project described here is a demo of the chart control of ASP. net mvc, which is displayed as follows:

The above shows you how to use the chart controls in ASP. net mvc. I hope this will help you with your learning.