This topic describes the steps necessary to build a simple ASP.NET application which displays a Chart or Diagram.

1. Open Microsoft Visual Studio .NET.

2. On the File / New Project select "Visual C# projects" and then select "ASP .NET Web application" from the list on the right side.

3. Click OK.

4. If the current page view is Source, switch to Design.

5. Open the Toolbox. If it's not visible open it from the View\Toolbox menu item.

6. Locate the Nevron Chart (Diagram) Web Form tab and expand it.
   

7. Select NChartControl (NDrawingView) and drop it on the from.
   

8. Open the source code for WebForm1.aspx - from the Solution explorer right click on Default.aspx and select "View code". Add the following using directives:
   
   For a Chart component:
   

   C#	Copy Code
   using Nevron.GraphicsCore; using Nevron.Chart; using Nevron.Chart.WebForm;

   Visual Basic	Copy Code
   Imports Nevron.GraphicsCore Imports Nevron.Chart Imports Nevron.Chart.WebForm

   
   For a Diagram component:

   C#	Copy Code
   using Nevron.GraphicsCore; using Nevron.Diagram; using Nevron.Diagram.WebForm; using Nevron.Diagram.Shapes;

   Visual Basic	Copy Code
   Imports Nevron.GraphicsCore Imports Nevron.Diagram Imports Nevron.Diagram.WebForm Imports Nevron.Diagram.Shapes

9. Check if the following assemblies are referenced from your project:
   For Nevron Chart:
   - Nevron.System
   - Nevron.Presentation
   - Nevron.UI.WebForm.Controls
   - Nevron.Chart
   - Nevron.Chart.WebForm

   For Nevron Diagram:
   - Nevron.System
   - Nevron.Presentation
   - Nevron.UI.WebForm.Controls
   - Nevron.Diagram
   - Nevron.Diagram.Shapes
   - Nevron.Diagram.WebForm

   If not, add the required references to your project.
   

10. Check if the following configuration xml exists in your web.config file:
    

    web.config

    Copy Code

    <system.web> <!—- IIS 5 and IIS 6 related configuration --> <httpHandlers> <!--If you are using Nevron Chart for .NET--> <addpath="NevronChart.axd" verb="*" type="Nevron.Chart.WebForm.NChartImageResourceHandler" validate="false" /> <!--If you are using Nevron Diagram for .NET--> <addpath="NevronDiagram.axd" verb="*" type="Nevron.Diagram.WebForm.NDiagramImageResourceHandler" validate="false" /> </httpHandlers> </system.web> ... <system.webServer> <!—- IIS 7 related configuration --> <handlers> <!--If you are using Nevron Chart for .NET--> <removename="NevronChart" /> <!--If you are using Nevron Diagram for .NET--> <removename="NevronDiagram" /> ... <!--If you are using Nevron Chart for .NET--> <addname="NevronChart" preCondition="integratedMode" verb="*" path="NevronChart.axd" type="Nevron.Chart.WebForm.NChartImageResourceHandler" /> <!--If you are using Nevron Diagram for .NET--> <addname="NevronDiagram" preCondition="integratedMode" verb="*" path="NevronDiagram.axd" type="Nevron.Diagram.WebForm.NDiagramImageResourceHandler" /> </handlers> </system.webServer>

    If not, add the required xml configuration code.

11. Start the application. The web page must display an empty chart (drawing view).
    

12. Close the browser.
    

13. Add a simple initialization code for the inserted component in the Page_Load method.
    For Nevron Chart that could be:
    

    C#	Copy Code
    if (NChartControl1.RequiresInitialization) { NChart chart = NChartControl1.Charts[0]; NLineSeries line = new NLineSeries(); line.Values.Add(10); line.Values.Add(20); line.Values.Add(30); line.Values.Add(40); line.BorderStyles[0] = new NStrokeStyle(Color.Red); line.BorderStyles[1] = new NStrokeStyle(Color.Blue); line.BorderStyles[2] = new NStrokeStyle(Color.Green); chart.Series.Add(line); }

    Visual Basic	Copy Code
    If NChartControl1.RequiresInitialization = True Then Dim chart = NChartControl1.Charts(0) Dim line = New NLineSeries line.Values.Add(10) line.Values.Add(20) line.Values.Add(30) line.Values.Add(40) line.BorderStyles(0) = New NStrokeStyle(Color.Red) line.BorderStyles(1) = New NStrokeStyle(Color.Blue) line.BorderStyles(2) = New NStrokeStyle(Color.Green) chart.Series.Add(line) End If

    For Nevron Diagram you could use the following lines of code:
    

    C#

    Copy Code

    if (NDrawingView1.RequiresInitialization) { NDrawingView1.ViewLayout = CanvasLayout.Fit; NDrawingView1.DocumentPadding = new Nevron.Diagram.NMargins(10); NDrawingView1.Document.BeginInit(); NDrawingView1.Document.Bounds = new NRectangleF(0, 0, 420, 320); NStandardFrameStyle fs = (NDrawingView1.Document.BackgroundStyle.FrameStyle as NStandardFrameStyle); fs.InnerBorderWidth = new NLength(0); NBasicShapesFactory factory = new NBasicShapesFactory(NDrawingView1.Document); NEllipseShape ellipse = factory.CreateShape((int)BasicShapes.Ellipse) as NEllipseShape; ellipse.Name = "myEllipse"; ellipse.Width = 250f; ellipse.Height = 250f; ellipse.Center = new NPointF(200, 200); ellipse.Style.FillStyle = new NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant1, Color.Navy, Color.White); NDrawingView1.Document.ActiveLayer.AddChild(ellipse); NDrawingView1.Document.EndInit(); }

    Visual Basic

    Copy Code

    If NDrawingView1.RequiresInitialization = True Then NDrawingView1.ViewLayout = CanvasLayout.Fit NDrawingView1.DocumentPadding = New Nevron.Diagram.NMargins(10) NDrawingView1.Document.BeginInit() NDrawingView1.Document.Bounds = New NRectangleF(0, 0, 420, 320) Dim fs = NDrawingView1.Document.BackgroundStyle.FrameStyle fs.InnerBorderWidth = New NLength(0) Dim factory = New NBasicShapesFactory(NDrawingView1.Document) Dim ellipse = factory.CreateShape(BasicShapes.Ellipse) ellipse.Name = "myEllipse" ellipse.Width = 250.0F ellipse.Height = 250.0F ellipse.Center = New NPointF(200, 200) ellipse.Style.FillStyle = New NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant1, Color.Navy, Color.White) NDrawingView1.Document.ActiveLayer.AddChild(ellipse) NDrawingView1.Document.EndInit() End If

14. Now start the application again - the page must display the inserted component initialized.