SharePoint Dragons

Nikander & Margriet on SharePoint

Tag Archives: Silverlight

About the chart controls in the SilverLight 5 Toolkit

5 Comments Posted by on December 12, 2011

As a follow up of blog post https://sharepointdragons.com/2011/12/08/building-a-silverlight-chart-web-part-for-sharepoint-2010/, we’ll provide code examples of the various chart controls that can be found in the SilverLight 5 Toolkit. Repeat the same steps as described in the aforementioned blog post, but change this:

Building a Scatter chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 ScatterSeries:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Scatters”;
chart1.BorderThickness = new Thickness(10);

var b1 = new ScatterSeries();
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 ScatterSeries();
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:

image

Building a Line chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 LineSeries:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Lines”;
chart1.BorderThickness = new Thickness(10);

var b1 = new LineSeries();
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 LineSeries();
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:

image

Building a Column chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</toolkit:Chart>

The regular chart: you have to create one or more ColumnSeries:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Columns”;
chart1.BorderThickness = new Thickness(10);

var b1 = new ColumnSeries();
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 ColumnSeries();
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:

image

Building a Bar chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 BarSeries:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Bars”;
chart1.BorderThickness = new Thickness(10);

var b1 = new BarSeries();
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 BarSeries();
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:

image

Building a Area chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 AreaSeries:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Areas”;
chart1.BorderThickness = new Thickness(10);

var b1 = new AreaSeries();
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 AreaSeries();
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:

image

Building a Pie chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 PieSeries:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Pies”;
chart1.BorderThickness = new Thickness(10);

var b1 = new PieSeries();
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);

}
}

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

The end result:

image

Building a Stacked Line chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 SeriesDefinitions:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Stacked Lines”;

var b1 = new StackedLineSeries();
b1.Name = “days”;
var s1 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s1);
s1.Title = “Visitors of web site 1/Days of the Week”;
s1.ItemsSource = days;
s1.IndependentValueBinding = new Binding(“Day”);
s1.DependentValueBinding = new Binding(“NumberOfVisitors”);

var s2 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s2);
s2.Title = “Visitors of web site 2/Days of the Week”;
s2.ItemsSource = days2;
s2.IndependentValueBinding = new Binding(“Day”);
s2.DependentValueBinding = new Binding(“NumberOfVisitors”);

chart1.Series.Add(b1);
}
}

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

The end result:

image

Building a Stacked Column chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 SeriesDefinitions:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Stacked Columns”;

var b1 = new StackedColumnSeries();
b1.Name = “days”;
var s1 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s1);
s1.Title = “Visitors of web site 1/Days of the Week”;
s1.ItemsSource = days;
s1.IndependentValueBinding = new Binding(“Day”);
s1.DependentValueBinding = new Binding(“NumberOfVisitors”);

var s2 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s2);
s2.Title = “Visitors of web site 2/Days of the Week”;
s2.ItemsSource = days2;
s2.IndependentValueBinding = new Binding(“Day”);
s2.DependentValueBinding = new Binding(“NumberOfVisitors”);

chart1.Series.Add(b1);
}
}

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

The end result:

image

Building a Stacked Area chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 SeriesDefinitions:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Stacked Areas”;

var b1 = new StackedAreaSeries();
b1.Name = “days”;
var s1 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s1);
s1.Title = “Visitors of web site 1/Days of the Week”;
s1.ItemsSource = days;
s1.IndependentValueBinding = new Binding(“Day”);
s1.DependentValueBinding = new Binding(“NumberOfVisitors”);

var s2 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s2);
s2.Title = “Visitors of web site 2/Days of the Week”;
s2.ItemsSource = days2;
s2.IndependentValueBinding = new Binding(“Day”);
s2.DependentValueBinding = new Binding(“NumberOfVisitors”);

chart1.Series.Add(b1);
}
}

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

The end result:

image

Building a Stacked Bar chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 SeriesDefinitions:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Stacked Bars”;

var b1 = new StackedBarSeries();
b1.Name = “days”;
var s1 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s1);
s1.Title = “Visitors of web site 1/Days of the Week”;
s1.ItemsSource = days;
s1.IndependentValueBinding = new Binding(“Day”);
s1.DependentValueBinding = new Binding(“NumberOfVisitors”);

var s2 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s2);
s2.Title = “Visitors of web site 2/Days of the Week”;
s2.ItemsSource = days2;
s2.IndependentValueBinding = new Binding(“Day”);
s2.DependentValueBinding = new Binding(“NumberOfVisitors”);

chart1.Series.Add(b1);
}
}

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

The end result:

image

Building a Line chart with custom linear axis

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</toolkit:Chart>

What makes this type of chart different from the regular chart is that you’re adding a LinearAxis:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Linear Axis”;

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

chart1.Series.Add(b1);

var la1 = new LinearAxis();
la1.Orientation = AxisOrientation.Y;
la1.Minimum = 0;
la1.Maximum = 20;
la1.Interval = 2;

chart1.Axes.Add(la1);
}
}

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

The end result:

image

Building a Line chart with custom datetime axis

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</toolkit:Chart>

What makes this type of chart different from the regular chart is that you’re adding a DateTimeAxis:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();

List<DayDto> days3 = new List<DayDto>()
{
new DayDto() { Date = DateTime.Now.AddDays(-10), NumberOfVisitors = 12 },
new DayDto() { Date = DateTime.Now.AddDays(-15), NumberOfVisitors = 5 },
new DayDto() { Date = DateTime.Now.AddDays(-5), NumberOfVisitors = 4 },
new DayDto() { Date = DateTime.Now.AddDays(-7), NumberOfVisitors = 6 },
new DayDto() { Date = DateTime.Now.AddDays(-9), NumberOfVisitors = 5 },
new DayDto() { Date = DateTime.Now.AddDays(-20), NumberOfVisitors = 2 },
new DayDto() { Date = DateTime.Now, NumberOfVisitors = 0 },
};

chart1.Title = “Visitors/dates in Linear Axis with DateTime Axis”;

var b1 = new LineSeries();
b1.Name = “days”;
b1.Title = “Visitors of web site 1/Date of the Week”;
b1.ItemsSource = days3;
b1.IndependentValueBinding = new Binding(“Date”);
b1.DependentValueBinding = new Binding(“NumberOfVisitors”);

chart1.Series.Add(b1);

var la1 = new DateTimeAxis();
la1.Orientation = AxisOrientation.X;
la1.Minimum = DateTime.Now.AddDays(-25);
la1.Maximum = DateTime.Now.AddDays(1);

chart1.Axes.Add(la1);
}
}

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

The end result:

image

Building a Line chart with custom category axis

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</toolkit:Chart>

What makes this type of chart different from the regular chart is that you’re adding  a CategoryAxis:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 in Linear chart with Category Axis”;

var labelStyle = new Style(typeof(AxisLabel));
labelStyle.Setters.Add(new Setter(AxisLabel.StringFormatProperty, “Category {0}”));

var b1 = new LineSeries();
b1.Name = “days”;
b1.Title = “Visitors of web site 1/Days of the Week”;
b1.ItemsSource = days;
b1.IndependentValueBinding = new Binding(“Day”);
b1.DependentValueBinding = new Binding(“NumberOfVisitors”);
b1.IndependentAxis = new CategoryAxis
{
Orientation = AxisOrientation.X,
AxisLabelStyle = labelStyle
};

chart1.Series.Add(b1);
}
}

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

The end result:

image

Building a Stacked 100% Area chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 SeriesDefinitions:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Stacked 100% Areas”;

var b1 = new Stacked100AreaSeries();
b1.Name = “days”;
var s1 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s1);
s1.Title = “Visitors of web site 1/Days of the Week”;
s1.ItemsSource = days;
s1.IndependentValuePath = “Day”;
s1.DependentValuePath = “NumberOfVisitors”;

var s2 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s2);
s2.Title = “Visitors of web site 2/Days of the Week”;
s2.ItemsSource = days2;
s2.IndependentValuePath = “Day”;
s2.DependentValuePath = “NumberOfVisitors”;

chart1.Series.Add(b1);
}
}

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

The end result:

image

Building a Stacked 100% Bar chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 SeriesDefinitions:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Stacked 100% Bars”;

var b1 = new Stacked100BarSeries();
b1.Name = “days”;
var s1 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s1);
s1.Title = “Visitors of web site 1/Days of the Week”;
s1.ItemsSource = days;
s1.IndependentValuePath = “Day”;
s1.DependentValuePath = “NumberOfVisitors”;

var s2 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s2);
s2.Title = “Visitors of web site 2/Days of the Week”;
s2.ItemsSource = days2;
s2.IndependentValuePath = “Day”;
s2.DependentValuePath = “NumberOfVisitors”;

chart1.Series.Add(b1);
}
}

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

The end result:

image

Building a Stacked 100% Column chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 SeriesDefinitions:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Stacked 100% Columns”;

var b1 = new Stacked100ColumnSeries();
b1.Name = “days”;
var s1 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s1);
s1.Title = “Visitors of web site 1/Days of the Week”;
s1.ItemsSource = days;
s1.IndependentValuePath = “Day”;
s1.DependentValuePath = “NumberOfVisitors”;

var s2 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s2);
s2.Title = “Visitors of web site 2/Days of the Week”;
s2.ItemsSource = days2;
s2.IndependentValuePath = “Day”;
s2.DependentValuePath = “NumberOfVisitors”;

chart1.Series.Add(b1);
}
}

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

The end result:

image

Building a Stacked 100% Line chart

In MainPage.xaml, add a chart:

<toolkit:Chart HorizontalAlignment=”Left” Margin=”8,30,-295,0″ Title=”Chart Title” Name=”chart1″ VerticalAlignment=”Top” Height=”270″ Width=”687″>
</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 SeriesDefinitions:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.DataVisualization.Charting;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverRadar
{
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 Stacked 100% Lines”;

var b1 = new Stacked100LineSeries();
b1.Name = “days”;
var s1 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s1);
s1.Title = “Visitors of web site 1/Days of the Week”;
s1.ItemsSource = days;
s1.IndependentValuePath = “Day”;
s1.DependentValuePath = “NumberOfVisitors”;

var s2 = new SeriesDefinition();
b1.SeriesDefinitions.Add(s2);
s2.Title = “Visitors of web site 2/Days of the Week”;
s2.ItemsSource = days2;
s2.IndependentValuePath = “Day”;
s2.DependentValuePath = “NumberOfVisitors”;

chart1.Series.Add(b1);
}
}

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

The end result:

image

Charts, SharePoint, Silverlight ,

Building a Bubble chart web part

Leave a comment Posted by on December 8, 2011

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:

image

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:

image

Charts, Silverlight ,

Building a Silverlight chart web part for SharePoint 2010

3 Comments Posted by on December 8, 2011

In this blog post we’re discussing how to create a chart using Silverlight in SharePoint 2010. First of all, read https://sharepointdragons.com/2011/12/06/creating-a-silverlight-web-part-in-sharepoint-2010/ and download the Silverlight SharePoint web parts.

Now, you’re ready to do the following:

  1. Create an “Empty SharePoint Project” and deploy it as a sandboxed solution.

    Please note that this is an excellent opportunity to point out that you should always deploy as a sandboxed solution, unless necessary. This is a best practice. The main reason we consider it to be an excellent opportunity to drive home this point is that we’ve noticed that this advice is ranking high in the charts of cliché SharePoint development tips, the first one of course being: don’t touch the content database. Let’s see if this tip can climb the charts even higher. Btw, don’t hesitate to send us other suggestions for the top 10 SharePoint dev cliché list.

  2. Add another project, this time of type “Silverlight application”.
  3. Choose to host the Silverlight application is a new Web site. We’ve actually found that this makes development and debugging a little bit easier and speedier.
  4. In Visual Studio, add a new tab in the toolbox and call it Silverlight Toolbox 4 or something.
  5. Right-click it and select Choose Items. The Choose Toolbox Items dialog window appears.
  6. Select the Silverlight Components tab.
  7. Click the Browse button.
  8. Navigate to the .dll containing all chart controls: System.Windows.Controls.DataVisualization.Toolkit.dll.  By default, it’s located in C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin.
  9. Click OK.
  10. Drag the Chart control to the design surface of MainPage.xaml.
  11. Press F7 and modify it’s contents so that it looks something like this:

    12. 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 = “My web stats chart”;
    chart1.LegendTitle = “Visitors”;

    chart1.Series.Clear();
    var c1 = new ColumnSeries();
    c1.Name = “days”;
    c1.Title = “Visitors/Days of the Week”;
    c1.IsSelectionEnabled = true;
    c1.ItemsSource = days;
    c1.IndependentValueBinding = new Binding(“Day”);
    c1.DependentValueBinding = new Binding(“NumberOfVisitors”);

    chart1.Series.Add(c1);

    }
    }

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

  12. Press F5 and see if the Silverlight application test page looks ok.
  13. Locate your .xap file (i.e. SilverlightApplication1) in the debug folder of your Silverlight application.
  14. Upload the .xap file to a SharePoint document library (we’ve called ours “Silver”, catchy isn’t it?).
  15. Add the Silverlight Web Part (under the Media and Content category) and point it to the uploaded .xap file.
  16. Admire the results:

image

SharePoint, Silverlight ,

Creating a Silverlight web part in SharePoint 2010

1 Comment Posted by on December 6, 2011

Don’t forget to install the Silverlight SharePoint web parts and Visual Studio 2010 SharePoint Power Tools when you start building Silverlight web parts. Go to http://visualstudiogallery.msdn.microsoft.com/8e602a8c-6714-4549-9e95-f3700344b0d9 for the power tools consisting of the following:

  • Sandboxed-compatible Visual Web Part
    This item template enables you to use a visual designer to create SharePoint web parts that can be deployed in a sandboxed solution for SharePoint 2010.
  • Sandboxed Compilation
    This extension displays build errors when you use types or members in a SharePoint 2010 sandboxed project which are not allowed in the SharePoint sandbox environment.

After that, find the Silverlight SharePoint web parts at: http://visualstudiogallery.msdn.microsoft.com/e8360a85-58ca-42d1-8de0-e48a1ab071c7. It contains:

  • The Silverlight Web Part is designed to be very lightweight and as a result using very little or no custom code to create the Web Part. This makes it easy for developers to understand how to use and extend their code after adding the Silverlight Web Part.
  • The Silverlight Custom Web Part takes advantage of the Sandboxed Visual Web Part that was released by the Visual Studio team. This Web Part enables developers to extend the Web Part for advanced scenarios such as adding JavaScript/JQuery and other controls in addition to the Silverlight application.
SharePoint, Silverlight, Tools ,

Deploying XBAP in SharePoint 2010

2 Comments Posted by on November 28, 2011

Repeatedly we’re seeing advice suggesting not to build XBAPs in favor of Silverlight. In our view, there’s nothing wrong with using XBAP and displaying it in a page viewer web part. In fact, a lot of times XBAPs are actually more powerful. Of course Silverlight has better platform support, but in our experience projects using Silverlight are targeting MSIE/Windows audiences anyway.

In the case of SharePoint, when you choose to use XBAP you’ll miss out on some of the integration opportunities SharePoint/Silverlight combinations offer (such as the Silverlight web part and the client object model).

It seems that it’s not possible to host XBAPs in SharePoint itself, for instance, in the layouts folder, and this is a question that has come up a couple of times in the MS forums. The solution is simple:

  • Just open IIS Manager and choose Add Application and create your own virtual directory, in my case I’ve called it xbaphost.
  • Deploy your XBAP application using ClickOnce. For me, that leads to the following URL:http://moon/xbaphost/myxbap.xbap
  • Check that this works.
  • Point the page viewer web part to http://moon/xbaphost/myxbap.xbap (replace with your URL)

Works like a charm!

SharePoint, WPF , , ,