Skip to main content

WPF C#/VB
Charts: Part 1 (Creating a Chart)



C#

// AZUL CODING ---------------------------------------
// WPF C#/VB - Charts: Part 1 (Creating a Chart)
// https://youtu.be/x41moxR2BNg


using System;
using System.Windows;
using System.Windows.Controls;
using DataVis = System.Windows.Forms.DataVisualization;

namespace AzulChart
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            Chart1.Series[0].Points.Add(3.0).AxisLabel = "Sample data";
            Chart1.Series[0].BorderWidth = 4;
        }

        private void ChartType_Click(object sender, RoutedEventArgs e)
        {
            switch (((RadioButton)sender).Name)
            {
                case "ColRadio":
                    Chart1.Series[0].ChartType = DataVis.Charting.SeriesChartType.Column;
                    break;
                case "BarRadio":
                    Chart1.Series[0].ChartType = DataVis.Charting.SeriesChartType.Bar;
                    break;
                case "PieRadio":
                    Chart1.Series[0].ChartType = DataVis.Charting.SeriesChartType.Pie;
                    break;
                case "LineRadio":
                    Chart1.Series[0].ChartType = DataVis.Charting.SeriesChartType.Line;
                    break;
                default:
                    break;
            }
        }

        private void UpdateBtn_Click(object sender, RoutedEventArgs e)
        {
            // Sample data,3
            // Example label,6

            Chart1.Series[0].Points.Clear();

            foreach (var point in DataTextBox.Text.Split(new[] { "\r\n", "\r", "\n" }, StringSplitOptions.None))
            {
                // Sample data,3

                var info = point.Split(new[] { "," }, StringSplitOptions.None);
                var label = info[0];
                var value = double.Parse(info[1]);

                Chart1.Series[0].Points.Add(value).AxisLabel = label;
            }
        }
    }
}

Enjoying this tutorial?


VB.NET

' AZUL CODING ---------------------------------------
' WPF C#/VB - Charts: Part 1 (Creating a Chart)
' https://youtu.be/x41moxR2BNg


Imports DataVis = System.Windows.Forms.DataVisualization

Class MainWindow

    Public Sub New()
        InitializeComponent()
        Chart1.Series(0).Points.Add(3.0).AxisLabel = "Sample data"
        Chart1.Series(0).BorderWidth = 4
    End Sub

    Private Sub ChartType_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Select Case (CType(sender, RadioButton)).Name
            Case "ColRadio"
                Chart1.Series(0).ChartType = DataVis.Charting.SeriesChartType.Column
            Case "BarRadio"
                Chart1.Series(0).ChartType = DataVis.Charting.SeriesChartType.Bar
            Case "PieRadio"
                Chart1.Series(0).ChartType = DataVis.Charting.SeriesChartType.Pie
            Case "LineRadio"
                Chart1.Series(0).ChartType = DataVis.Charting.SeriesChartType.Line
            Case Else
        End Select
    End Sub

    Private Sub UpdateBtn_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        Chart1.Series(0).Points.Clear()

        For Each point In DataTextBox.Text.Split({vbCrLf, vbCr, vbLf}, StringSplitOptions.None)
            Dim info = point.Split({","}, StringSplitOptions.None)
            Dim label = info(0)
            Dim value = Double.Parse(info(1))
            Chart1.Series(0).Points.Add(value).AxisLabel = label
        Next
    End Sub

End Class

XAML

<!-- AZUL CODING --------------------------------------- -->
<!-- WPF C#/VB - Charts: Part 1 (Creating a Chart) -->
<!-- https://youtu.be/x41moxR2BNg -->


<Window x:Class="AzulChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:wf="clr-namespace:System.Windows.Forms.DataVisualization.Charting;assembly=System.Windows.Forms.DataVisualization"
        mc:Ignorable="d"
        Title="Charts - Azul Coding" Height="600" Width="850" ResizeMode="CanMinimize">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition MinWidth="500"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid Margin="20,20,0,20" Grid.Column="0">
            <WindowsFormsHost>
                <wf:Chart x:Name="Chart1">
                    <wf:Chart.Series>
                        <wf:Series ChartType="Column"/>
                    </wf:Chart.Series>
                    <wf:Chart.ChartAreas>
                        <wf:ChartArea/>
                    </wf:Chart.ChartAreas>
                </wf:Chart>
            </WindowsFormsHost>
        </Grid>
        <StackPanel Grid.Column="1" Margin="20">
            <Label Content="Chart type" FontSize="14"/>
            <StackPanel Orientation="Horizontal">
                <RadioButton Name="ColRadio" Content="Column" GroupName="ChartTypeRadios" Margin="10,5,0,0" IsChecked="True" Click="ChartType_Click"/>
                <RadioButton Name="BarRadio" Content="Bar" GroupName="ChartTypeRadios" Margin="20,5,0,0" Click="ChartType_Click"/>
                <RadioButton Name="PieRadio" Content="Pie" GroupName="ChartTypeRadios" Margin="20,5,0,0" Click="ChartType_Click"/>
                <RadioButton Name="LineRadio" Content="Line" GroupName="ChartTypeRadios" Margin="20,5,0,0" Click="ChartType_Click"/>
            </StackPanel>
            <Label Content="Chart data" FontSize="14" Margin="0,20,0,0"/>            
            <TextBox Name="DataTextBox" Text="Sample data,3" AcceptsReturn="True" Margin="10,5,10,0" Height="70" Padding="5"/>
            <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
                <Button Name="UpdateBtn" Content="Update" HorizontalAlignment="Left" Padding="20,5" Margin="10,0,0,0" Click="UpdateBtn_Click"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>