|
This article explains how to create a simple chart with header, legend, axis, and series in VB.Net WPF with the following steps.
Step 1:
Create a DataModel class for the chart.
Public Class Person Public Property Name As String Public Property Height As Double End Class
Step 2:
Create a ViewModel class with the DataModel collection to initialize datapoints for series.
Public Class ViewModel
Public Property Data As List(Of Person)
Public Sub New()
Data = New List(Of Person)() From
{
New Person With {.Name = "David", .Height = 180},
New Person With {.Name = "Michael", .Height = 170},
New Person With {.Name = "Steve", .Height = 160},
New Person With {.Name = "Joel", .Height = 182}
}
End Sub
End Class
Step 3:
Initialize the chart with title by using the Header property of the chart and set the DataContext for the chart as ViewModel.
Dim chart As New SfChart() chart.Header = "Chart" chart.DataContext = New ViewModel()
Step 4:
Initialize the required axes by using PrimaryAxis and SecondaryAxis properties.
Dim primaryAxis As New CategoryAxis() primaryAxis.Header = "Name" primaryAxis.FontSize = 14 chart.PrimaryAxis = primaryAxis Dim secondaryAxis As New NumericalAxis() secondaryAxis.Header = "Height(in cm)" secondaryAxis.FontSize = 14 chart.SecondaryAxis = secondaryAxis
Step 5:
Add the legend by using the Legend property of the chart. In addition, you need to set the label for each series using the ChartSeries Label property, which will be displayed in the corresponding legend item.
chart.Legend = New ChartLegend() Dim series As New ColumnSeries() series.Label = "Heights"
Step 6:
Add the required type of series to the chart and set the populated data collection to the series using the ItemsSource property of the chart series. Then, map the XBindingPath and YBindingPath properties of chart series to the required properties in the model to retrieve the data from the model and render the chart.
Dim series As New ColumnSeries() series.ItemsSource = CType(chart.DataContext, ViewModel).Data series.XBindingPath = "Name" series.YBindingPath = "Height" series.Label = "Heights" chart.Series.Add(series)
The following code snippet gives you the consolidated configuration of all of the above codes to create a simple chart.
Code snippet 'Defining the chart. Dim chart As New SfChart() 'Setting DataContext for the chart. chart.DataContext = New ViewModel() 'Adding Title to the chart. chart.Header = "Chart" 'Adding Legend to the chart. chart.Legend = New ChartLegend() 'Adding horizontal axis to the chart. Dim primaryAxis As New CategoryAxis() primaryAxis.Header = "Name" primaryAxis.FontSize = 14 chart.PrimaryAxis = primaryAxis 'Adding vertical axis to the chart. Dim secondaryAxis As New NumericalAxis() secondaryAxis.Header = "Height(in cm)" secondaryAxis.FontSize = 14 chart.SecondaryAxis = secondaryAxis 'Adding Series to the Chart Series Collection. Dim series As New ColumnSeries() series.ItemsSource = CType(chart.DataContext, ViewModel).Data series.XBindingPath = "Name" series.YBindingPath = "Height" series.Label = "Heights" chart.Series.Add(series)
Output
Take a moment to peruse the documentation, where you can find the brief description about creation of chart. See also
|
2X faster development
The ultimate WPF UI toolkit to boost your development speed.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
