Chart for .NET / Getting Started / Integrating ThinWeb Chart / Integrating In WebForms
Integrating In WebForms

This topic describes the steps needed to create a simple ASP.NET Web Form application or Website project using the Nevron Chart ThinWeb control. 

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 Web Form tab and expand it.

7. Select "NThinChartControl" and drop it on the form.

8. Check whether the following assemblies are referenced by the project:

- Nevron.System
- Nevron.Presentation
- Nevron.ThinWeb
- Nevron.Chart
- Nevron.Chart.ThinWeb

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

web.config
Copy Code

<system.web>
 <httpHandlers>
  <add path="NThinChartControlHttpHandler.axd" verb="*" type="Nevron.Chart.ThinWeb.NThinChartControlHttpHandler" validate="false" />  
  <add path="NAspNetThinWebControlHttpHandler.axd" verb="*" type="Nevron.ThinWeb.NAspNetThinWebControlHttpHandler" validate="false" />
 </httpHandlers>
</system.web>

 

<system.webServer>
 <handlers>
  <remove name="NThinChartControlHttpHandler" /> 
  <remove name="NAspNetThinWebControlHttpHandler" />
  <add name="NThinChartControlHttpHandler" preCondition="integratedMode" verb="*" path="NThinChartControlHttpHandler.axd" type="Nevron.Chart.ThinWeb.NThinChartControlHttpHandler" />
  <add name="NAspNetThinWebControlHttpHandler" preCondition="integratedMode" verb="*" path="NAspNetThinWebControlHttpHandler.axd" type="Nevron.ThinWeb.NAspNetThinWebControlHttpHandler" />
 </handlers>
 </system.webServer>

 

10. Open the source code for WebForm1.aspx - from the Solution explorer right click on Default.aspx and select "View code".

11. Modify the source code so that it looks like:

C#
Copy Code

using System;
using Nevron.Chart;
using Nevron.Chart.ThinWeb;
using Nevron.GraphicsCore;
using Nevron.ThinWeb;

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!NThinChartControl1.Initialized)
            {
                // enable jittering (full scene antialiasing)
                NThinChartControl1.Settings.JitterMode = JitterMode.Enabled;
                NThinChartControl1.BackgroundStyle.FrameStyle.Visible = false;

                // by default the control contains a Cartesian chart -> remove it and create a Pie chart
                NChart chart = new NPieChart();
                NThinChartControl1.Charts.Clear();
                NThinChartControl1.Charts.Add(chart);

                // configure the chart
                chart.Enable3D = true;
                chart.LightModel.SetPredefinedLightModel(PredefinedLightModel.MetallicLustre);
                chart.Projection.SetPredefinedProjection(PredefinedProjection.OrthogonalElevated);

                // add a pie serires
                NPieSeries pie = (NPieSeries)chart.Series.Add(SeriesType.Pie);
                pie.PieStyle = PieStyle.SmoothEdgePie;
                pie.PieEdgePercent = 50;
                pie.DataLabelStyle.Visible = false;

                pie.AddDataPoint(new NDataPoint(0, "Ships"));
                pie.AddDataPoint(new NDataPoint(0, "Trains"));
                pie.AddDataPoint(new NDataPoint(0, "Cars"));
                pie.AddDataPoint(new NDataPoint(0, "Buses"));
                pie.AddDataPoint(new NDataPoint(0, "Airplanes"));

                pie.Values.FillRandomRange(new Random(), pie.Values.Count, 1, 20);
                for (int i = 0; i < pie.Values.Count; i++)
                {
                    pie.Detachments.Add(0);
                }

                // apply style sheet
                NStyleSheet styleSheet = NStyleSheet.CreatePredefinedStyleSheet(PredefinedStyleSheet.NevronMultiColor);
                styleSheet.Apply(NThinChartControl1.Document);

                // configure the controller
                NServerMouseEventTool serverMouseEventTool = new NServerMouseEventTool();
                serverMouseEventTool.MouseDown = new NDetachPieSliceMouseEventCallback();
                NThinChartControl1.Controller.Tools.Add(serverMouseEventTool);
            }
        }

        [Serializable]
        class NDetachPieSliceMouseEventCallback : INMouseEventCallback
        {
            #region INMouseEventCallback Members

            public void OnMouseEvent(NAspNetThinWebControl control, NBrowserMouseEventArgs e)
            {
                NThinChartControl chartControl = (NThinChartControl)control;

                NPieChart pieChart = (NPieChart)chartControl.Charts[0];
                NHitTestResult hitTestResult = chartControl.HitTest(e.X, e.Y);

                int dataPointIndex = hitTestResult.DataPointIndex;

                // collapse all pie slices
                NPieSeries pieSeries = (NPieSeries)pieChart.Series[0];
                for (int i = 0; i < pieSeries.Values.Count; i++)
                {
                    pieSeries.Detachments[i] = 0;
                }

                // expand the one that's hit
                if (dataPointIndex != -1)
                {
                    pieSeries.Detachments[dataPointIndex] = 5.0f;
                }

                chartControl.UpdateView();
            }

            #endregion
        }
    }
}

 

Visual Basic
Copy Code

Imports System
Imports Nevron.Chart
Imports Nevron.Chart.ThinWeb
Imports Nevron.GraphicsCore
Imports Nevron.ThinWeb

Namespace WebApplication1
 Public Partial Class _Default
  Inherits System.Web.UI.Page
  Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
   If (Not NThinChartControl1.Initialized) Then
    ' enable jittering (full scene antialiasing)
    NThinChartControl1.Settings.JitterMode = JitterMode.Enabled
    NThinChartControl1.BackgroundStyle.FrameStyle.Visible = False

    ' by default the control contains a Cartesian chart -> remove it and create a Pie chart
    Dim chart As NChart = New NPieChart()
    NThinChartControl1.Charts.Clear()
    NThinChartControl1.Charts.Add(chart)

    ' configure the chart
    chart.Enable3D = True
    chart.LightModel.SetPredefinedLightModel(PredefinedLightModel.MetallicLustre)
    chart.Projection.SetPredefinedProjection(PredefinedProjection.OrthogonalElevated)

    ' add a pie serires
    Dim pie As NPieSeries = CType(chart.Series.Add(SeriesType.Pie), NPieSeries)
    pie.PieStyle = PieStyle.SmoothEdgePie
    pie.PieEdgePercent = 50
    pie.DataLabelStyle.Visible = False

    pie.AddDataPoint(New NDataPoint(0, "Ships"))
    pie.AddDataPoint(New NDataPoint(0, "Trains"))
    pie.AddDataPoint(New NDataPoint(0, "Cars"))
    pie.AddDataPoint(New NDataPoint(0, "Buses"))
    pie.AddDataPoint(New NDataPoint(0, "Airplanes"))

    pie.Values.FillRandomRange(New Random(), pie.Values.Count, 1, 20)
    Dim i As Integer = 0
    Do While i < pie.Values.Count
     pie.Detachments.Add(0)
     i += 1
    Loop

    ' apply style sheet
    Dim styleSheet As NStyleSheet = NStyleSheet.CreatePredefinedStyleSheet(PredefinedStyleSheet.NevronMultiColor)
    styleSheet.Apply(NThinChartControl1.Document)

    ' configure the controller
    Dim serverMouseEventTool As NServerMouseEventTool = New NServerMouseEventTool()
    serverMouseEventTool.MouseDown = New NDetachPieSliceMouseEventCallback()
    NThinChartControl1.Controller.Tools.Add(serverMouseEventTool)
   End If
  End Sub

  <Serializable> _
  Private Class NDetachPieSliceMouseEventCallback
   Implements INMouseEventCallback
   #Region "INMouseEventCallback Members"

   Public Sub OnMouseEvent(ByVal control As NAspNetThinWebControl, ByVal e As NBrowserMouseEventArgs) Implements INMouseEventCallback.OnMouseEvent
    Dim chartControl As NThinChartControl = CType(control, NThinChartControl)

    Dim pieChart As NPieChart = CType(chartControl.Charts(0), NPieChart)
    Dim hitTestResult As NHitTestResult = chartControl.HitTest(e.X, e.Y)

    Dim dataPointIndex As Integer = hitTestResult.DataPointIndex

    ' collapse all pie slices
    Dim pieSeries As NPieSeries = CType(pieChart.Series(0), NPieSeries)
    Dim i As Integer = 0
    Do While i < pieSeries.Values.Count
     pieSeries.Detachments(i) = 0
     i += 1
    Loop

    ' expand the one that's hit
    If dataPointIndex <> -1 Then
     pieSeries.Detachments(dataPointIndex) = 5.0f
    End If

    chartControl.UpdateView()
   End Sub

   #End Region
  End Class
 End Class
End Namespace


 12. Start the application - the page must display a clickable pie chart.