Nevron .NET Vision
Chart for .NET / Getting Started / Integrating ThinWeb Chart / Integrating In WebForms
In This Topic
    Integrating In WebForms
    In This Topic

    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:

    Copy Code

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


      <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" />


    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:

    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();

                    // configure the chart
                    chart.Enable3D = true;

                    // 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++)

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

                    // configure the controller
                    NServerMouseEventTool serverMouseEventTool = new NServerMouseEventTool();
                    serverMouseEventTool.MouseDown = new NDetachPieSliceMouseEventCallback();

            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;




    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()

        ' configure the chart
        chart.Enable3D = True

        ' 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
         i += 1

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

        ' configure the controller
        Dim serverMouseEventTool As NServerMouseEventTool = New NServerMouseEventTool()
        serverMouseEventTool.MouseDown = New NDetachPieSliceMouseEventCallback()
       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

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

       End Sub

       #End Region
      End Class
     End Class
    End Namespace

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