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.
