Post
Ask Question

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.

install

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.

  1. <Charting:Chart  
  2. x:Name="PieChart"  
  3. HorizontalAlignment="Left"  
  4. VerticalAlignment="Top"  
  5. Margin="0" Width="323" >  
  6. <Charting:PieSeries Margin="0"  
  7. IndependentValuePath="Name"  
  8. DependentValuePath="Amount"  
  9. IsSelectionEnabled="True"/>  
  10. </Charting:Chart>  
  11. <Charting:Chart  
  12. x:Name="lineChart"  
  13. HorizontalAlignment="Left"  
  14. VerticalAlignment="Top"  
  15. Margin="0" Height="159" Width="316" >  
  16. <Charting:LineSeries Margin="0"  
  17. IndependentValuePath="Name"  
  18. DependentValuePath="Amount"  
  19. IsSelectionEnabled="True"/>  
  20. </Charting:Chart>  
  21. <Charting:Chart  
  22. x:Name="ColumnChart"  
  23. HorizontalAlignment="Left"  
  24. VerticalAlignment="Top"  
  25. Margin="0" Width="329" >  
  26. <Charting:ColumnSeries Margin="0"  
  27. IndependentValuePath="Name"  
  28. DependentValuePath="Amount"CharacterSpacing="5"  
  29. IsSelectionEnabled="True"/>  
  30. </Charting:Chart>  
Now go to code behind page and write the following code. I am going to show record of the user.
  1. publicclassRecords  
  2. {  
  3.     publicstring Name  
  4.     {  
  5.         get;  
  6.         set;  
  7.     }  
  8.     publicint Amount  
  9.     {  
  10.         get;  
  11.         set;  
  12.     }  
  13. }  
  14. publicMainPage()  
  15. {  
  16.     this.InitializeComponent();  
  17.     LoadChartContents();  
  18. }  
  19. privatevoidLoadChartContents()  
  20. {  
  21.     Random rand = newRandom();  
  22.     List < Records > records = newList < Records > ();  
  23.     records.Add(newRecords()   
  24.     {  
  25.         Name = "Suresh", Amount = rand.Next(0, 200)  
  26.     });  
  27.     records.Add(newRecords()  
  28.     {  
  29.         Name = "C# Corner", Amount = rand.Next(0, 200)  
  30.     });  
  31.     records.Add(newRecords()  
  32.     {  
  33.         Name = "Sam", Amount = rand.Next(0, 200)  
  34.     });  
  35.     records.Add(newRecords()  
  36.     {  
  37.         Name = "Sri", Amount = rand.Next(0, 200)  
  38.     });  
  39.     (PieChart.Series[0] asPieSeries).ItemsSource = records;  
  40.     (ColumnChart.Series[0] asColumnSeries).ItemsSource = records;  
  41.     (lineChart.Series[0] asLineSeries).ItemsSource = records;  
  42. }  
Now run the app and see the expected output like the following screen.

APP

For more information on Windows 10 UWP, refer my e-book:
Read more articles on Universal Windows Platform: 


Similar Articles