SharePoint Dragons

Nikander & Margriet on SharePoint

IntelliSense for CAML

1 Comment Posted by Nikander & Margriet Bruggeman on December 13, 2011

Wow, we tried to do something similar for SharePoint features, which only partially succeeded. But this sounds like the real deal:

The CAML.NET IntelliSense extensions for Visual Studio 2010 is simply a must-have for SharePoint developers. It can help you tame that sometimes finicky, but ever-so-essential CAML language we all know and love.

You probably already know how to add the out-of-the-box SharePoint schemas to Visual Studio so you get IntelliSense when editing your CAML files.

This is a good first step, but CAML.NET Intellisense takes it even further by adding the following enhancements:

Extends the default schema files with detailed annotations imported directly from the SharePoint SDK documentation.
Adds a custom WPF IntelliSense Presenter to the Visual Studio environment for a greatly enhanced developer experience.
Automatically detects and downloads schema updates so you are always working with the most current information available.
Links directly to the online SDK documentation for the currently visible element, so you can “drill down” into the documentation with a single click.

Let’s face it – even with an up to date set of bookmarks, who wants to go searching all over the place for that missing tidbit that tells you just what that obscure attribute is for when you’re right in the middle of building the CAML for your spiffy new feature?

http://visualstudiogallery.msdn.microsoft.com/15055544-fda0-42db-a603-6dc32ed26fde/

SharePoint, Tools sharepoint, Tools

Whitepaper about hybrid env’s with Office 365

Leave a comment Posted by Nikander & Margriet Bruggeman on December 13, 2011

Hybrid SharePoint environments combine on-premises Microsoft SharePoint Server 2010 with Office 365 — Microsoft SharePoint Online.

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27580

SharePoint, SharePoint Online sharepoint

White paper about large scale SharePoint content databases

Leave a comment Posted by Nikander & Margriet Bruggeman on December 13, 2011

This white paper provides details about a test lab that was run at Microsoft to show large scale SharePoint Server 2010 content databases:

http://www.microsoft.com/download/en/details.aspx?id=27573

SharePoint whitepaper

Free SharePoint E-books

Leave a comment Posted by Nikander & Margriet Bruggeman on December 13, 2011

The title about sums it up: http://www.microsoft.com/download/en/search.aspx?q=sharepoint+book

SharePoint books, sharepoint

Upgrading and migrating SharePoint 2010

Leave a comment Posted by Nikander & Margriet Bruggeman on December 13, 2011

Nice article to check if you’re going to do an upgrade or migration traject:

http://blogs.technet.com/b/pfelatam/archive/2011/10/20/sharepoint-2010-upgrade-and-migration-summary.aspx

SharePoint migration, sharepoint, upgrade

SharePoint 2010 PowerShell Command Builder

Leave a comment Posted by Nikander & Margriet Bruggeman on December 13, 2011

Hmm, a visual tool for building SharePoint command tools. We’re not convinced, but we’re giving it a test spin:

http://blogs.technet.com/b/steve_chen/archive/2011/10/20/3460400.aspx

SharePoint, Tools sharepoint, Tools

SharePoint Online

Leave a comment Posted by Nikander & Margriet Bruggeman on December 13, 2011

Nice starting point for developers beginning SharePoint Online:

http://msdn.microsoft.com/en-us/library/gg317460.aspx

SharePoint, SharePoint Online sharepoint

About the chart controls in the SilverLight 5 Toolkit

5 Comments Posted by Nikander & Margriet Bruggeman 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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

Charts, SharePoint, Silverlight sharepoint, Silverlight

Building a jQuery Autocomplete textbox using the SharePoint REST API

2 Comments Posted by Nikander & Margriet Bruggeman on December 9, 2011

So the first problem we had was to come up with a title that about sums up all the technologies and tools we’ll be using in this blog post, mainly being jQuery, jQuery UI, the SharePoint REST API and Fiddler, and make it sound spiffy as well. After abandoning that idea, we just used this title instead.

In this blog post we’re creating an autocomplete textbox that provides hints stored in a SharePoint list. The SharePoint RESTful interface is an ideal candidate to aid in this quest because jQuery makes it really easy to issue REST requests and also handles the JSON responses that the SharePoint REST API can provide really well. If you need to read up on REST we can totally recommend http://www.loisandclark.eu/Pages/rest.aspx, an article written by two very talented authors.

Because the jQuery Autocomplete widget works well with JavaScript objects containing a label and value property (or in fact, the name of the first property, label, doesn’t seem to matter, but the casing of the value property is important) we’ve decided to create a custom SharePoint list containing a Title, label and value column. We’ve called our list MyList. If you do the same you’ll be able to follow the rest of the example. Also, make sure to fill the list with some test data such as: aaa, aarde, and aardvarken.

The Autocomplete widget will show information while the user types, so we need a way to filter a specific column based on a search term. REST makes this pretty easy, although you have to be really careful when it comes to casing. For instance, if we want a list of all list items that have a value that starts with a in the Value column, all we need to do is issue the following REST request:

http://moon/_vti_bin/listdata.svc/MyList?$filter=startswith(Value,’a’)

By default, the response is XML. For our purposes, we’re more interested in JSON. If you want to work with REST and JSON it’s absolutely essential to install a tool on your dev environment that’s able to capture HTTP traffic. Here, we’ll use Fiddler (http://www.fiddler2.com/fiddler2/).

Once you start it up, it starts capturing HTTP traffic immediately (toggle between stopping and starting capturing traffic by pressing F12). Now do the following:

Issue the REST request: http://moon/_vti_bin/listdata.svc/MyList?$filter=startswith(Value,’a’) . Of course, you may have to change names. If you didn’t think of that yourself, don’t worry, you’ll never be able to complete the entire blog post !
Press F12.
Locate the request in Fiddler. Right-click it and choose Unlock for Editing.
Press the Headers tab.
Find the Client section and notice that it says: Accept: */*.
Right-click the Accept line and choose Edit Header…. Change the value to application/json. This forces the response to be in JSON format.

Press F12 again so that Fiddler starts capturing web traffic again.
Right-click the modified request > Replay > Reissue Requests.
Locate the new request and inspect the body of the response by clicking JSON:

This will teach you important stuff about the structure of the JSON response, which comes in handy once you need to process the information (and if you want to understand the jQuery code that’s coming up). If you remember that the autocomplete widget expects a collection of objects containing label and value properties, the following code should be understandable:

<html>
<head>
<script type=”text/javascript” src=”jquery-1.7.js”></script>
<script type=”text/javascript” src=”jquery-ui-1.8.custom.min.js”></script>
<script>
$(document).ready(function () {
$(“input#autobox”).autocomplete({
source: function (request, response) {
var term = request.term;
var restUrl = “http://moon/_vti_bin/listdata.svc/MyList?$filter=startswith(Value, ‘” + term + “‘)”;

$.getJSON(restUrl, function (data) {
var items = [];
$.each(data.d.results, function (key, val) {
    var item = {
      label: val.Label,
      value: val.Value
      };

      items.push(item);
      });

      response(items);
      });

    }
});
});

</script>

</head>
<body>

jQuery test page

<input type=”text” id=”autobox” />

</body>
</html>