LineGraphCanvas

LineGraphCanvas is a Universal Windows Platform custom control for drawing a time progressive Line Graph (Portable to WPF as well).

Installation

After pulling down the repository add the folders and files (Controls, Converters and Styles) to your project.

Usage

Simply add the control to the desired Page.xaml file as follows:

<!-- Remember to add first the namespace -->
xmlns:controls="using:Niuware.Controls"
...

<!-- XScale is the length of the line (X axis), YScale is the scalar for the value -->
<controls:LineGraphCanvas x:Name="myLineGraphCanvas" XScale="10.0" YScale="1.0" />

Then in the constructor of your code Page.cs file, initialize as many values as you need to draw in the the LineGraphCanvas control:

this.InitializeComponent();
...

// If you want you can use a Label for the graph
myLineGraphCanvas.Label = "My Graph Label";

// You can graph different values in the same Line Graph
myLineGraphCanvas.AddLineGraph(0.0, "Value Label", new SolidColorBrush(Windows.UI.Colors.XXX));
...
myLineGraphCanvas.AddLineGraph(0.0, "Other N Value Label", new SolidColorBrush(Windows.UI.Colors.XXX));

Finally, for the drawing loop you can choose one of the following methods:

With CompositionTarget.Rendering

Using the rendering event of the XAML engine:

using Windows.UI.Xaml.Media;

this.InitializeComponent();
CompositionTarget.Rendering += CompositionTarget_Rendering;
...

private void CompositionTarget_Rendering(object sender, object e)
{
  myLineGraphCanvas.UpdateValues(new double[]
  {
      Value_1,
      ...
      
      Value_N
  });
}

With DispatcherTimer

Using a Timer class and set its Tick event:

this.InitializeComponent();
DispatcherTimer timer = new DispatcherTimer();
timer.Interval = new TimeSpan(0, 0, 0, 0, 10); // Each 10 ms
timer.Tick += Timer_Tick;
...

private void Timer_Tick(object sender, object e)
{
  myLineGraphCanvas.UpdateValues(new double[]
  {
      Value_1,
      ...
      
      Value_N
  });
}

You can use the Zoom In/Zoom Out buttons to update the Line Graph scale in real time.

Example

You can see a working example of this control in the MSBandViewer application, available here.

Author

This application was coded by Erik Lopez.

License

Licensed under MIT License