Getting Started with ASP.NET Core

17 Feb 202224 minutes to read

This section explains you the steps required to create a Smithchart and demonstrate the basic usage of the Smithchart control.

Prerequisites

To get start with ASP.NET Core application, need to ensure the following software to be installed on the machine.

Visual Studio 2017
DotNet Core 2.0

Setup ASP.NET Core application with Essential JS 2 for ASP.NET Core

The following steps to create ASP.NET Core Application.

Step 1: Create ASP.NET Core Web Application with default template project in Visual Studio 2017.

Alt text

Step 2: Once your project created. We need to add Syncfusion EJ2 package into your application by using Nugget Package Manager.

Open the nuGet package manager.

Alt text

Install the Syncfusion.EJ2 package to the application

Alt text

After Installation complete this will included in the project. You can refer it from the Project Assembly Reference.

We need to install NewtonSoft.JSON as dependency since it Syncfusion.EJ2 dependent to NewtonSoft.JSON package.

Step 3: Open the _ViewImports.cshtml to import Syncfusion.EJ2 package.

@addTagHelper *, Syncfusion.EJ2

Step 4: Add client side resource through CDN or local package in the layout page _Layout.cshtml.

@* Syncfusion Essential JS 2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>

Step 5: Adding Script Manager in layout page _Layout.cshtml.

<ejs-scripts></ejs-scripts>

Step 6: Add the below code to your Index.cshtml view page which is present under Views/Home folder, to initialize the smith chart.

@using Syncfusion.EJ2;
 <ejs-smithchart id="smithchart">
</ejs-smithchart>

Add series to Smith chart

The Smith chart has the following two type of specification for adding series:

dataSource - Data object can be bound directly by specifying the resistance and reactance values.
points - Collection of resistance and reactance values can be bound directly to render the series.

The following two ways demonstrate adding two series to the Smith chart.

First series Transmission1 shows dataSource bound series.
Second series Transmission2 shows points bound series.

CSHTML
Series.cs
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
<div id="control-section">
 <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1"></e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
</ejs-smithchart>
</div>
<script>
        function loaded(args) {
            window.smithchart = args.smithchart;
            args.smithchart.series[0].points = [
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
            ];
            args.smithchart.series[1].points = [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }];
            args.smithchart.loaded = null;
            args.smithchart.refresh();
        }
    </script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Add title to SmithChart

smithchart title API used to add title for smithchart. In that text API used to set text of the title. API visible used to toggle the title.

CSHTML
Title.cs
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
<ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-title text="Transmission lines applied for both impedance and admittance"></e-smithchart-title>
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1"></e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
    </ejs-smithchart>
  <script>
        function loaded(args) {
            window.smithchart = args.smithchart;
            args.smithchart.series[0].points = [
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
            ];
            args.smithchart.series[1].points = [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }];
            args.smithchart.loaded = null;
            args.smithchart.refresh();
        }
    </script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Enable marker to the Smith chart

To use marker in series and its customization in Smith chart, use series marker API. To display marker for a particular series, specify the marker visible to true. The following sample marker is enabled for the first series only.

CSHTML
Marker.cs
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
  <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-title text="Transmission lines applied for both impedance and admittance"></e-smithchart-title>
        <e-smithchart-legendsettings visible="true"></e-smithchart-legendsettings>
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1">
                <e-smithchartseries-marker visible="true"></e-smithchartseries-marker>
            </e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
    </ejs-smithchart>
 <script>
        function loaded(args) {
            window.smithchart = args.smithchart;
            args.smithchart.series[0].points = [
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
                { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
                { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
                { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
            ];
            args.smithchart.series[1].points = [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
            { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
            { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
            { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
            { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
            { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
            { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }];
            args.smithchart.loaded = null;
            args.smithchart.refresh();
        }
    </script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Enable data label to marker

To use marker data label and its customization in Smith chart, use marker dataLabel. To display data label for a particular series marker, specify the dataLabel visible to true in that series marker. The following sample data label is enabled for the first series.

CSHTML
Data-label.cs
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
 <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-title text="Transmission lines applied for both impedance and admittance"></e-smithchart-title>
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1">
                <e-smithchartseries-marker visible="true">
                    <e-series-marker-datalabel visible="true"></e-series-marker-datalabel>
                </e-smithchartseries-marker>
            </e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
    </ejs-smithchart>
<script>
    function loaded(args) {
        window.smithchart = args.smithchart;
        args.smithchart.series[0].points = [
            { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
            { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
            { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
            { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
            { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
            { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
            { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
            { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
            { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
            { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
            { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
        ];
        args.smithchart.series[1].points = [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
        { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
        { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
        { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
        { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
        { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
        { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
        { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
        { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }];
        args.smithchart.loaded = null;
        args.smithchart.refresh();
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Enable legend for Smith chart

The legend feature is used to denote the corresponding series. You can enable the legend for the smithchart by setting the [visible]
property to true in [legendSettings] object. The following sample shows enabling legend for Smith chart. The series name can be customized using the series name.

CSHTML
Legend.cs
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
 <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-title text="Transmission lines applied for both impedance and admittance"></e-smithchart-title>
        <e-smithchart-legendsettings visible="true"></e-smithchart-legendsettings>
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1">
                <e-smithchartseries-marker visible="true">
                    <e-series-marker-datalabel visible="true"></e-series-marker-datalabel>
                </e-smithchartseries-marker>
            </e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2"></e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
</ejs-smithchart>
<script>
    function loaded(args) {
        window.smithchart = args.smithchart;
        args.smithchart.series[0].points = [
            { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
            { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
            { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
            { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
            { resistance: 0, reactance: 0.05 }, { resistance: 0, reactance: 0.05 },
            { resistance: 0.3, reactance: 0.1 }, { resistance: 0.5, reactance: 0.2 },
            { resistance: 1.5, reactance: 0.5 }, { resistance: 2.0, reactance: 0.5 },
            { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
            { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
            { resistance: 2.5, reactance: 0.4 }, { resistance: 3.5, reactance: 0.0 },
            { resistance: 4.5, reactance: -0.5 }, { resistance: 5.0, reactance: -1.0 }
        ];
        args.smithchart.series[1].points = [{ resistance: 0, reactance: 0.15 }, { resistance: 0, reactance: 0.15 },
        { resistance: 0, reactance: 0.15 }, { resistance: 0.3, reactance: 0.2 },
        { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
        { resistance: 0.3, reactance: 0.2 }, { resistance: 0.3, reactance: 0.2 },
        { resistance: 0.5, reactance: 0.4 }, { resistance: 1.0, reactance: 0.8 },
        { resistance: 2.5, reactance: 1.3 }, { resistance: 3.5, reactance: 1.6 },
        { resistance: 3.5, reactance: 1.6 }, { resistance: 3.5, reactance: 1.6 },
        { resistance: 4.5, reactance: 2.0 }, { resistance: 6.0, reactance: 4.5 },
        { resistance: 8, reactance: 6 }, { resistance: 10, reactance: 25 }];
        args.smithchart.loaded = null;
        args.smithchart.refresh();
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

The tooltip feature is used to show the values of the current point. You can enable tooltip by setting the [visible] property to true
in [tooltipSettings] object. The following sample shows enabling tooltip for Smith chart series collection.

CSHTML
Tooltip.cs
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Charts;
 <ejs-smithchart id="smithchart" loaded="loaded">
        <e-smithchart-title text="Transmission lines applied for both impedance and admittance"></e-smithchart-title>
        <e-smithchart-legendsettings visible="true"></e-smithchart-legendsettings>
        <e-smithchart-smithchartseriescollection>
            <e-smithchart-smithchartseries name="Transmission1">
                <e-smithchartseries-tooltip visible="true"></e-smithchartseries-tooltip>
                <e-smithchartseries-marker visible="true">
                    <e-series-marker-datalabel visible="true"></e-series-marker-datalabel>
                </e-smithchartseries-marker>
            </e-smithchart-smithchartseries>
            <e-smithchart-smithchartseries name="Transmission2">
                <e-smithchartseries-tooltip visible="true"></e-smithchartseries-tooltip>
            </e-smithchart-smithchartseries>
        </e-smithchart-smithchartseriescollection>
        </ejs-smithchart>
</ejs-smithchart>
<script>
    function loaded(args) {
        window.smithchart = args.smithchart;
        args.smithchart.series[0].points = [
            { resistance: 10, reactance: 25 }, { resistance: 8, reactance: 6 },
                { resistance: 6, reactance: 4.5 }, { resistance: 4.5, reactance: 2 },
                { resistance: 3.5, reactance: 1.6 }, { resistance: 2.5, reactance: 1.3 },
                { resistance: 2, reactance: 1.2 }, { resistance: 1.5, reactance: 1 },
                { resistance: 1, reactance: 0.8 }, { resistance: 0.5, reactance: 0.4 },
                { resistance: 0.3, reactance: 0.2 }, { resistance: 0, reactance: 0.15 },
        ];
        args.smithchart.series[1].points = [{ resistance: 20, reactance: -50 }, { resistance: 10, reactance: -10 },
                { resistance: 9, reactance: -4.5 }, { resistance: 8, reactance: -3.5 },
                { resistance: 7, reactance: -2.5 }, { resistance: 6, reactance: -1.5 },
                { resistance: 5, reactance: -1 }, { resistance: 4.5, reactance: -0.5 },
                { resistance: 3.5, reactance: 0 }, { resistance: 2.5, reactance: 0.4 },
                { resistance: 2, reactance: 0.5 }, { resistance: 1.5, reactance: 0.5 },
                { resistance: 1, reactance: 0.4 }, { resistance: 0.5, reactance: 0.2 },
                { resistance: 0.3, reactance: 0.1 }, { resistance: 0, reactance: 0.05 },];
        args.smithchart.loaded = null;
        args.smithchart.refresh();
    }
</script>
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Getting Started with ASP.NET Core

Prerequisites

Setup ASP.NET Core application with Essential JS 2 for ASP.NET Core

Add series to Smith chart

Add title to SmithChart

Enable marker to the Smith chart

Enable data label to marker

Enable legend for Smith chart

Enable tooltip for the Smith chart series