Chart for .NET / Getting Started / Integrating ThinWeb Chart / Integrating In Mvc
In This Topic
    Integrating In Mvc
    In This Topic

    This topic describes the steps needed to create a simple MVC application using the Nevron Thin Chart control.

    This topic applies only to Visual Studio 2010

    1. Open Microsoft Visual Studio 2010.

    2. Select "ASP.NET MVC 3 Web Application".

    3. Click OK and accept the default settings for the application.

    4. Open Solution Exploer.

    5. Add the following references to the project:

    - Nevron.Chart.dll

    - Nevron.Chart.ThinWeb.dll

    - Nevron.GraphicsGL.dll

    - Nevron.Presentation.dll

    - Nevron.System.dll

    - Nevron.ThinWeb.dll

    6. In Solution Explorer locate the Controllers folder.

    7. Right click and from the "Add" menu item select "Controller".

    8. In the controller name text box type "Chart1Controller" and press "Add".

    9. Modify the controller source code so that it looks like:

    C#
    Copy Code

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

    namespace MvcApplication1.Controllers
    {
    public class Chart1Controller : Controller
    {
    /// <summary>
    /// Constructor
    /// </summary>
    public Chart1Controller()
    {

    }
    /// <summary>
    /// Called to get the server id the chart
    /// </summary>
    public string ServerId
    {
    get
    {
    string name = this.GetType().Name;
    int index = name.LastIndexOf("Controller");

    return name.Substring(0, index);
    }
    }
    /// <summary>
    /// Called when the control has to be initialized
    /// </summary>
    /// <param name="control"></param>
    public void Initialize(NThinChartControl control)
    {
    // enable jittering (full scene antialiasing)
    control.Settings.JitterMode = JitterMode.Enabled;
    control.BackgroundStyle.FrameStyle.Visible = false;

    // by default the control contains a Cartesian chart -> remove it and create a Pie chart
    NChart chart = new NPieChart();
    control.Charts.Clear();
    control.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(control.Document);

    // configure the controller
    NServerMouseEventTool serverMouseEventTool = new NServerMouseEventTool();
    serverMouseEventTool.MouseDown = new NDetachPieSliceMouseEventCallback();
    control.Controller.Tools.Add(serverMouseEventTool);
    }
    /// <summary>
    /// Gets a new instance of the thin web control
    /// </summary>
    private NThinChartControl Control
    {
    get
    {
    NThinChartControl control = new NThinChartControl();
    control.StateId = this.ServerId;
    control.ServiceUrl = "/" + ServerId + "/Service";

    return control;
    }
    }
    /// <summary>
    /// Renders the initial content of the chart on the page
    /// </summary>
    /// <returns></returns>
    public ActionResult Content()
    {
    NThinChartControl control = this.Control;
    control.ConfigureInitialResponse();

    Initialize(control);

    return new NThinControlResult(control.ProcessResponses());
    }
    /// <summary>
    /// Services AJAX calls to the control
    /// </summary>
    /// <param name="request"></param>
    /// <returns></returns>
    public ActionResult Service(string request)
    {
    return new NThinControlResult(this.Control.ProcessRequest(request));
    }
    /// <summary>
    /// Renders the control script
    /// </summary>
    /// <returns></returns>
    public ActionResult Script()
    {
    return new NThinControlResult(new NTextResponseOutput(NTextResponseOutput.m_MimeHTML, this.Control.GetIncludeScript()));
    }

    [Serializable]
    class NDetachPieSliceMouseEventCallback : INMouseEventCallback
    {
    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();
    }
    }

    class NThinControlResult : PartialViewResult
    {
    public NThinControlResult(NResponseOutput output)
    {
    m_Output = output;
    }

    public override void ExecuteResult(ControllerContext context)
    {
    NTextResponseOutput textOutput = m_Output as NTextResponseOutput;
    if (textOutput != null)
    {
    context.HttpContext.Response.Write(textOutput.m_Text);
    return;
    }

    NBinaryResponseOutput binaryOutput = m_Output as NBinaryResponseOutput;
    if (binaryOutput != null)
    {
    context.HttpContext.Response.Clear();
    context.HttpContext.Response.ContentType = binaryOutput.m_MimeType;
    context.HttpContext.Response.OutputStream.Write(binaryOutput.m_Data, 0, binaryOutput.m_Length);

    if (binaryOutput.m_Headers != null)
    {
    int count = binaryOutput.m_Headers.Length;
    for (int i = 0; i < count; )
    {
    context.HttpContext.Response.AppendHeader(binaryOutput.m_Headers[i++], binaryOutput.m_Headers[i++]);
    }
    }
    }
    }

    NResponseOutput m_Output;
    }
    }
    }

    10. Locate the "Views" folder in Solution explorer and open the Home/Index.cshtml file.

    11. Modify the file so that it looks like:

    HTML
    Copy Code

    @{

    ViewBag.Title = "Home Page";

    }

    <h2>@ViewBag.Message</h2>

    <p>

    Nevron Thin Web Control

    @{Html.RenderAction("Script", "Chart1");}

    @{Html.RenderAction("Content", "Chart1");}

    </p>

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