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

Last edited May 6, 2013 at 10:18 AM by torman119, version 29

Comments

bkboggy Nov 13 at 5:04 PM 
Has anyone created a scatter chart with this?

vaclavdostal Jun 4 at 12:27 PM 
public ObservableCollection<TestClass> Errors { get; private set; }

missing directive using or link to assembly.
what shall I do?

NESTicle Feb 6 at 3:40 PM 
Im getting this error :c

The type 'PieChart' was not found because 'clr-namespace:De.TorstenMandelkow.MetroChart;assembly=De.TorstenMandelkow.MetroChart' is an unknown namespace. [Line: 12 Position: 76]

abiramir Nov 14, 2013 at 1:25 PM 
Instead we can create a ResourceDictionary Collection of colors and assign this Palette property of the chart.

Ex:

CREATING RESOURCE DICTIONARY
------------------------------------------

<chart:ResourceDictionaryCollection x:Key="MyColorPalette">
<ResourceDictionary>
<SolidColorBrush x:Key="Brush1" Color="#FFFF2900" />
</ResourceDictionary>
<ResourceDictionary>
<SolidColorBrush x:Key="Brush2" Color="#FF1D97E3" />
</ResourceDictionary>
</chart:ResourceDictionaryCollection>

APPLYING PALETTE STYLE
------------------------------
<chart:PieChart x:Name="MyPieChart" Foreground="Black" Background="{x:Null}" Height="400" Width="500" Palette="{StaticResource MyColorPalette}"/>

govindk22 Nov 11, 2013 at 10:38 PM 
Hi, Thanks for the wonderful chart and it looks good. Is there a way we can change the color of Pie/Stack chart bars ?

And also binding the datacontext on the XAML doesn't work for some sort types StackedBar is not working and PieChart seems to be working.
<Window.DataContext>
<Binding Source="{StaticResource ViewModel}"/>
</Window.DataContext>

ViDom Oct 29, 2013 at 8:16 PM 
How can i bind own colors?

<chart:PieChart
<chart:PieChart.Series>
<chart:ChartSeries
DisplayMember="Category"
ValueMember="Number"
Background="{Binding MyColor}"
ItemsSource="{Binding Path=Errors}" />
</chart:PieChart.Series>
</chart:PieChart>

public class TestClass
{
public string Category { get; set; }
public int Number { get; set; }
public string MyColor { get; set; }
}

azuzard Sep 26, 2013 at 9:57 AM 
igrali, you can use

this.DataContext = this;

fadifamous May 12, 2013 at 12:05 AM 
I am facing the same problem as igrali
I double checked the binding works for a gridview but not for the char , thanks a lot for your efforts

igrali May 10, 2013 at 5:14 PM 
I can't get this one to work/show. Everything builds, runs, but no charts are shown. Am I missing something? The only thing I changed was the name of the view model (MainViewModel instead of TestPageViewModel)

I did the binding to datacontext using:

this.DataContext = new MainViewModel();

in the page constructor.