Logarithmic Axis
28 Feb 202213 minutes to read
Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numeric values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106).
@Html.EJS().Charts("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).LabelFormat("y")
).PrimaryYAxis(py => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Logarithmic).LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(20).Minimum(0).Maximum(100)
).Render()public ActionResult Index()
{
List<Data> chartData = new List<Data>
{
new Data { xValue = new DateTime(2005, 01, 01), yValue = 100, yValue1 = 28 },
new Data { xValue = new DateTime(2006, 01, 01), yValue = 200, yValue1 = 44 },
new Data { xValue = new DateTime(2007, 01, 01), yValue = 500, yValue1 = 48 },
new Data { xValue = new DateTime(2008, 01, 01), yValue = 1000, yValue1 = 50 },
new Data { xValue = new DateTime(2009, 01, 01), yValue = 8000, yValue1 = 66 },
new Data { xValue = new DateTime(2010, 01, 01), yValue = 90000, yValue1 = 78 },
new Data { xValue = new DateTime(2011, 01, 01), yValue = 99000, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class Data
{
public DateTime xValue;
public double yValue;
public double yValue1;
}Range
Range of an axis, will be calculated automatically based on the provided data, you can also customize the range of the axis using Minimum, Maximum and Interval property of the axis.
@Html.EJS().Charts("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).LabelFormat("y")
).PrimaryYAxis(py => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Logarithmic).LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Minimum(10).Maximum(1000)
).Render()public ActionResult Index()
{
List<Data> chartData = new List<Data>
{
new Data { xValue = new DateTime(2005, 01, 01), yValue = 100, yValue1 = 28 },
new Data { xValue = new DateTime(2006, 01, 01), yValue = 200, yValue1 = 44 },
new Data { xValue = new DateTime(2007, 01, 01), yValue = 500, yValue1 = 48 },
new Data { xValue = new DateTime(2008, 01, 01), yValue = 1000, yValue1 = 50 },
new Data { xValue = new DateTime(2009, 01, 01), yValue = 8000, yValue1 = 66 },
new Data { xValue = new DateTime(2010, 01, 01), yValue = 90000, yValue1 = 78 },
new Data { xValue = new DateTime(2011, 01, 01), yValue = 99000, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class Data
{
public DateTime xValue;
public double yValue;
public double yValue1;
}Logarithmic Base
Logarithmic base can be customized by using the LogBase property of the axis. For example when the logBase is 5, the axis values follows 5-2, 5-1, 50, 51, 52 etc.
@Html.EJS().Charts("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).LabelFormat("y")
).PrimaryYAxis(py => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Logarithmic).LabelFormat("{value}%").LogBase(8)
).Render()public ActionResult Index()
{
List<Data> chartData = new List<Data>
{
new Data { xValue = new DateTime(2005, 01, 01), yValue = 100, yValue1 = 28 },
new Data { xValue = new DateTime(2006, 01, 01), yValue = 200, yValue1 = 44 },
new Data { xValue = new DateTime(2007, 01, 01), yValue = 500, yValue1 = 48 },
new Data { xValue = new DateTime(2008, 01, 01), yValue = 1000, yValue1 = 50 },
new Data { xValue = new DateTime(2009, 01, 01), yValue = 8000, yValue1 = 66 },
new Data { xValue = new DateTime(2010, 01, 01), yValue = 90000, yValue1 = 78 },
new Data { xValue = new DateTime(2011, 01, 01), yValue = 99000, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class Data
{
public DateTime xValue;
public double yValue;
public double yValue1;
}Logarithmic Interval
Logarithmic axis interval can be customized by using the Interval property of the axis. When the logarithmic base is 10 and logarithmic interval is 2, then the axis labels are placed at an interval of 102. The default value of the interval is 1.
@Html.EJS().Charts("container").Series(series =>
{
series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).XName("xValue").YName("yValue").DataSource(ViewBag.dataSource).Name("Germany").Add();
}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).LabelFormat("y")
).PrimaryYAxis(py => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Logarithmic).LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).Interval(2)
).Render()public ActionResult Index()
{
List<Data> chartData = new List<Data>
{
new Data { xValue = new DateTime(2005, 01, 01), yValue = 100, yValue1 = 28 },
new Data { xValue = new DateTime(2006, 01, 01), yValue = 200, yValue1 = 44 },
new Data { xValue = new DateTime(2007, 01, 01), yValue = 500, yValue1 = 48 },
new Data { xValue = new DateTime(2008, 01, 01), yValue = 1000, yValue1 = 50 },
new Data { xValue = new DateTime(2009, 01, 01), yValue = 8000, yValue1 = 66 },
new Data { xValue = new DateTime(2010, 01, 01), yValue = 90000, yValue1 = 78 },
new Data { xValue = new DateTime(2011, 01, 01), yValue = 99000, yValue1 = 84 },
};
ViewBag.dataSource = chartData;
return View();
}
public class Data
{
public DateTime xValue;
public double yValue;
public double yValue1;
}