This section explains you the steps required to create a Smithchart and demonstrate the basic usage of the Smithchart control.
To get start with ASP.NET Core application, need to ensure the following software to be installed on the machine.
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.
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.
Install the Syncfusion.EJ2 package to the application
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>
The Smith chart has the following two type of specification for adding series:
The following two ways demonstrate adding two series to the Smith chart.
@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();
}
}
}
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.
@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();
}
}
}
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.
@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();
}
}
}
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.
@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();
}
}
}
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
.
@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.
@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();
}
}
}