Applies to: Nevron Chart for .NET
How to add Nevron Chart to ASP.NET MVC application?
Nevron Chart for .NET is compatible with ASP.NET MVC. The following topic will help you add Nevron Chart to ASP.NET MVC application:
Create a new ASP.NET MVC application:
1. Open Microsoft Visual Studio for .NET
2. Select the File - New - Project command - the new project dialog will be displayed
3. Select Visual C# Projects – Web - ASP.NET MVC 2 Web Application
4. Select "No, do not create a unit test project" (we will not create a unit test project)
5. Click the OK button
6. In the Solution Explorer, add references to the appropriate Nevron assemblies (Nevron.Chart.dll; Nevron.Chart.WebForm.dll; Nevron.Presentation.dll; Nevron.System.dll; and Nevron.UI.WebForm.Controls.dll).
In ASP.NET MVC Application, you can use Nevron Chart control in two ways:
1. Inline ASP.NET MVC style (without a code behind file) – this way you will create the Chart directly in your .aspx views.
- From the Solution Explorer – Views – Home, open the Index.aspx
- If the current page view is Source, switch to Design
- Drag and drop the NChartControl on the form. This will add the following in the Source view:
<ncwc:NChartControl ID="NChartControl1" runat="server" Height="428px"
Width="506px">
</ncwc:NChartControl>
and will register the Chart assembly:
<%@ Register assembly="Nevron.Chart.WebForm, Version=10.11.25.12, Culture=neutral, PublicKeyToken=346753153ef91008" namespace="Nevron.Chart.WebForm" tagprefix="ncwc" %>
- Add the following under the Nevorn registered assembly:
<%@ Import Namespace="Nevron.GraphicsCore" %>
<%@ Import Namespace="Nevron.Chart" %>
<%@ Import Namespace="Nevron.Chart.WebForm" %>
- Now you need to add the code for your Chart. The following code creates a simple pie chart:
[C#]
<ncwc:NChartControl ID="NChartControl1" runat="server" Height="428px"
Width="506px">
</ncwc:NChartControl>
<%
NChartControl1.BackgroundStyle.FrameStyle.Visible = false;
NChartControl1.Panels.Clear();
NChartControl1.Settings.JitterMode = JitterMode.Enabled;
NChartControl1.Settings.JitteringSteps = 16;
NPieChart chart = new NPieChart();
NChartControl1.Charts.Add(chart);
chart.Enable3D = true;
chart.Width = 70;
chart.Depth = 10;
chart.Projection.SetPredefinedProjection(PredefinedProjection.PerspectiveElevated);
chart.LightModel.SetPredefinedLightModel(PredefinedLightModel.ShinyCameraLight);
NPieSeries pie = (NPieSeries)chart.Series.Add(SeriesType.Pie);
pie.PieStyle = PieStyle.SmoothEdgeRing;
pie.InnerRadius = new NLength(40);
pie.PieEdgePercent = 15;
pie.LabelMode = PieLabelMode.SpiderNoOverlap;
pie.AddDataPoint(new NDataPoint(12, "Cars"));
pie.AddDataPoint(new NDataPoint(42, "Trains"));
pie.AddDataPoint(new NDataPoint(56, "Airplanes"));
pie.AddDataPoint(new NDataPoint(23, "Buses"));
pie.AddDataPoint(new NDataPoint(32, "Bikes"));
pie.AddDataPoint(new NDataPoint(29, "Boats"));
NStyleSheet styleSheet = NStyleSheet.CreatePredefinedStyleSheet(PredefinedStyleSheet.BrightMultiColor);
styleSheet.Apply(NChartControl1.Document);
%>
[VB.NET]
<ncwc:NChartControl ID="NChartControl1" runat="server" Height="428px"
Width="506px">
</ncwc:NChartControl>
<%
NChartControl1.BackgroundStyle.FrameStyle.Visible = False
NChartControl1.Panels.Clear()
NChartControl1.Settings.JitterMode = JitterMode.Enabled
NChartControl1.Settings.JitteringSteps = 16
Dim chart As New NPieChart()
NChartControl1.Charts.Add(chart)
chart.Enable3D = True
chart.Width = 70
chart.Depth = 10
chart.Projection.SetPredefinedProjection(PredefinedProjection.PerspectiveElevated)
chart.LightModel.SetPredefinedLightModel(PredefinedLightModel.ShinyCameraLight)
Dim pie As NPieSeries = DirectCast(chart.Series.Add(SeriesType.Pie), NPieSeries)
pie.PieStyle = PieStyle.SmoothEdgeRing
pie.InnerRadius = New NLength(40)
pie.PieEdgePercent = 15
pie.LabelMode = PieLabelMode.SpiderNoOverlap
pie.AddDataPoint(New NDataPoint(12, "Cars"))
pie.AddDataPoint(New NDataPoint(42, "Trains"))
pie.AddDataPoint(New NDataPoint(56, "Airplanes"))
pie.AddDataPoint(New NDataPoint(23, "Buses"))
pie.AddDataPoint(New NDataPoint(32, "Bikes"))
pie.AddDataPoint(New NDataPoint(29, "Boats"))
Dim styleSheet As NStyleSheet = NStyleSheet.CreatePredefinedStyleSheet(PredefinedStyleSheet.BrightMultiColor)
styleSheet.Apply(NChartControl1.Document)
%>
2. Classic ASP.NET WebForm in MVC (with code behind file)
- From the Solution Explorer - add a new Asp.Net Web Form (WebForm1.aspx).
- Open the WebForm1.aspx page in design mode and drag NChartControl from the toolbox.
- This will add the following code in the page Source view:
<ncwc:NChartControl ID="NChartControl1" runat="server" Height="370px"
Width="506px">
</ncwc:NChartControl>
(If needed you can simply type this manually)
- Now open the code behind file (WebForm1.aspx.cs / WebForm1.aspx.vb) and enter the following code to create a simple 3D pie chart:
[C#]
using Nevron.GraphicsCore;
using Nevron.Chart;
using Nevron.Chart.WebForm;
...
NChartControl1.BackgroundStyle.FrameStyle.Visible = false;
NChartControl1.Panels.Clear();
NChartControl1.Settings.JitterMode = JitterMode.Enabled;
NChartControl1.Settings.JitteringSteps = 16;
NPieChart chart = new NPieChart();
NChartControl1.Charts.Add(chart);
chart.Enable3D = true;
chart.Width = 70;
chart.Depth = 10;
chart.Projection.SetPredefinedProjection(PredefinedProjection.PerspectiveElevated);
chart.LightModel.SetPredefinedLightModel(PredefinedLightModel.ShinyCameraLight);
NPieSeries pie = (NPieSeries)chart.Series.Add(SeriesType.Pie);
pie.PieStyle = PieStyle.SmoothEdgeRing;
pie.InnerRadius = new NLength(40);
pie.PieEdgePercent = 15;
pie.LabelMode = PieLabelMode.SpiderNoOverlap;
pie.AddDataPoint(new NDataPoint(12, "Cars"));
pie.AddDataPoint(new NDataPoint(42, "Trains"));
pie.AddDataPoint(new NDataPoint(56, "Airplanes"));
pie.AddDataPoint(new NDataPoint(23, "Buses"));
pie.AddDataPoint(new NDataPoint(32, "Bikes"));
pie.AddDataPoint(new NDataPoint(29, "Boats"));
NStyleSheet styleSheet = NStyleSheet.CreatePredefinedStyleSheet(PredefinedStyleSheet.BrightMultiColor);
styleSheet.Apply(NChartControl1.Document);
[VB.NET]
Imports Nevron.GraphicsCore
Imports Nevron.Chart
Imports Nevron.Chart.WebForm
...
NChartControl1.BackgroundStyle.FrameStyle.Visible = False
NChartControl1.Panels.Clear()
NChartControl1.Settings.JitterMode = JitterMode.Enabled
NChartControl1.Settings.JitteringSteps = 16
Dim chart As New NPieChart()
NChartControl1.Charts.Add(chart)
chart.Enable3D = True
chart.Width = 70
chart.Depth = 10
chart.Projection.SetPredefinedProjection(PredefinedProjection.PerspectiveElevated)
chart.LightModel.SetPredefinedLightModel(PredefinedLightModel.ShinyCameraLight)
Dim pie As NPieSeries = DirectCast(chart.Series.Add(SeriesType.Pie), NPieSeries)
pie.PieStyle = PieStyle.SmoothEdgeRing
pie.InnerRadius = New NLength(40)
pie.PieEdgePercent = 15
pie.LabelMode = PieLabelMode.SpiderNoOverlap
pie.AddDataPoint(New NDataPoint(12, "Cars"))
pie.AddDataPoint(New NDataPoint(42, "Trains"))
pie.AddDataPoint(New NDataPoint(56, "Airplanes"))
pie.AddDataPoint(New NDataPoint(23, "Buses"))
pie.AddDataPoint(New NDataPoint(32, "Bikes"))
pie.AddDataPoint(New NDataPoint(29, "Boats"))
Dim styleSheet As NStyleSheet = NStyleSheet.CreatePredefinedStyleSheet(PredefinedStyleSheet.BrightMultiColor)
styleSheet.Apply(NChartControl1.Document)
- Right-click the WebForm1.aspx and select View in Browser.
Article ID: 144, Created On: 11/29/2010, Modified: 12/9/2010