drawing charts into ASP.NET MVC 4 (Razor,C#) web s

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 !

回答1:

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;

回答2:

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:

Area
Bar
BoxPlot
Bubble
Candlestick
Column
Doughnut
ErrorBar
FastLine
FastPoint
Funnel
Kagi
Line
Pie
Point
PointAndFigure
Polar
Pyramid
Radar
Range
RangeBar
RangeColumn
Renko
Spline
SplineArea
SplineRange
StackedArea
StackedArea100
StackedBar
StackedBar100
StackedColumn
StackedColumn100
StepLine
Stock
ThreeLineBreak

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.

回答3:

You can try amcharts with javascript. It is so useful..

https://www.amcharts.com/

回答4:

You can use ShieldUI's MVC Charts - a complete solution working in most business cases.

回答5:

You can use NVD3 charts too based on D3.js