Menu
Is it possible to draw charts (curves, histogram, circle) using C# via ASP.NET MVC 4 (Razor). I'm trying to make some graphics from data extracted from my Database. But, I can't find how.
Any suggestions, please ?
Thanks a lot !
975
You can add support for Pages to any ASP.NET Core MVC app by simply adding a Pages folder and adding Razor Pages files to this folder. Razor Pages use the folder structure as a convention for routing requests.
You can change the Chart Type by changing “type” property in view to “line”, “area”, “spline”, “bar”, “pie”, etc.
From the docs, "Razor Pages can make coding page-focused scenarios easier and more productive than using controllers and views." If your ASP.NET MVC app makes heavy use of views, you may want to consider migrating from actions and views to Razor Pages.
Go to solution explorer => Views Folder => Right-click on “Home” Folder >> go to “Add” >> Click on [New Item] as follow. Select MVC 5 View Page with Layout(Razor) from "Add New Item" window and provide the required name like "ViewPageWithLayout. cshtml" click on "Add" button as follow.
There is a Chart helper, which works quite well with Razor and enables you to build charts, histograms and other graphical representations of your data quite easily.
Or you could try to use some jQuery/HTML5/Javascript library:
Highcharts is a charting library written in pure HTML5/JavaScript, offering intuitive, interactive charts to your web site or web application.
jqPlot is a plotting and charting plugin for the jQuery Javascript framework.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
There are more of them, the above ones are only some examples;
159
When you want to display your data in graphical form, you can use Chart helper. The Chart helper can render an image that displays data in a variety of chart types.
You can create a view having razor code for chart as follows(lets say its MyChart.cshtml).
Bar chart from Array with theme
@{ var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green) .AddTitle("Chart Title") .AddSeries( name: "ChartTitle", xValue: new[] { "Col1", "Col2", "Col3", "Col4", "Col5" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); } Pie chart from Array
@{ var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green) .AddTitle("Chart Title") .AddSeries( name: "ChartTitle", chartType: "Pie", xValue: new[] { "Col1", "Col2", "Col3", "Col4", "Col5" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); } Pie chart from Array with theme
@{ var myChart = new Chart(width: 600, height: 400) .AddTitle("Chart Title") .AddSeries( name: "ChartTitle", chartType: "Pie", xValue: new[] { "Col1", "Col2", "Col3", "Col4", "Col5" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write(); } Bar Chart Using DB Query
@{ var db = Database.Open("DBName"); var data = db.Query("SELECT Col1, Col2 FROM Table"); var myChart = new Chart(width: 600, height: 400) .AddTitle("Chart Title") .DataBindTable(dataSource: data, xField: "Col1") .Write(); } You can use these chart views/PartialView where ever required as a src of image.
ex.
<html> <body> <img src="MyChart.cshtml" /> <!-- or <img src='@Url.Action("Controler","ActionNameOfChartRenderingView")' />--> <body> <html> Chart Theams
Vanilla Displays red columns on a white background.
Blue Displays blue columns on a blue gradient background.
Green Displays blue columns on a green gradient background.
Yellow Displays orange columns on a yellow gradient background.
Vanilla3D Displays 3-D red columns on a white background.
SeriesChartType enumeration supports the following:
This is the list of names that you can pass, as strings, to the Chart helper in a Razor page.
This is Helper
namespace System.Web.Helpers { public class Chart { public Chart(int width, int height, string template = null, string templatePath = null); public string FileName { get; } public int Height { get; } public int Width { get; } public Chart AddLegend(string title = null, string name = null); public Chart AddSeries(string name = null, string chartType = "Column", string chartArea = null, string axisLabel = null, string legend = null, int markerStep = 1, IEnumerable xValue = null, string xField = null, IEnumerable yValues = null, string yFields = null); public Chart AddTitle(string text = null, string name = null); public Chart DataBindCrossTable(IEnumerable dataSource, string groupByField, string xField, string yFields, string otherFields = null, string pointSortOrder = "Ascending"); public Chart DataBindTable(IEnumerable dataSource, string xField = null); public byte[] GetBytes(string format = "jpeg"); public static Chart GetFromCache(string key); public Chart Save(string path, string format = "jpeg"); public string SaveToCache(string key = null, int minutesToCache = 20, bool slidingExpiration = true); public Chart SaveXml(string path); public Chart SetXAxis(string title = "", double min = 0, double max = 0.0 / 0.0); public Chart SetYAxis(string title = "", double min = 0, double max = 0.0 / 0.0); public WebImage ToWebImage(string format = "jpeg"); public Chart Write(string format = "jpeg"); public static Chart WriteFromCache(string key, string format = "jpeg"); } } Hope this will help you.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
