How to use the charts in your application
1. Add a reference to De.TorstenMandelkow.MetroChart.dll to your project
2. Add the following xaml code to your resource dictionary (e.g. Generic.xaml)
<ResourceDictionary ... xmlns:chart="clr-namespace:De.TorstenMandelkow.MetroChart;assembly=De.TorstenMandelkow.MetroChart" > <!-- for windows 8 it is different: xmlns:chart="using:De.TorstenMandelkow.MetroChart" --> ... <Style x:Key="MinimalChartStyle" TargetType="chart:ChartBase"> <Setter Property="Width" Value="500"/> <Setter Property="Height" Value="500"/> </Style> ... </ResourceDictionary>
3. Add the following xaml code to your page or window to embed the chart
<Page ... xmlns:chart="clr-namespace:De.TorstenMandelkow.MetroChart;assembly=De.TorstenMandelkow.MetroChart" > <!-- for windows 8 it is different: xmlns:chart="using:De.TorstenMandelkow.MetroChart" --> ... <chart:PieChart Style="{StaticResource MinimalChartStyle}" ChartTitle="Minimal Pie Chart" ChartSubTitle="Chart with fixed width and height" SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" > <chart:PieChart.Series> <chart:ChartSeries SeriesTitle="Errors" DisplayMember="Category" ValueMember="Number" ItemsSource="{Binding Path=Errors}" /> </chart:PieChart.Series> </chart:PieChart> ... </Page>
4. Add the data to your code and bind it to the chart
namespace TestApplication { // bind this view model to your page or window (DataContext) public class TestPageViewModel { public ObservableCollection<TestClass> Errors { get; private set; } public TestPageViewModel() { Errors = new ObservableCollection<TestClass>(); Errors.Add(new TestClass() { Category = "Globalization", Number = 75 }); Errors.Add(new TestClass() { Category = "Features", Number = 2 }); Errors.Add(new TestClass() { Category = "ContentTypes", Number = 12 }); Errors.Add(new TestClass() { Category = "Correctness", Number = 83}); Errors.Add(new TestClass() { Category = "Best Practices", Number = 29 }); } private object selectedItem = null; public object SelectedItem { get { return selectedItem; } set { // selected item has changed selectedItem = value; } } } // class which represent a data point in the chart public class TestClass { public string Category { get; set; } public int Number { get; set; } } }
Result