Search results
Types of Data in ASP.NET Core Range Navigator control
19 Oct 2021 / 4 minutes to read
Numeric
The numeric scale is used to represent the numeric values of data in a Range Selector. By default, the valueType of a Range Selector is Double.
tagHelper
double.cs
<ejs-rangenavigator id="rangeNavigator" valueType="Double" >
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.dataSource" type="StepLine" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>public IActionResult Index()
{
List <data> dataSource = new List<data>
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.dataSource = dataSource;
return View();
}
public class data
{
public double y;
public double y1;
}
Range
The minimum and the maximum of the scale will be calculated automatically based on the provided data. It can be customized by using the minimum, maximum, and interval properties.
tagHelper
range.cs
@{
var value = new object[] { 20,50 };
}
<ejs-rangenavigator id="rangeNavigator" valueType="Double" minimum=10 maximum=400 interval="10" value="value" >
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.dataSource" type="StepLine" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>public IActionResult Index()
{
List <data> dataSource = new List<data>
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.dataSource = dataSource;
return View();
}
public class data
{
public double y;
public double y1;
}
Label Format
The numeric labels can be formatted using the labelFormat property and it supports all the globalized formats.
tagHelper
format.cs
<ejs-rangenavigator id="rangeNavigator" valueType="Double" labelFormat="n1" >
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.dataSource" type="StepLine" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>public IActionResult Index()
{
List <data> dataSource = new List<data>
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.dataSource = dataSource;
return View();
}
public class data
{
public double y;
public double y1;
}
The following table describes the result of applying some commonly used label formats on numeric values.
| Label Value | Label Format property value | Result | Description |
| 1000 | n1 | 1000.0 | The Number is rounded to 1 decimal place |
| 1000 | n2 | 1000.00 | The Number is rounded to 2 decimal place |
| 1000 | n3 | 1000.000 | The Number is rounded to 3 decimal place |
| 0.01 | p1 | 1.0% | The Number is converted to percentage with 1 decimal place |
| 0.01 | p2 | 1.00% | The Number is converted to percentage with 2 decimal place |
| 0.01 | p3 | 1.000% | The Number is converted to percentage with 3 decimal place |
| 1000 | c1 | $1,000.0 | The Currency symbol is appended to number and number is rounded to 1 decimal place |
| 1000 | c2 | $1,000.00 | The Currency symbol is appended to number and number is rounded to 2 decimal place |
Custom Label Format
The Range Selector also supports the Custom Label formats using the placeholders such as {value}$, in which the value represents the axis label, e.g. 20$.
tagHelper
format.cs
<ejs-rangenavigator id="rangeNavigator" valueType="Double" labelFormat="n1" >
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.dataSource" type="StepLine" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>public IActionResult Index()
{
List <data> dataSource = new List<data>
{
new data { y = 12, y1 = 28 },
new data { y = 34, y1 = 44 },
new data { y = 45, y1 = 48 },
new data { y = 56, y1 = 50 },
new data { y = 67, y1 = 66 },
new data { y = 78, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.dataSource = dataSource;
return View();
}
public class data
{
public double y;
public double y1;
}
Logarithmic Axis
The Logarithmic supports the logarithmic scale, and it is used to visualize the data when the Range Selector has numerical values in both the lower (e.g.: 10-6) and the higher (e.g.: 106) orders of the magnitude.
tagHelper
log.cs
@{
var value = new object[] { 2,5 };
}
<ejs-rangenavigator id="rangeNavigator" valueType="Logarithmic" value="value" >
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.datasource" type="StepLine" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>public IActionResult Index()
{
List <data> dataSource = new List<data>
{
new data { y = 12, y1 = 28 },
new data { y = 100, y1 = 44 },
new data { y = 500, y1 = 48 },
new data { y = 1000, y1 = 50 },
new data { y = 5000, y1 = 66 },
new data { y = 7000, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.dataSource = dataSource;
return View();
}
public class data
{
public double y;
public double y1;
}
Range
The minimum and the maximum of the Range Selector will be calculated automatically based on the provided data. It can be customized by using the minimum, maximum, and interval properties.
tagHelper
log-range.cs
@{
var value = new object[] { 2,5 };
}
<ejs-rangenavigator id="rangeNavigator" valueType="Logarithmic" value="value" minimum=10 maximum=1000 interval=1>
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.datasource" type="StepLine" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>public IActionResult Index()
{
List <data> dataSource = new List<data>
{
new data { y = 12, y1 = 28 },
new data { y = 100, y1 = 44 },
new data { y = 500, y1 = 48 },
new data { y = 1000, y1 = 50 },
new data { y = 5000, y1 = 66 },
new data { y = 7000, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.dataSource = dataSource;
return View();
}
public class data
{
public double y;
public double y1;
}
Logarithmic Base
The Logarithmic Base can be customized using the logBase property. The default value of this property is 10.
tagHelper
log-base.cs
@{
var value = new object[] { 2,5 };
}
<ejs-rangenavigator id="rangeNavigator" valueType="Logarithmic" value="value" logBase=4>
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="y" yName="y1" dataSource="ViewBag.datasource" type="StepLine" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>public IActionResult Index()
{
List <data> dataSource = new List<data>
{
new data { y = 12, y1 = 28 },
new data { y = 100, y1 = 44 },
new data { y = 500, y1 = 48 },
new data { y = 1000, y1 = 50 },
new data { y = 5000, y1 = 66 },
new data { y = 7000, y1 = 78 },
new data { y = 89, y1 = 84 },
};
ViewBag.dataSource = dataSource;
return View();
}
public class data
{
public double y;
public double y1;
}
Date-time
The Range Selector supports the DateTime scale and displays the DateTime values as labels in the specified format.
tagHelper
date-time.cs
@{
var value = new object[] { new DateTime(2005,05,01), new DateTime(2010,1,31) };
}
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy" value="value">
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="x" yName="y" dataSource="ViewBag.dataSource" type="Area" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>public IActionResult Index()
{
List <data> dataSource = new List<data>
{
new data { x = new DateTime(2005, 01, 01), y = 21, y1 = 28 },
new data { x = new DateTime(2006, 01, 01), y = 24, y1 = 44 },
new data { x = new DateTime(2007, 01, 01), y = 36, y1 = 48 },
new data { x = new DateTime(2008, 01, 01), y = 38, y1 = 50 },
new data { x = new DateTime(2009, 01, 01), y = 54, y1 = 66 },
new data { x = new DateTime(2010, 01, 01), y = 57, y1 = 78 },
new data { x = new DateTime(2011, 01, 01), y = 70, y1 = 84 },
};
ViewBag.dataSource = dataSource;
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
Date-time Range navigator supports date-time scale and displays date-time values as a labels in the specified format.
Interval Customization
The DateTime intervals can be customized using the interval and the intervalType properties of the Range Selector. For example, if the interval is set to 2 and the intervalType is set to years, the interval will be considered to be 2 years.
DateTime supports the following interval types:
- Auto
- Years
- Quarter
- Months
- Weeks
- Days
- Hours
- Minutes
tagHelper
date-time-interval.cs
@{
var value = new object[] { new DateTime(2005,05,01), new DateTime(2010,1,31) };
}
<ejs-rangenavigator id="rangeNavigator" valueType="DateTime" labelFormat="MMM-yy" value="value" intervalType="Months" interval=4 >
<e-rangenavigator-rangenavigatorseriescollection>
<e-rangenavigator-rangenavigatorseries xName="x" yName="y" dataSource="ViewBag.dataSource" type="Area" width=2>
</e-rangenavigator-rangenavigatorseries>
</e-rangenavigator-rangenavigatorseriescollection>
</ejs-rangenavigator>public IActionResult Index()
{
List <data> dataSource = new List<data>
{
new data { x = new DateTime(2005, 01, 01), y = 21, y1 = 28 },
new data { x = new DateTime(2006, 01, 01), y = 24, y1 = 44 },
new data { x = new DateTime(2007, 01, 01), y = 36, y1 = 48 },
new data { x = new DateTime(2008, 01, 01), y = 38, y1 = 50 },
new data { x = new DateTime(2009, 01, 01), y = 54, y1 = 66 },
new data { x = new DateTime(2010, 01, 01), y = 57, y1 = 78 },
new data { x = new DateTime(2011, 01, 01), y = 70, y1 = 84 },
};
ViewBag.dataSource = dataSource;
return View();
}
public class data
{
public DateTime x;
public double y;
public double y1;
}
Label Format
The labelFormat property is used to format and parse the date to all globalize format.
The following table shows the results of applying some common DateTime formats to the labelFormat property.
| Label Value | Label Format Property Value | Result | Description |
| new Date(2000, 03, 10) | EEEE | Monday | The Date is displayed in day format |
| new Date(2000, 03, 10) | yMd | 04/10/2000 | The Date is displayed in month/date/year format |
| new Date(2000, 03, 10) | MMM | Apr | The Shorthand month for the date is displayed |
| new Date(2000, 03, 10) | hm | 12:00 AM | Time of the date value is displayed as label |
| new Date(2000, 03, 10) | hms | 12:00:00 AM | The Label is displayed in hours:minutes:seconds format |
Thank you for your feedback and comments.We will rectify this as soon as possible!