How To Implement Graph And Chart Control In Windows 10 Universal App

Graphs and charts are useful for visualizing and summarizing data for our users but in Windows 10 Universal app there is no default XAML control in Visual Studio for graphs and charts so we need to use other libraries paid or free such as WinRT XAML Toolkit or TelerikRadControls for Windows UWP.

Let’s see the steps.

Create new Windows 10 universal project.

Then we need to add WinRTXaml Toolkit reference.

Right-click References in Solution Explorer, select Manage NuGet Packages, search WinRTXamlToolkit.Controls.DataVisualization.UWP and install it like the following screen.



After successful installation go to your UI page “MainPage.XAML” and write the following code.

Then add the following namespace in your XAML file.

xmlns:Charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"

Now design the required chart and here I am going to add three charts: pie chart, line chart and column chart using the following code.

<Charting:Chart
x:Name="PieChart"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0" Width="323" >
<Charting:PieSeries Margin="0"
IndependentValuePath="Name"
DependentValuePath="Amount"
IsSelectionEnabled="True"/>
</Charting:Chart>
<Charting:Chart
x:Name="lineChart"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0" Height="159" Width="316" >
<Charting:LineSeries Margin="0"
IndependentValuePath="Name"
DependentValuePath="Amount"
IsSelectionEnabled="True"/>
</Charting:Chart>
<Charting:Chart
x:Name="ColumnChart"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0" Width="329" >
<Charting:ColumnSeries Margin="0"
IndependentValuePath="Name"
DependentValuePath="Amount"CharacterSpacing="5"
IsSelectionEnabled="True"/>
</Charting:Chart>

Now go to code behind page and write the following code. I am going to show record of the user.

publicclassRecords
{
    publicstring Name
    {
        get;
        set;
    }
    publicint Amount
    {
        get;
        set;
    }
}
publicMainPage()
{
    this.InitializeComponent();
    LoadChartContents();
}
privatevoidLoadChartContents()
{
    Random rand = newRandom();
    List < Records > records = newList < Records > ();
    records.Add(newRecords()
    {
        Name = "Suresh", Amount = rand.Next(0, 200)
    });
    records.Add(newRecords()
    {
        Name = "C# Corner", Amount = rand.Next(0, 200)
    });
    records.Add(newRecords()
    {
        Name = "Sam", Amount = rand.Next(0, 200)
    });
    records.Add(newRecords()
    {
        Name = "Sri", Amount = rand.Next(0, 200)
    });
    (PieChart.Series[0] asPieSeries).ItemsSource = records;
    (ColumnChart.Series[0] asColumnSeries).ItemsSource = records;
    (lineChart.Series[0] asLineSeries).ItemsSource = records;
}

Now run the app and see the expected output like the following screen.



For more information on Windows 10 UWP, refer my e-book:

• Windows 10 UWP E-book

Read more articles on Universal Windows Platform: 

• Automating The Building Of UWP Project Using Jenkins
• AutoSuggestBox In UWP