SharePoint Dragons

As a follow up of blog post https://sharepointdragons.com/2011/12/08/building-a-silverlight-chart-web-part-for-sharepoint-2010/, we’ll discuss building a Bubble chart. Repeat the same steps as described in the aforementioned blog post, but change this:

In MainPage.xaml, add a chart (as a twist, we’re changing the orientation, but that’s unimportant):

<toolkit:Chart Name=”chart1″>
  <toolkit:Chart.Axes>
    <toolkit:CategoryAxis Orientation=”X” />
  </toolkit:Chart.Axes>
</toolkit:Chart>

What makes this type of chart different from the regular chart is that you don’t create one or more ColumnSeries, instead you’re adding BubbleSeries:

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.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;

namespace Radar.Charts
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            List<DayDto> days = new List<DayDto>()
            {
                new DayDto() { Day = “Mon”, NumberOfVisitors = 10 },
                new DayDto() { Day = “Tue”, NumberOfVisitors = 8 },
                new DayDto() { Day = “Wed”, NumberOfVisitors = 3 },
                new DayDto() { Day = “Thu”, NumberOfVisitors = 7 },
                new DayDto() { Day = “Fri”, NumberOfVisitors = 4 },
                new DayDto() { Day = “Sat”, NumberOfVisitors = 3 },
                new DayDto() { Day = “Sun”, NumberOfVisitors = 1 },
            };

            chart1.Title = “Visitors/days of week in Bubbles”;
            chart1.BorderThickness = new Thickness(10);

            var b1 = new BubbleSeries();
            b1.Name = “days”;
            b1.Title = “Visitors/Days of the Week”;
            b1.IsSelectionEnabled = true;
            b1.ItemsSource = days;
            b1.IndependentValueBinding = new Binding(“Day”);
            b1.DependentValueBinding = new Binding(“NumberOfVisitors”);

            chart1.Series.Add(b1);
        }
    }

    public class DayDto
    {
        public string Day { get; set; }
        public int NumberOfVisitors { get; set; }
    }
}

The end result is dramatically different:

And if we want to be a little more creative, we’ll add another series in a snap:

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.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;

namespace Radar.Charts
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            List<DayDto> days = new List<DayDto>()
            {
                new DayDto() { Day = “Mon”, NumberOfVisitors = 10 },
                new DayDto() { Day = “Tue”, NumberOfVisitors = 8 },
                new DayDto() { Day = “Wed”, NumberOfVisitors = 3 },
                new DayDto() { Day = “Thu”, NumberOfVisitors = 7 },
                new DayDto() { Day = “Fri”, NumberOfVisitors = 4 },
                new DayDto() { Day = “Sat”, NumberOfVisitors = 3 },
                new DayDto() { Day = “Sun”, NumberOfVisitors = 1 },
            };

            List<DayDto> days2 = new List<DayDto>()
            {
                new DayDto() { Day = “Mon”, NumberOfVisitors = 12 },
                new DayDto() { Day = “Tue”, NumberOfVisitors = 5 },
                new DayDto() { Day = “Wed”, NumberOfVisitors = 4 },
                new DayDto() { Day = “Thu”, NumberOfVisitors = 6 },
                new DayDto() { Day = “Fri”, NumberOfVisitors = 5 },
                new DayDto() { Day = “Sat”, NumberOfVisitors = 2 },
                new DayDto() { Day = “Sun”, NumberOfVisitors = 0 },
            };

            chart1.Title = “Visitors/days of week in Bubbles”;
            chart1.BorderThickness = new Thickness(10);
            chart1.Axes[0].Orientation = AxisOrientation.Y;

            var b1 = new BubbleSeries();
            b1.Name = “days”;
            b1.Title = “Visitors of web site 1/Days of the Week”;
            b1.IsSelectionEnabled = true;
            b1.ItemsSource = days;
            b1.IndependentValueBinding = new Binding(“Day”);
            b1.DependentValueBinding = new Binding(“NumberOfVisitors”);

            chart1.Series.Add(b1);

            var b2 = new BubbleSeries();
            b2.Name = “days2”;
            b2.Title = “Visitors of web site 2/Days of the Week”;
            b2.IsSelectionEnabled = true;
            b2.ItemsSource = days2;
            b2.IndependentValueBinding = new Binding(“Day”);
            b2.DependentValueBinding = new Binding(“NumberOfVisitors”);

            chart1.Series.Add(b2);

        }
    }

    public class DayDto
    {
        public string Day { get; set; }
        public int NumberOfVisitors { get; set; }
    }
}

The end result tell us more about the popularity of web site 1 and 2: