Click here to Skip to main content
16,016,024 members
Articles / Programming Languages / C#

Silverlight charts, and reaching my inner child

Rate me:
Please Sign up or sign in to vote.
4.67/5 (4 votes)
30 Jul 2009CPOL2 min read 20.6K   8   4
Silverlight charts, and reaching my inner child

So, there was a question in the Code Project forums today from somebody looking to create an application that uses input data, LINQ and charting. My first reaction was, “we don't provide code for people; it’s not rentacoder”, but I took pity on the poor so and so. To that end, I decided to knock together a quick sample for him that hopefully will get the point across to him. Here’s the code in all it’s glory.

First of all, here’s a quick class that I'm going to use to simulate the database table:

C#
using System;

namespace GraphingSample
{
  public class LinqDataSample
  {
    public string Name { get; set; }
    public int Value { get; set; }
  }
}

Hey, I'm not going to do all the hard work and create the whole solution.;->

Here’s the source for the control:

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace GraphingSample
{
  public partial class MainPage : UserControl
  {
    private ObservableCollection<LinqDataSample> _data = 
                new ObservableCollection<LinqDataSample>();
    public MainPage()
    {
      InitializeComponent();

      AddData(10, "Josh");
      AddData(20, "Colin");
      AddData(15, "Karl");
      AddData(33, "Sacha");
      AddData(24, "Bill");
      AddData(39, "Daniel");
      AddData(14, "Corrado");
      AddData(22, "Marlon");
      AddData(24, "Laurent");

      DataContext = Data;
    }

    public ObservableCollection<LinqDataSample> Data
    {
      get
      {
        return _data;
      }
      set
      {
        _data = value;
      }
    }

    private void AddData(int value, string name)
    {
      _data.Add(new LinqDataSample() { Name = name, Value = value });
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
      int value = 0;
      string name = txtName.Text;
      if (!string.IsNullOrEmpty(name))
      {
        if (int.TryParse(txtValue.Text, out value))
        {
          _data.Add(new LinqDataSample() { Name = name, Value = value });
        }
      }
    }
  }
}

Let’s break this code down. We create an ObservableCollection, which we'd normally fill using LINQ to retrieve data from the database. The DataContext allows the XAML to bind to the collection. In the button click method, we are going to update the observable collection with values that the user enters in on the control (we'd normally update the database at this point too). If you're not too aware of how Silverlight and WPF work, then the instant update to the chart because of the ObservableCollection is awesome.

XML
<UserControl
  x:Class="GraphingSample.MainPage"
  xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    http://schemas.microsoft.com/winfx/2006/xaml/presentation</a>"
  xmlns:chart="clr-namespace:System.Windows.Controls.DataVisualization.Charting;
    assembly=System.Windows.Controls.DataVisualization.Toolkit"
  xmlns:d="<a href="http://schemas.microsoft.com/expression/blend/2008">
    http://schemas.microsoft.com/expression/blend/2008</a>"
  xmlns:mc="<a href="http://schemas.openxmlformats.org/markup-compatibility/2006">
    http://schemas.openxmlformats.org/markup-compatibility/2006</a>"
  xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml">
    http://schemas.microsoft.com/winfx/2006/xaml</a>"
  d:DesignHeight="480"
  d:DesignWidth="640"
  mc:Ignorable="d">

The DependentValuePath ties back to the numeric value in the class, and the IndependentValuePath ties up to the name property from our data class. Because we set the ItemsSource to {Binding}, we basically set our item source to pick up the data from the DataContext that we set up in the UserControl.

I will say, at this point, that I normally wouldn't write my code exactly like this – I'm a big proponent of MVVM, but this is a sample aimed at helping somebody who’s new to Silverlight. Take it from me – this stuff is even cooler with MVVM; if you haven't explored it yet, you really owe it to yourself.

That’s it – it’s really easy to do, and Silverlight updating means that it’s incredibly good fun. There you go burger87, this one’s for you.

This article was originally posted at http://peteohanlon.wordpress.com?p=274

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
CEO
United Kingdom United Kingdom
A developer for over 30 years, I've been lucky enough to write articles and applications for Code Project as well as the Intel Ultimate Coder - Going Perceptual challenge. I live in the North East of England with 2 wonderful daughters and a wonderful wife.

I am not the Stig, but I do wish I had Lotus Tuned Suspension.

Comments and Discussions

 
GeneralGot my 5 because this is actually more difficult than it may seem. Pin
defwebserver4-Aug-09 3:32
defwebserver4-Aug-09 3:32 
GeneralRe: Got my 5 because this is actually more difficult than it may seem. Pin
Pete O'Hanlon4-Aug-09 8:56
mvePete O'Hanlon4-Aug-09 8:56 
GeneralGlad you felt pity! ;-) Pin
Wimmo30-Jul-09 22:04
Wimmo30-Jul-09 22:04 
Or else I missed this straightforward example which is for me as a noob silverlight user very welcome.
A 5 from me because I my opinion is this site to share knowlegde about technolygies so others maybe understand it better and faster

Cheers Wim
GeneralRe: Glad you felt pity! ;-) Pin
Pete O'Hanlon31-Jul-09 1:02
mvePete O'Hanlon31-Jul-09 1:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.