.netCHARTING is the leading ASP.NET charting library and has a dedicated bundle and sample set for MVC web applications. Easily add over 150 types of charts including pie charts, bar charts, column charts, line charts, financial charts, polar charts and area charts to your web pages. Extensive JavaScript SVG chart support is included without needing to write JavaScript code working with a single Razor page (cshtml) for each sample, you can customize the html and chart elements in one place. For more complex customization, you can modify controllers and add new model as well. With a custom HTML helper included in the project (DNC.cs), in each sample *.cshtml page, you can easily access chart object and set chart properties using intellisense in Visual Studio.
Interactive chart
Using .netCHARTING ASP.NET MVC you can add data for custom drilldown charts, use custom data binding for your datapoints creating interactive charts quickly and easily.
.netCHARTING ASP.NET MVC Chart Library asp-net-mvc-chart .netCHARTING is the leading ASP.NET charting library and has a dedicated bundle and sample set for MVC web applications. Easily add over 150 types of charts including pie charts, bar charts, column charts, line charts, financial charts, polar charts and area charts to your web pages. Extensive JavaScript SVG chart support is included without needing to write JavaScript code working with a single Razor page (cshtml) for each sample, you can customize the html and chart elements in one place. For more complex customization, you can modify controllers and add new model as well. With a custom HTML helper included in the project (DNC.cs), in each sample *.cshtml page, you can easily access chart object and set chart properties using intellisense in Visual Studio. Interactive chart Using .netCHARTING ASP.NET MVC you can add data for custom drilldown charts, use custom data binding for your datapoints creating interactive charts quickly and easily.
Code Sample:
FeaturesController.cs
using System.Web.Mvc;
public ActionResult JSCGanttSummary()
{
return View();
}JSCGanttSummary.cshtml
@(Html.Chart().ID("summmeryChart").Title("Project Alpha (Click to zoom)")
.Size("840x120").JS(jsOpSum).ChartType(ChartType.Combo).DefaultSeries(defaultSeriesSum)
.DefaultElement(defaultElementSum).LegendBox(legendBox).YAxis(yAxisSum)
.TempDirectory("/temp").SeriesCollection(summarySeries))
@(Html.Chart().ID("detailsChart").Size("840x480").ChartType(ChartType.ComboHorizontal)
.JS(jsOp).DefaultSeries(defaultSeries).DefaultElement(defaultElementSum).YAxis(yAxis)
.LegendBox(legendBox).TempDirectory("/temp").SeriesCollection(detailsSeries))
For better performance, you can directly manipulate client side settings seeing results in real-time and dynamically adjust online content. Chart types can also be selected interactively. More samples are available at www.dotnetcharting.com contact us if you need any assistance or wish to use a specific sample in MVC. .netCHARTING ASP.NET MVC supports interactive and animations charts from your JSON data or use the integrated server side data engine to securely populate the chart from your database without any additional coding required. Charts can also be configured to update in real-time based on your dynamic data sources. For the samples using database, a chartSample.mdb included in the project. You can update the connection string in the web.config and use other data sources including MySQL, SQL Server, and Oracle. If you have a unique data source you wish to use that is not already supported with .netCHARTING please contact us!
.netCHARTING ASP.NET MVC supports interactive and animations charts from your JSON data or use the integrated server side data engine to securely populate the chart from your database without any additional coding required. Charts can also be configured to update in real-time based on your dynamic data sources. For the samples using database, a chartSample.mdb included in the project. You can update the connection string in the web.config and use other data sources including MySQL, SQL Server, and Oracle. If you have a unique data source you wish to use that is not already supported with .netCHARTING please contact us!
Code Sample:
JSCController.cs
using System.Web.Mvc;
public ActionResult JSCPieStyled()
{
return View();
}JSCPieStyled.cshtml
@(Html.Chart().Title("Countries GDP").ChartType(ChartType.Pies).Size("600x350")
.DefaultElement(defaultElement).ChartArea(chartArea).YAxis(yAxis1).XAxis(xAxis1)
.DefaultAxis(defaultAxis1).TempDirectory("/temp") .PaletteName(Palette.None) .DonutHoleSize(0.7).JsEnabled(true).SeriesCollection(getPieChartData()))
JavaScript and HTML5 Charts
A powerful new JavaScript and HTML charting solution has been added in .netCHARTING 7.0. Easily enable JavaScript Charting with seamless mobile, iOS, Android and tablet support, at no additional charge, with every .netCHARTING license sold. In addition to visual parity with .netCHARTING's stunning server-side output, our JavaScript charts provide advanced animation and rich client side interactivity support.
Code Sample:
JSCController.cs
using System.Web.Mvc;
public ActionResult JSCFitness()
{
return View();
}JSCFitness.cshtml
@(Html.Chart().ID("Chart1").ChartType(ChartType.Gauges).DefaultSeries(defaultSeries1) .Size("840x240").ChartArea(chartArea1).JsEnabled(true).TempDirectory("/temp") .ShadingEffectMode(ShadingEffectMode.Three).YAxis(yAxis1).XAxis(xAxis1) .DefaultAxis(defaultAxis1).DonutHoleSize(0.7).SeriesCollection(getDataChart1()))
@(Html.Chart().ID("Chart2").ChartType(ChartType.Heatmap).DefaultSeries(defaultSeries2) .Size("840x240").ChartArea(chartArea1).JsEnabled(true).TempDirectory("/temp") .ShadingEffectMode(ShadingEffectMode.Three).DefaultAxis(defaultAxis2) .YAxis(yAxis4).XAxis(xAxis4).SeriesCollection(getDataChart2()))
The MVC sample project uses high performance Single Page Application (SPA) option, but .netCHARTING can also be used in traditional MVC (Model-View-Controller) projects. Easily open the sample project in Visual Studio 2017 and Visual Studio 2019 we always support the latest Microsoft developer tools and have been a Microsoft Certified Partner for over 15 years! If you need help working with an older version of Visual Studio, please contact support.
.netCHARTING is committed to supporting your ASP.NET MVC visualization needs and getting you up and running quickly. Download the free trial with no purchase required.
Trouble shooting
The dotnetCHARTING_MVC solution and project can be opened in Visual Studio 2017 or later. (Recently tested in 2017 & 2019)
Error: When a project is first opened, NuGet may not have initialized until a NuGet operation is performed.
Resolution:
Run NuGet restore: - Right-click on the solution node in the Solution Explorer and select Restore NuGet Packages.
Error: Could not find a part of the path 'C:\dotnetCHARTING_MVC\bin\roslyn\csc.exe':
Resolution:
Open the Package Manager UI - Right-click on References and select Manage NuGet Packages... and run the following command:
Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r
Then in apply Build->Rebuild Solution
Error: .Chart() not being recognized as a html helper.
Resolution:
@(Html.Chart() is defined in dnc.cs and it has all the html helper methods for MVC users and should be included in project. dotnetcharting.dll can be used directly with aspx pages or creating chart image programmatically and displaying the image anywhere in the page.