Create a simple chart in ASP.NET application

Applies to: Nevron Chart for .NET

How to create a simple chart in ASP.NET application from scratch in Visual Studio?

The following getting started guide will help you create a ASP.NET application, which displays the following chart:

Create a new ASP.NET 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 - ASP.NET Web Application
  4. Click the OK button
  5. If the current page view is Source, switch to Design

Insert Nevron Chart control:

  1. The Nevron .NET Vision installation must register the NChartControl control in the Nevron Chart WebForm toolbox group. In case this group is created go to step 6.
  2. Right click on the Toolbox background. Select the "Choose Items…" command.
  3. In the "Customize Toolbox Items" dialog select the ".NET Framework Components" tab.
  4. Click on the "Browse..." button and select the Nevron.Chart.WebForm.dll assembly located in the Nevron .NET Vision installation directory.
  5. The NChartControl should appear at the end of the toolbox list.
  6. Drag and drop the NChartControl on the form.
  7. Open the solution explorer and make sure to add references to the following Nevron assemblies: Nevron.Chart.dll; Nevron.Chart.WebForm.dll; Nevron.Presentation.dll; Nevron.System.dll; and Nevron.UI.WebForm.Controls.dll;
  8. From the Solution explorer right click on Default.aspx and select "View code".
  9. Use the following code example to programmatically create the chart:
using System;
using Nevron.Chart;
using Nevron.GraphicsCore;
protected void Page_Load(object sender, EventArgs e)
    NChartControl1.BackgroundStyle.FrameStyle.Visible = false;
    NChartControl1.Settings.JitterMode = JitterMode.Enabled;
    NChartControl1.Settings.JitteringSteps = 16;
    NPieChart chart = new NPieChart();
    chart.Enable3D = true;
    chart.Width = 70;
    chart.Depth = 10;
    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);

Imports System
Imports Nevron.Chart
Imports Nevron.GraphicsCore
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    NChartControl1.BackgroundStyle.FrameStyle.Visible = False
    NChartControl1.Settings.JitterMode = JitterMode.Enabled
    NChartControl1.Settings.JitteringSteps = 16
    Dim chart As New NPieChart()
    chart.Enable3D = True
    chart.Width = 70
    chart.Depth = 10
    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)
End Sub

Article ID: 115, Created On: 11/8/2010, Modified: 12/1/2010