djangojazz djangojazz - 1 month ago 8
C# Question

WPF are there preferred ways to do 2D charting without a third party library?

I was wanting to do a project to make a very generic reusable user control for charting that was pretty much formless. I was hoping to get my feet wet in charting but it seems almost EVERYONE on the planet uses WPF Toolkit or Sparrow Charts for free 3rd party ways to make charts. Does anyone have experience in binding or building a totally isolated based way of doing charting? I was thinking of doing something generic to start like binding a polyline in a canvas and passing. I was curious if anyone else had been down this road and had tips for setting up binding for event raising and potential dependent properties. I was thinking of following an MVVM architecture approach and doing most of the binding to a ViewModel but I would ultimately want to expose properties to update.

Similar to this in concept (UserControl to embed in another View or MainForm):

<StackPanel>
<Label x:Name="lblCustomDataGridHeader" Content="{Binding TestText}" HorizontalAlignment="Center" FontSize="24"/>
<Canvas Height="260" Width="300">
<Polyline Points="{Binding Points}" Stroke="LightBlue" StrokeThickness="4" />
</Canvas>
</StackPanel>


ViewModel Properties:

public ViewModel()
{
TestText = "Line Chart";
//Obviously some converter or something else here to accept one or many lines
Points = "0,260 10,250 20,245 40,200 50,250 80, 200, 140,100";
}

public string TestText {
get { return _testText; }
set
{
_testText = value;
OnPropertyChanged(NameOf(TestText));
}
}

private string _points;
public string Points {
get { return _points; }
set
{
_points = value;
OnPropertyChanged(NameOf(Points));
}
}


EDIT LATER

I have also tried doing a templated control that binds to a class

<Style TargetType="{x:Type local:LineGraph}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:LineGraph}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Hello" FontSize="20"/>
<Border Grid.Row="1" BorderThickness="1" BorderBrush="Black" CornerRadius="15" Margin="10">
<Canvas Margin="10" x:Name="PART_Canvas">
<Canvas.LayoutTransform>
<ScaleTransform ScaleX="1" ScaleY="-1" />
</Canvas.LayoutTransform>
</Canvas>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>


Class (some of this needs to be cleaned up as I was using someone else's implementation and it was in VB.NET and converted):

public class LineGraph : Control, INotifyPropertyChanged
{

//CONSTRUCTOR
static LineGraph()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(LineGraph), new FrameworkPropertyMetadata(typeof(LineGraph)));
}

public event PropertyChangedEventHandler INotifyPropertyChanged.PropertyChanged;

public void OnPropertyChanged(string info)
{
if (PropertyChanged != null) {
PropertyChanged(this, new PropertyChangedEventArgs(info));
}
}


public static readonly DependencyProperty _Trends = DependencyProperty.RegisterReadOnly("Trends", typeof(Collection<ChartDataSegment>), typeof(LineGraph), new PropertyMetadata(new Collection<ChartDataSegment>())).DependencyProperty;
public Collection<ChartDataSegment> Trends {
get { return (Collection<ChartDataSegment>)GetValue(_Trends); }
}

public override void OnApplyTemplate()
{
base.OnApplyTemplate();
dynamic canvas = GetTemplateChild("PART_Canvas") as Canvas;
if (canvas != null && Trends != null) {
foreach (void trend_loopVariable in Trends) {
trend = trend_loopVariable;
DrawTrend(canvas, trend);
}
}
}

private void DrawTrend(Canvas drawingCanvas, ChartDataSegment Trend)
{
dynamic t = Trend as ChartDataSegment;
if (t != null && t.Points != null) {
for (int i = 1; i <= t.Points.Count - 1; i++) {
dynamic toDraw = new Line {
X1 = t.Points(i - 1).X,
Y1 = t.Points(i - 1).Y,
X2 = t.Points(i).X,
Y2 = t.Points(i).Y,
StrokeThickness = 2,
Stroke = t.LineColor
};
drawingCanvas.Children.Add(toDraw);
}
}
}

}

public class ChartDataSegment : DependencyObject
{


public static readonly DependencyProperty _LineColor = DependencyProperty.Register("LineColor", typeof(Brush), typeof(ChartDataSegment), new PropertyMetadata(null));
public Brush LineColor {
get { return (Brush)GetValue(_LineColor); }
set { SetValue(_LineColor, value); }
}

public static readonly DependencyProperty _LineThickness = DependencyProperty.Register("LineThickness", typeof(Thickness), typeof(ChartDataSegment), new PropertyMetadata(null));
public Thickness PointThickness {
get { return (Thickness)GetValue(_LineThickness); }
set { SetValue(_LineThickness, value); }
}

public static readonly DependencyProperty _Points = DependencyProperty.Register("Points", typeof(ObservableCollection<Point>), typeof(ChartDataSegment), new UIPropertyMetadata(null));
public ObservableCollection<Point> Points {
get { return (ObservableCollection<Point>)GetValue(_Points); }
set { SetValue(_Points, value); }
}
}


And implementation in ViewModel:

var lineTrend1 = new ChartDataSegment {
LineColor = Brushes.Blue,
Points = new ObservableCollection<Point>({
new Point {
X = 1,
Y = 1
},
new Point {
X = 50,
Y = 20
},
new Point {
X = 100,
Y = 100
},
new Point {
X = 150,
Y = 130
}
})
};

var ctrl = new LineGraph();
ctrl.Trends.Add(lineTrend1);


My biggest concern will be not that this can be accomplished but injecting items in on demand not just on instantiation but later after the object is already running to keep updating the lines as needed. EG: Async calls to update a line chart rather than host a static chart that needs to be disposed and then recalled.

My immediate question since Stack Overflow wants specifics on problems is: "Can you easily inject collections(lines) of collections(points) and use a Canvas with a dependent property to self update?"

Answer

I made a specific type of graph that I needed, and like you, I did not use any third party library. I was looking for it and I found this project project: http://www.codeproject.com/Articles/446888/Custom-Spider-or-Radar-Chart-Control

They make a chart similar to the following:

enter image description here

The sources are available for download, and it does not use third-party code so you can easily review all they do.

To create the graph is only necessary to do:

<WpfCharts:SpiderChart Title="Spider chart"  
                   Lines="{Binding Lines}" 
                   Axis="{Binding Axes}" 
                   Minimum="0" 
                   Maximum="1" 
                   Ticks="5" 
                   ShowLegend="True" 
                   LegendLocation="BottomRight" 
                   LegendBackgroundColor="Aquamarine"/> 

Which as you can see already it's binding the properties. I'm already using it in a MVVM project.

I hope it will guide you in the way of what you're looking for.