The Ignite UI for Blazor Category Chart uses only one IgbCategoryXAxis and one IgbNumericYAxis type. Similarly, Ignite UI for Blazor Financial Chart uses only one IgbTimeXAxis and one IgbNumericYAxis types. However, the Ignite UI for Blazor Data Chart provides support for multiple axis types that you can position on any side of the chart by setting axis location or even inside of the chart by using axis crossing properties. This topic goes over each one, which axes and series are compatible with each other, and some specific properties to the unique axes.
The IgbCategoryXAxis treats its data as a sequence of categorical data items. It can display almost any type of data including strings and numbers. If you are plotting numbers on this axis, it is important to keep in mind that this axis is a discrete axis and not continuous. This means that each categorical data item will be placed equidistant from the one before it. The items will also be plotted in the order that they appear in the axis' data source.
The IgbCategoryXAxis requires you to provide a DataSource and a Label in order to plot data with it. It is generally used with the IgbNumericYAxis to plot the following type of series:
The following example demonstrates usage of the IgbCategoryXAxis type:
EXAMPLE
MODULES
DATA
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartCategoryCoreModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule),
typeof(IgbDataChartStackedModule),
typeof(IgbStackedFragmentSeriesModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections.Generic;
publicclassContinentsBirthRateItem
{
publicstring Year { get; set; }
publicdouble Asia { get; set; }
publicdouble Africa { get; set; }
publicdouble Europe { get; set; }
publicdouble NorthAmerica { get; set; }
publicdouble SouthAmerica { get; set; }
publicdouble Oceania { get; set; }
}
publicclassContinentsBirthRate
: List<ContinentsBirthRateItem>
{
publicContinentsBirthRate()
{
this.Add(new ContinentsBirthRateItem()
{
Year = @"1950",
Asia = 62,
Africa = 13,
Europe = 10,
NorthAmerica = 4,
SouthAmerica = 8,
Oceania = 1
});
this.Add(new ContinentsBirthRateItem()
{
Year = @"1960",
Asia = 68,
Africa = 12,
Europe = 15,
NorthAmerica = 4,
SouthAmerica = 9,
Oceania = 2
});
this.Add(new ContinentsBirthRateItem()
{
Year = @"1970",
Asia = 80,
Africa = 17,
Europe = 11,
NorthAmerica = 3,
SouthAmerica = 9,
Oceania = 1
});
this.Add(new ContinentsBirthRateItem()
{
Year = @"1980",
Asia = 77,
Africa = 21,
Europe = 12,
NorthAmerica = 3,
SouthAmerica = 10,
Oceania = 2
});
this.Add(new ContinentsBirthRateItem()
{
Year = @"1990",
Asia = 87,
Africa = 24,
Europe = 9,
NorthAmerica = 3,
SouthAmerica = 10,
Oceania = 1
});
this.Add(new ContinentsBirthRateItem()
{
Year = @"2000",
Asia = 79,
Africa = 28,
Europe = 8,
NorthAmerica = 4,
SouthAmerica = 9,
Oceania = 3
});
this.Add(new ContinentsBirthRateItem()
{
Year = @"2010",
Asia = 78,
Africa = 35,
Europe = 10,
NorthAmerica = 4,
SouthAmerica = 8,
Oceania = 2
});
this.Add(new ContinentsBirthRateItem()
{
Year = @"2020",
Asia = 75,
Africa = 43,
Europe = 7,
NorthAmerica = 4,
SouthAmerica = 7,
Oceania = 4
});
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="legend-title">
Annual Birth Rates by World Region
</div><divclass="legend"><IgbLegendName="legend"
@ref="legend"Orientation="LegendOrientation.Horizontal"></IgbLegend></div><divclass="container vertical fill"><IgbDataChartName="chart"
@ref="chart"IsHorizontalZoomEnabled="false"IsVerticalZoomEnabled="false"><IgbCategoryXAxisName="xAxis"
@ref="xAxis"DataSource="ContinentsBirthRate"Label="Year"Gap="0.75"></IgbCategoryXAxis><IgbNumericYAxisName="yAxis"
@ref="yAxis"MinimumValue="0"MaximumValue="140"Interval="20"TitleLeftMargin="10"LabelFormat="{0} m"></IgbNumericYAxis><IgbStackedColumnSeriesName="stackedColumnSeries"
@ref="stackedColumnSeries"DataSource="ContinentsBirthRate"XAxisName="xAxis"YAxisName="yAxis"ShowDefaultTooltip="false"><IgbStackedFragmentSeriesName="s1"
@ref="s1"ValueMemberPath="Asia"Title="@("Asia")"></IgbStackedFragmentSeries><IgbStackedFragmentSeriesName="s2"
@ref="s2"ValueMemberPath="Africa"Title="@("Africa")"></IgbStackedFragmentSeries><IgbStackedFragmentSeriesName="s3"
@ref="s3"ValueMemberPath="Europe"Title="@("Europe")"></IgbStackedFragmentSeries><IgbStackedFragmentSeriesName="s4"
@ref="s4"ValueMemberPath="NorthAmerica"Title="@("North America")"></IgbStackedFragmentSeries><IgbStackedFragmentSeriesName="s5"
@ref="s5"ValueMemberPath="SouthAmerica"Title="@("South America")"></IgbStackedFragmentSeries></IgbStackedColumnSeries><IgbDataToolTipLayerName="dataToolTipLayer"
@ref="dataToolTipLayer"></IgbDataToolTipLayer></IgbDataChart></div></div>@code {private Action BindElements { get; set; }
protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var stackedColumnSeries = this.stackedColumnSeries;
var s1 = this.s1;
var s2 = this.s2;
var s3 = this.s3;
var s4 = this.s4;
var s5 = this.s5;
var dataToolTipLayer = this.dataToolTipLayer;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbDataChart chart;
private IgbCategoryXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbStackedColumnSeries stackedColumnSeries;
private IgbStackedFragmentSeries s1;
private IgbStackedFragmentSeries s2;
private IgbStackedFragmentSeries s3;
private IgbStackedFragmentSeries s4;
private IgbStackedFragmentSeries s5;
private IgbDataToolTipLayer dataToolTipLayer;
private ContinentsBirthRate _continentsBirthRate = null;
public ContinentsBirthRate ContinentsBirthRate
{
get
{
if (_continentsBirthRate == null)
{
_continentsBirthRate = new ContinentsBirthRate();
}
return _continentsBirthRate;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Category Y-Axis
The IgbCategoryYAxis works very similarly to the IgbCategoryXAxis described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a DataSource and a Label in order to plot data with it. The IgbCategoryYAxis is generally used with the IgbNumericXAxis to plot the following type of series:
The following example demonstrates usage of the IgbCategoryYAxis type:
EXAMPLE
MODULES
DATA
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartVerticalCategoryModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}cs
The following example demonstrates usage of the IgbNumericXAxis:
EXAMPLE
MODULES
DATA
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataChartScatterCoreModule),
typeof(IgbDataChartScatterModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbNumberAbbreviatorModule),
typeof(IgbHighDensityScatterSeriesModule),
typeof(IgbNumericYAxisModule),
typeof(IgbNumericXAxisModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections.Generic;
namespaceInfragistics.Samples
{
publicclassSampleDensityData
{
publicstatic Random random = new Random();
publicstatic List<SampleDensityPoint> Create()
{
var amount = 25000;
var data = new List<SampleDensityPoint>();
generate(data, amount / 2, 0, 0, 75000, 20000);
generate(data, amount / 4, 0, 0, 100000, 25000);
generate(data, amount / 8, 0, 0, 150000, 30000);
generate(data, amount / 8, 0, 0, 200000, 75000);
return data;
}
publicstaticvoidgenerate(
List<SampleDensityPoint> data, int count,
int centerX, int centerY, int spreadX, int spreadY) {
for (var i = 0; i <= count; i++)
{
var rangeX = random.NextDouble() * spreadX;
var rangeY = random.NextDouble() * spreadY;
var prop = random.NextDouble();
var flip = 1;
if (prop < .25) {
rangeX *= flip;
rangeY *= flip;
}
elseif (prop >= .25 && prop < .5) {
rangeX *= -flip;
rangeY *= flip;
}
elseif (prop >= .5 && prop < .75) {
rangeX *= flip;
rangeY *= -flip;
}
else {
rangeX *= -flip;
rangeY *= -flip;
}
var dispersionX = random.NextDouble() + 0.12;
var dispersionY = random.NextDouble() + 0.12;
var x = Math.Round(centerX + (rangeX * dispersionX));
var y = Math.Round(centerY + (rangeY * dispersionY));
data.Add(new SampleDensityPoint { X = x, Y = y });
}
}
}
publicclassSampleDensityPoint
{
publicdouble X { get; set; }
publicdouble Y { get; set; }
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="container vertical"><divclass="options vertical"><spanclass="legend-title">Stars Distribution in Milky Way Galaxy</span></div>@if (Data != null)
{<IgbDataChartHeight="100%"Width="100%"IsHorizontalZoomEnabled="true"IsVerticalZoomEnabled="true"><IgbNumericXAxisName="xAxis"AbbreviateLargeNumbers="true"TitleBottomMargin="10"Title="Plane of Rotation (in Light Years)"></IgbNumericXAxis><IgbNumericYAxisName="yAxis"AbbreviateLargeNumbers="true"TitleLeftMargin="10"Title="Vertical Plane (in Light Years)"></IgbNumericYAxis><IgbHighDensityScatterSeriesXAxisName="xAxis"YAxisName="yAxis"Title="Distribution"DataSource="Data"XMemberPath="X"YMemberPath="Y"ShowDefaultTooltip="true"MouseOverEnabled="true"ProgressiveLoad="true"HeatMinimumColor="Black"HeatMaximumColor="Yellow"HeatMaximum="1"HeatMinimum="5"Resolution="3"></IgbHighDensityScatterSeries></IgbDataChart>}</div></div>@code {private List<SampleDensityPoint> Data;
protectedoverridevoidOnInitialized()
{
Data = SampleDensityData.Create();
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Numeric Y-Axis
The IgbNumericYAxis treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the IgbNumericYAxis labels depends on the YMemberPath property of the various ScatterSeries that is supports if combined with a IgbNumericXAxis. Alternatively, if combined with the IgbCategoryYAxis, these labels will be placed corresponding to the ValueMemberPath of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using.
The IgbNumericYAxis is compatible with the following type of series:
The following example demonstrates usage of the IgbNumericYAxis:
EXAMPLE
MODULES
DATA
RAZOR
CSS
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbNumberAbbreviatorModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartScatterModule),
typeof(IgbDataChartScatterCoreModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}cs
// NOTE this file contains multiple data sources:// Data Source #1using System;
using System.Collections.Generic;
publicclassHealthDataForFranceItem
{
publicdouble Year { get; set; }
publicdouble HealthExpense { get; set; }
publicdouble LifeExpectancy { get; set; }
publicstring Name { get; set; }
}
publicclassHealthDataForFrance
: List<HealthDataForFranceItem>
{
publicHealthDataForFrance()
{
this.Add(new HealthDataForFranceItem() { Year = 1985, HealthExpense = 2025.98, LifeExpectancy = 75.92, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1986, HealthExpense = 2075.21, LifeExpectancy = 76.24, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1987, HealthExpense = 2140.51, LifeExpectancy = 76.08, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1988, HealthExpense = 2119.07, LifeExpectancy = 76.22, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1989, HealthExpense = 2112.67, LifeExpectancy = 76.5, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1990, HealthExpense = 2519.81, LifeExpectancy = 76.54, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1991, HealthExpense = 2660.33, LifeExpectancy = 76.98, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1992, HealthExpense = 2737.93, LifeExpectancy = 77.18, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1993, HealthExpense = 2761.36, LifeExpectancy = 77.15, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1994, HealthExpense = 2800.17, LifeExpectancy = 77.69, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1995, HealthExpense = 2863.39, LifeExpectancy = 77.74, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1996, HealthExpense = 3034.79, LifeExpectancy = 78.15, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1997, HealthExpense = 3426.25, LifeExpectancy = 78.14, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1998, HealthExpense = 3639.47, LifeExpectancy = 78.33, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 1999, HealthExpense = 3826.04, LifeExpectancy = 78.28, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2000, HealthExpense = 4003.97, LifeExpectancy = 78.63, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2001, HealthExpense = 4139.3, LifeExpectancy = 78.79, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2002, HealthExpense = 4504.06, LifeExpectancy = 78.99, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2003, HealthExpense = 4633.59, LifeExpectancy = 79.39, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2004, HealthExpense = 4734.15, LifeExpectancy = 79.84, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2005, HealthExpense = 4822.75, LifeExpectancy = 80.04, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2006, HealthExpense = 4846.36, LifeExpectancy = 80.34, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2007, HealthExpense = 4965.14, LifeExpectancy = 80.4, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2008, HealthExpense = 5149.6, LifeExpectancy = 80.59, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2009, HealthExpense = 5254.08, LifeExpectancy = 80.8, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2010, HealthExpense = 5240.42, LifeExpectancy = 81, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2011, HealthExpense = 5387.98, LifeExpectancy = 81.3, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2012, HealthExpense = 5499.09, LifeExpectancy = 81.45, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2013, HealthExpense = 5557.2, LifeExpectancy = 81.75, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2014, HealthExpense = 5730.16, LifeExpectancy = 82.1, Name = @"Norway" });
this.Add(new HealthDataForFranceItem() { Year = 2015, HealthExpense = 5926.44, LifeExpectancy = 82.3, Name = @"Norway" });
}
}
// Data Source #2using System;
using System.Collections.Generic;
publicclassHealthDataForGermanyItem
{
publicdouble Year { get; set; }
publicdouble HealthExpense { get; set; }
publicdouble LifeExpectancy { get; set; }
publicstring Name { get; set; }
}
publicclassHealthDataForGermany
: List<HealthDataForGermanyItem>
{
publicHealthDataForGermany()
{
this.Add(new HealthDataForGermanyItem() { Year = 1985, HealthExpense = 2579.64, LifeExpectancy = 74.05, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1986, HealthExpense = 2603.94, LifeExpectancy = 74.31, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1987, HealthExpense = 2668.49, LifeExpectancy = 74.56, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1988, HealthExpense = 2812.94, LifeExpectancy = 74.79, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1989, HealthExpense = 2689.51, LifeExpectancy = 75.01, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1990, HealthExpense = 2774.68, LifeExpectancy = 75.23, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1992, HealthExpense = 2909.85, LifeExpectancy = 75.82, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1993, HealthExpense = 2853.09, LifeExpectancy = 75.87, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1994, HealthExpense = 2989.64, LifeExpectancy = 76.27, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1995, HealthExpense = 3122.13, LifeExpectancy = 76.42, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1996, HealthExpense = 3241.89, LifeExpectancy = 76.67, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1997, HealthExpense = 3257.29, LifeExpectancy = 77.07, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1998, HealthExpense = 3327.26, LifeExpectancy = 77.48, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 1999, HealthExpense = 3414.57, LifeExpectancy = 77.73, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2000, HealthExpense = 3536.35, LifeExpectancy = 77.93, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2001, HealthExpense = 3603.77, LifeExpectancy = 78.33, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2002, HealthExpense = 3687.38, LifeExpectancy = 78.23, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2003, HealthExpense = 3745.14, LifeExpectancy = 78.38, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2004, HealthExpense = 3704.96, LifeExpectancy = 78.68, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2005, HealthExpense = 3787.13, LifeExpectancy = 78.93, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2006, HealthExpense = 3875.14, LifeExpectancy = 79.13, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2007, HealthExpense = 3950.17, LifeExpectancy = 79.53, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2008, HealthExpense = 4079.09, LifeExpectancy = 79.74, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2009, HealthExpense = 4232.58, LifeExpectancy = 79.84, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2010, HealthExpense = 4358.61, LifeExpectancy = 79.99, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2011, HealthExpense = 4396.44, LifeExpectancy = 80.44, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2012, HealthExpense = 4516.99, LifeExpectancy = 80.54, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2013, HealthExpense = 4589.37, LifeExpectancy = 80.49, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2014, HealthExpense = 4684.49, LifeExpectancy = 81.09, Name = @"Germany" });
this.Add(new HealthDataForGermanyItem() { Year = 2015, HealthExpense = 4772.33, LifeExpectancy = 80.64, Name = @"Germany" });
}
}
cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="legend-title">
Life Expectancy vs Health Expenditure
</div><divclass="legend"><IgbLegendName="legend"
@ref="legend"Orientation="LegendOrientation.Horizontal"></IgbLegend></div><divclass="container vertical fill"><IgbDataChartName="chart"
@ref="chart"><IgbNumericXAxisName="xAxis"
@ref="xAxis"Title="Life Expectancy (in years)"MinimumValue="72"MaximumValue="84"Interval="2"></IgbNumericXAxis><IgbNumericYAxisName="yAxis"
@ref="yAxis"Title="Health Expenditure per Capita"AbbreviateLargeNumbers="true"MinimumValue="1000"MaximumValue="6000"Interval="1000"></IgbNumericYAxis><IgbScatterLineSeriesName="ScatterLineSeries1"
@ref="scatterLineSeries1"Title="Germany"XAxisName="xAxis"YAxisName="yAxis"XMemberPath="LifeExpectancy"YMemberPath="HealthExpense"DataSource="HealthDataForGermany"MarkerType="MarkerType.Circle"ShowDefaultTooltip="true"></IgbScatterLineSeries><IgbScatterLineSeriesName="ScatterLineSeries2"
@ref="scatterLineSeries2"Title="France"XAxisName="xAxis"YAxisName="yAxis"XMemberPath="LifeExpectancy"YMemberPath="HealthExpense"DataSource="HealthDataForFrance"MarkerType="MarkerType.Circle"ShowDefaultTooltip="true"></IgbScatterLineSeries><IgbDataToolTipLayerName="dataToolTipLayer"
@ref="dataToolTipLayer"></IgbDataToolTipLayer></IgbDataChart></div></div>@code {private Action BindElements { get; set; }
protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var scatterLineSeries1 = this.scatterLineSeries1;
var scatterLineSeries2 = this.scatterLineSeries2;
var dataToolTipLayer = this.dataToolTipLayer;
this.BindElements = () => {
chart.Legend = this.legend;
};
this.BindElements();
}
private IgbLegend legend;
private IgbDataChart chart;
private IgbNumericXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbScatterLineSeries scatterLineSeries1;
private IgbScatterLineSeries scatterLineSeries2;
private IgbDataToolTipLayer dataToolTipLayer;
private HealthDataForGermany _healthDataForGermany = null;
public HealthDataForGermany HealthDataForGermany
{
get
{
if (_healthDataForGermany == null)
{
_healthDataForGermany = new HealthDataForGermany();
}
return _healthDataForGermany;
}
}
private HealthDataForFrance _healthDataForFrance = null;
public HealthDataForFrance HealthDataForFrance
{
get
{
if (_healthDataForFrance == null)
{
_healthDataForFrance = new HealthDataForFrance();
}
return _healthDataForFrance;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Time X Axis
The IgbTimeXAxis treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its DateTimeMemberPath. This, along with a DataSource is required to plot data with this axis type.
The IgbTimeXAxis has the option to exclude intervals of data by using Breaks. As a result, the labels and plotted data will not appear at the excluded interval. For example, working/non-working days, holidays, and/or weekends. An instance of IgbTimeAxisBreak can be added to the Breaks collection of the axis and configured by using a unique Start, End and Interval.
Formating in Time X Axis
The IgbTimeXAxis has the LabelFormats property, which represents a collection of IgbTimeAxisLabelFormat objects. Each IgbTimeAxisLabelFormat added to the collection is responsible for assigning a unique Format and Range. This can be especially useful for drilling down data from years to milliseconds and adjusting the labels depending on the range of time shown by the chart.
The Format property of the IgbTimeAxisLabelFormat specifies what format to use for a particular visible range. The Range property of the IgbTimeAxisLabelFormat specifies the visible range at which the axis label formats will switch to a different format. For example, if you have two IgbTimeAxisLabelFormat elements with a range set to 10 days and another set to 5 hours, then as soon as the visible range of the axis becomes less than 10 days, it will switch to 5-hour format.
Intervals in Time X Axis
The IgbTimeXAxis replaces the conventional Interval property of the category and numeric axes with an Intervals collection of type IgbTimeAxisInterval. Each IgbTimeAxisInterval added to the collection is responsible for assigning a unique Interval, Range and IntervalType. This can be especially useful for drilling down data from years to milliseconds to provide unique spacing between labels depending on the range of time shown by the chart. A description of these properties is below:
Interval: This specifies the interval to use. This is tied to the IntervalType property. For example, if the IntervalType is set to Days, then the numeric value specified in Interval will be in days.
Range: This specifies the visible range at which the axis interval will switch to a different interval. For example, if you have two TimeAxisInterval with a range set to 10 days and another set to 5 hours, as soon as the visible range in the axis becomes less than 10 days it will switch to the interval whose range is 5 hours.
The IgbDataChart with Polar Axes, allows you to plot data outwards (radius axis) from center of the chart and around (angle axis) of center of the chart.
Category Angle Axis
The IgbCategoryAngleAxis treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
The IgbProportionalCategoryAngleAxis treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
The IgbNumericAngleAxis treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the IgbNumericAngleAxis varies according to the value in the data column mapped using the RadiusMemberPath property of the Polar Series object or the ValueMemberPath property of the Radial Series object.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartPolarModule),
typeof(IgbDataChartPolarCoreModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="legend-title">
Wind Speed vs Boat Speed
</div><divclass="container vertical fill"><IgbDataChartName="chart"
@ref="chart"IsHorizontalZoomEnabled="false"IsVerticalZoomEnabled="false"><IgbNumericAngleAxisName="angleAxis"
@ref="angleAxis"StartAngleOffset="-90"Interval="30"MinimumValue="0"MaximumValue="360"></IgbNumericAngleAxis><IgbNumericRadiusAxisName="radiusAxis"
@ref="radiusAxis"RadiusExtentScale="0.9"InnerRadiusExtentScale="0.1"Interval="25"MinimumValue="0"MaximumValue="100"></IgbNumericRadiusAxis><IgbPolarScatterSeriesName="PolarScatterSeries1"
@ref="polarScatterSeries1"DataSource="BoatSailingData"AngleAxisName="angleAxis"RadiusAxisName="radiusAxis"AngleMemberPath="Direction"RadiusMemberPath="WindSpeed"ShowDefaultTooltip="false"Title="Wind Speed"MarkerType="MarkerType.Circle"></IgbPolarScatterSeries><IgbPolarScatterSeriesName="PolarScatterSeries2"
@ref="polarScatterSeries2"DataSource="BoatSailingData"AngleAxisName="angleAxis"RadiusAxisName="radiusAxis"AngleMemberPath="Direction"RadiusMemberPath="BoatSpeed"ShowDefaultTooltip="false"Title="Boat Speed"MarkerType="MarkerType.Circle"></IgbPolarScatterSeries><IgbDataToolTipLayerName="dataToolTipLayer"
@ref="dataToolTipLayer"></IgbDataToolTipLayer></IgbDataChart></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var chart = this.chart;
var angleAxis = this.angleAxis;
var radiusAxis = this.radiusAxis;
var polarScatterSeries1 = this.polarScatterSeries1;
var polarScatterSeries2 = this.polarScatterSeries2;
var dataToolTipLayer = this.dataToolTipLayer;
}
private IgbDataChart chart;
private IgbNumericAngleAxis angleAxis;
private IgbNumericRadiusAxis radiusAxis;
private IgbPolarScatterSeries polarScatterSeries1;
private IgbPolarScatterSeries polarScatterSeries2;
private IgbDataToolTipLayer dataToolTipLayer;
private BoatSailingData _boatSailingData = null;
public BoatSailingData BoatSailingData
{
get
{
if (_boatSailingData == null)
{
_boatSailingData = new BoatSailingData();
}
return _boatSailingData;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Numeric Radius Axis
The IgbNumericRadiusAxis treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the AngleMemberPath property of the corresponding polar series.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
// registering Ignite UI modules
builder.Services.AddIgniteUIBlazor(
typeof(IgbLegendModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartPolarModule),
typeof(IgbDataChartPolarCoreModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}cs