changing wpftoolkit pie shaped chart

Question

hello all,

im developing a small app , and i would like to represent some data within a pie shaped chart .

now, im using wpfToolkit build in chart , and im using the pieSeries to create a pie shaped chart .

what I need, is guidness on how to costumize the appereance of the control, and the following, ive already acomplished :

1. set the legend to collapsed

2. set the title to collapsed

now i need to do the following :

1. control the colors i get for each slice (VERY important to me), notice, this control actually set the slice color automatically,

when i set the dependent value and independent value i sent a <key,value>pair struct, to assaign the values, now what i urgently need is for each slice to assign the color i pick according to the "key" i chose for that slice .

2. there is an annoying border around the plot area or chart area, i dont know what it is, i can't access this property or whatever, please please help me make this not visible as well .

cheers .

Answer 1

I think this link will answer all of your questions.

http://expression.microsoft.com/en-us/dd433476

---

JP Cowboy Coders Unite!

Answer 2

thank you .

no, after reading this i cant actually understand what should I do.

how do i attach each category with a specific color ?

now, this is the first chart, it has 3 slices :

xaml :

<chartingToolkit:Chart DataContext="1,10 2,20 3,30 4,40" HorizontalAlignment="Left" Name="chart1" Title="" VerticalAlignment="Top" Width="200" Height="150" BorderBrush="{x:Null}" Padding="0" Margin="-1,-1,0,0">
                            <charting:Chart.LegendStyle>
                                <Style TargetType="Control">
                                    <Setter Property="Width" Value="0" />
                                    <Setter Property="Height" Value="0" />
                                </Style>
                            </charting:Chart.LegendStyle>                         
                            <charting:Chart.TitleStyle>
                                <Style TargetType="Control">
                                    <Setter Property="Visibility" Value="Collapsed" />
                                </Style>
                            </charting:Chart.TitleStyle>
                            <charting:Chart.PlotAreaStyle>
                                <Style TargetType="Grid">
                                    <Setter Property="Background" Value="Transparent"/>
                                    <Setter Property="Width" Value="250"/>
                                    <Setter Property="Height" Value="250"/>
                                </Style>
                            </charting:Chart.PlotAreaStyle>                          
                        </chartingToolkit:Chart>

this is how i attach the data to the chart :

public PieSeries GenerateNumbersChart(ArrayList arr1,ArrayList arr2,ArrayList arr3)
        {
            List<KeyValuePair<string, int>> list = new List<KeyValuePair<string, int>>();
            list.Add(new KeyValuePair<string, int>("כפולים", arr1.Count));
            list.Add(new KeyValuePair<string, int>("כשרים", arr2.Count));
            list.Add(new KeyValuePair<string, int>("שגויים", arr3.Count));
        
            PieSeries series = new PieSeries();
            series.IndependentValueBinding = new Binding("Key");
            series.DependentValueBinding = new Binding("Value");
            series.ItemsSource = list;           
            
            return series;
        }

and in the main window I simply attach the series :

            chart1.Series.Add(chartData.GenerateNumbersChart(GlobalValues.NumDuplicate, GlobalValues.NumKosher, GlobalValues.NumWrong));

please gentelman, apperantly i don't understand xaml that good,,,, how do i assign 1 color for each category i just added to the pie ?

---

noam yogev

Answer 3

Noam;

  For some reason the Pallete is king in the Charting series (PieSeriesDataPoint.BackGround is overridden by palette), so to control colors you need a palette.

Step 1) Add these references in the top part of the control

 xmlns:ctk="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
             xmlns:tk="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
             

Step 2) Define your own palette.  This one was defined as shown in next example.  NOTE: Most people get tripped up on the one-off ResourceDictionaryCollection.

 <ctk:PieSeries.Palette>
                    <tk:ResourceDictionaryCollection>
                        <ResourceDictionary>
                            <Style x:Key="DataPointStyle" TargetType="Control">
                                <Setter Property="Background" Value="blue"></Setter>
                            </Style>
                        </ResourceDictionary>
                        <ResourceDictionary>
                            <Style x:Key="DataPointStyle" TargetType="Control">
                                <Setter Property="Background" Value="LightGreen"></Setter>
                            </Style>
                        </ResourceDictionary>
                        <ResourceDictionary>
                            <Style x:Key="DataPointStyle" TargetType="Control">
                                <Setter Property="Background" Value="Red"></Setter>
                            </Style>
                        </ResourceDictionary>
                    </tk:ResourceDictionaryCollection>
                </ctk:PieSeries.Palette>

Putting them together:

<ctk:Chart Name="chart1"
            Title="The Chart Title"
            LegendTitle="The Legend Title">

    <ctk:PieSeries x:Name="XPS"
                    AnimationSequence="FirstToLast"
                    DependentValuePath="X"
                    IndependentValuePath="Y"
                    ItemsSource="{Binding Path=TheCollection,
                                            RelativeSource={RelativeSource FindAncestor,
                                                                        AncestorType=my:Chart,
                                                                        AncestorLevel=1}}">
        <ctk:PieSeries.Palette>
            <tk:ResourceDictionaryCollection>
                <ResourceDictionary>
                    <Style x:Key="DataPointStyle" TargetType="Control">
                        <Setter Property="Background" Value="blue" />
                    </Style>
                </ResourceDictionary>
                <ResourceDictionary>
                    <Style x:Key="DataPointStyle" TargetType="Control">
                        <Setter Property="Background" Value="LightGreen" />
                    </Style>
                </ResourceDictionary>
                <ResourceDictionary>
                    <Style x:Key="DataPointStyle" TargetType="Control">
                        <Setter Property="Background" Value="Red" />
                    </Style>
                </ResourceDictionary>
            </tk:ResourceDictionaryCollection>
        </ctk:PieSeries.Palette>
    </ctk:PieSeries>
</ctk:Chart>

The items source in the code behind of this control is this:

 public static readonly DependencyProperty TheCollectionProperty =
            DependencyProperty.Register("TheCollection", typeof(List<Point>), typeof(Chart));

        public List<Point> TheCollection
        {
            get { return (List<Point>)GetValue(TheCollectionProperty); }
            set { SetValue(TheCollectionProperty, value); }
        }

And the initialization logic is this:

public Chart()
{
    InitializeComponent();
    InitLocal();
}

private void InitLocal()
{
    TheCollection = new List<Point>();
    for (int i = 0; i < 100; i++)
    {
        var pt = new Point();
        pt.X = i * 3;
        pt.Y = i * 2;
        TheCollection.Add(pt);
    }
}

To Control Legend visibility:

 <Style x:Key="LegendStyle1" TargetType="visualizationToolkit:Legend">
            <Setter Property="FrameworkElement.Margin" Value="15,0" />
            <Setter Property="FrameworkElement.VerticalAlignment" Value="Center" />
            <Setter Property="Control.BorderBrush" Value="#FFDBDBDB" />
            <Setter Property="Control.Background">
                <Setter.Value>
                    <LinearGradientBrush StartPoint="0.558,0.995" EndPoint="0.442,0.005">
                        <GradientStop Color="#FF22DBDB" />
                        <GradientStop Offset="1" Color="White" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Visibility" Value="Collapsed"></Setter>
        </Style>

Same goes with title:

     <Style x:Key="TitleStyle1" TargetType="visualizationToolkit:Title">
            <Setter Property="Control.FontSize" Value="16" />
            <Setter Property="FrameworkElement.HorizontalAlignment" Value="Center" />
            <Setter Property="FrameworkElement.Margin" Value="0,10" />
            <Setter Property="Visibility" Value="Collapsed"></Setter>

        </Style>

Actually I'm not sure about the visibility.

---

JP Cowboy Coders Unite!

Answer 4

Keywords: WPF Charting Palette Solution  DataVisualization PieSeries

---

JP Cowboy Coders Unite!

Answer 5

heya javaman, i manged to solve this, about 3 hours before you posted this , full, detailed answer, thank you, this was marked as answer, because IT IS the answer .

so CHEERS !

now when this is behind us, tell me please, how can remove the thin border aroun the plot area or chart area or WHATEVER that area is :)))0 ???

as you can see by the code i pasted here, i disable the title and the legend, but this border thing  can't resolve .

thx !

---

noam yogev

Answer 6

The chart content template looks like this, you can change it to get rid of the border.

 <ControlTemplate x:Key="Template1" TargetType="chartingToolkit:Chart">
            <Border Background="{TemplateBinding Control.Background}"
                    BorderBrush="{TemplateBinding Control.BorderBrush}"
                    BorderThickness="{TemplateBinding Control.BorderThickness}"
                    Padding="{TemplateBinding Control.Padding}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <visualizationToolkit:Title Content="{TemplateBinding chartingToolkit:Chart.Title}" Style="{TemplateBinding chartingToolkit:Chart.TitleStyle}" />
                    <Grid Grid.Row="1" Margin="0,15">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <visualizationToolkit:Legend Name="Legend"
                                                     Title="{TemplateBinding chartingToolkit:Chart.LegendTitle}"
                                                     Grid.Column="1"
                                                     Style="{TemplateBinding chartingToolkit:Chart.LegendStyle}" />
                        <my1:EdgePanel Name="ChartArea" Style="{TemplateBinding chartingToolkit:Chart.ChartAreaStyle}">
                            <Grid Panel.ZIndex="-1" Style="{TemplateBinding chartingToolkit:Chart.PlotAreaStyle}" />
                            <Border Panel.ZIndex="10"
                                    BorderBrush="#FF919191"
                                    BorderThickness="1" />

                        </my1:EdgePanel>
                    </Grid>
                </Grid>
            </Border>
        </ControlTemplate>

---

JP Cowboy Coders Unite!

Answer 7

thx again, appreciate this help very much .

well, maybe i just don't understand xaml that good but i can't eliminate that border thing .

look :

you can see by the attached xaml at the beginning of this post how i managed to remove title and legend, but how the hell i get rid of this annoying border around the charts ??

thank you very much once again .

---

noam yogev

Answer 8

Get rid of the Border that's commented out below

      <ControlTemplate x:Key="Template1" TargetType="chartingToolkit:Chart">
            <Border Background="{TemplateBinding Control.Background}"
                    BorderBrush="{TemplateBinding Control.BorderBrush}"
                    BorderThickness="{TemplateBinding Control.BorderThickness}"
                    Padding="{TemplateBinding Control.Padding}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <visualizationToolkit:Title Content="{TemplateBinding chartingToolkit:Chart.Title}" Style="{TemplateBinding chartingToolkit:Chart.TitleStyle}" />
                    <Grid Grid.Row="1" Margin="0,15">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <visualizationToolkit:Legend Name="Legend"
                                                     Title="{TemplateBinding chartingToolkit:Chart.LegendTitle}"
                                                     Grid.Column="1"
                                                     Style="{TemplateBinding chartingToolkit:Chart.LegendStyle}" />
                        <my1:EdgePanel Name="ChartArea" Style="{TemplateBinding chartingToolkit:Chart.ChartAreaStyle}">
                            <Grid Panel.ZIndex="-1" Style="{TemplateBinding chartingToolkit:Chart.PlotAreaStyle}" />
                            <!--<Border Panel.ZIndex="10"
                                    BorderBrush="#FF919191"
                                    BorderThickness="1" />-->

                        </my1:EdgePanel>
                    </Grid>
                </Grid>
            </Border>
        </ControlTemplate>

---

JP Cowboy Coders Unite!

Answer 9

thank yo very much

what ref do i miss if i keep gettting an error over visualizationToolkit ??

---

MOses

Answer 10

What error?

---

JP Cowboy Coders Unite!

Answer 11

it says that it can't find visualizationToolkit:legend , visualizationToolkit:title , visualizationToolkit:.......

the error saya to check whether i'm missing a referance to this object's namespace or somthing ??

---

MOses

Answer 12

sorry, i needed 24 hours to figure this out :

solved :

<ControlTemplate x:Key="BorderlessChartTemplate" TargetType="chartingToolkit:Chart">
            <chartingprimitives:EdgePanel Name="ChartArea" Style="{TemplateBinding chartingToolkit:Chart.ChartAreaStyle}">
                <Grid Panel.ZIndex="-1" Style="{TemplateBinding chartingToolkit:Chart.PlotAreaStyle}" />
                <!--this is the sonofbitch that delete the border around the chart -noam-->
                <Border Panel.ZIndex="10" BorderBrush="#FF919191" BorderThickness="0" />
            </chartingprimitives:EdgePanel>
        </ControlTemplate>

thank you very much !!!!!!!!!!!!!!! (specially Mr. Javaman II)

Mr. Javaman

---

MOses

Answer 13

You have to add a reference to the toolkit in XAML under the section where you see XMLNS.

---

JP Cowboy Coders Unite!

Answer 14

I set the colors of the DataPoints to control color of the lines in my chart...ought to work for you too...

            <charting:LineSeries.DataPointStyle>
              <Style TargetType="{x:Type charting:LineDataPoint}">
                <Setter Property="Visibility" Value="Collapsed"/>
                <Setter Property="Opacity" Value="0" />
                <Setter Property="Background" Value="DarkCyan" />
              </Style>
            </charting:LineSeries.DataPointStyle>
Change LineSeries to AreaSeries and it should work..