This is a migrated thread and some comments may be shown as answers.

Setting Bar Color

1 Answer 83 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Joseph
Top achievements
Rank 1
Joseph asked on 27 Aug 2012, 09:35 PM
I would like to bind the color of a BarSeries to the ValueBinding value so that the color of the bar will change depending on the value the bar represents.  I am running into two problems:
  1. I cannot seem to bind to the background property of a border style.  I am getting the error message "Cannot set read-only property ''" (I'm using silverlight 4).
  2. Binding to the ValueBinding of the BarSeries element doesn't seem to be the correct approach.

MainPage.xaml

<UserControl x:Class="BarChartTest.MainPage"
    xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
    xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
    xmlns:barChartData="clr-namespace:BarChartTest"
    xmlns:converter="clr-namespace:BarChartTest"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
      
    <UserControl.DataContext>
        <barChartData:ReadinessViewModel />
    </UserControl.DataContext>
      
    <UserControl.Resources>
        <converter:BarColorConverter x:Key="BarColorConverter" />
        <Style TargetType="Border" x:Key="BarColor">
            <Setter Property="Background"
                    Value="{Binding ValueBinding, ElementName=Bar, Converter={StaticResource BarColorConverter}}" />
        </Style>
    </UserControl.Resources>
  
    <Grid x:Name="LayoutRoot" Background="White">
        <chart:RadCartesianChart x:Name="ReadinessBarChart">
            <chartView:BarSeries x:Name="Bar"
                                 ItemsSource="{Binding ReadinessInfo}"
                                 ValueBinding="Percentage"
                                 CategoryBinding="ReadinessType"
                                 DefaultVisualStyle="{StaticResource BarColor}" />
            <chart:RadCartesianChart.HorizontalAxis>
                <chartView:CategoricalAxis />
            </chart:RadCartesianChart.HorizontalAxis>
            <chart:RadCartesianChart.VerticalAxis>
                <chartView:LinearAxis Minimum="0" Maximum="1" />
            </chart:RadCartesianChart.VerticalAxis>
        </chart:RadCartesianChart>
    </Grid>
</UserControl>

ReadinessViewModel.cs
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.Generic;
  
namespace BarChartTest
{
    public class ReadinessViewModel
    {
        private IEnumerable<ReadinessData> readinessInfo;
  
        public IEnumerable<ReadinessData> ReadinessInfo
        {
            get
            {
                if (readinessInfo == null)
                {
                    readinessInfo = new List<ReadinessData>()
                    {
                        new ReadinessData("DEPLOY", .85),
                        new ReadinessData("IMR", .75),
                        new ReadinessData("FIT", .65),
                        new ReadinessData("FILL", .55)
                    };
                }
  
                return readinessInfo;
            }
        }
    }
}

ReadinessData.cs
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
  
namespace BarChartTest
{
    public class ReadinessData
    {
        private string readinessType;
        private double percentage;
  
        public string ReadinessType
        {
            get { return readinessType; }
        }
  
        public double Percentage
        {
            get { return percentage; }
        }
  
        public ReadinessData(string type, double percent)
        {
            readinessType = type;
            percentage = percent;
        }
    }
}

Coverter.cs
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;
  
namespace BarChartTest
{
    public class Converter
    {
  
    }
  
    public class BarColorConverter : IValueConverter
    {
        object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            double score = Double.Parse(value.ToString());
            Color color = Colors.Red;
            if (score >= .7 && score < .8)
                color = Colors.Yellow;
            else if (score >= .8)
                color = Colors.Green;
            else if (score == -1.00)
                color = Colors.Gray;
  
            return new SolidColorBrush(color);
        }
  
        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

1 Answer, 1 is accepted

Sort by
0
Joseph
Top achievements
Rank 1
answered on 27 Aug 2012, 10:22 PM
I think I figured it out.  The trick is to use a BarSeries PointTemplate and then set the fill property of the rectangle to bind to DataItem.Percentage which is the value I'm using in the ValueBinding.

MainPage.xaml
<UserControl x:Class="BarChartTest.MainPage"
    xmlns:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
    xmlns:chartView="clr-namespace:Telerik.Windows.Controls.ChartView;assembly=Telerik.Windows.Controls.Chart"
    xmlns:barChartData="clr-namespace:BarChartTest"
    xmlns:converter="clr-namespace:BarChartTest"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
      
    <UserControl.DataContext>
        <barChartData:ReadinessViewModel />
    </UserControl.DataContext>
      
    <UserControl.Resources>
        <converter:BarColorConverter x:Key="BarColorConverter" />
    </UserControl.Resources>
  
    <Grid x:Name="LayoutRoot" Background="White">
        <chart:RadCartesianChart x:Name="ReadinessBarChart">
            <chartView:BarSeries x:Name="Bar"
                                 ItemsSource="{Binding ReadinessInfo}"
                                 ValueBinding="Percentage"
                                 CategoryBinding="ReadinessType">
                <chartView:BarSeries.PointTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding DataItem.Percentage, Converter={StaticResource BarColorConverter}}" />
                    </DataTemplate>
                </chartView:BarSeries.PointTemplate>
            </chartView:BarSeries>
            <chart:RadCartesianChart.HorizontalAxis>
                <chartView:CategoricalAxis />
            </chart:RadCartesianChart.HorizontalAxis>
            <chart:RadCartesianChart.VerticalAxis>
                <chartView:LinearAxis Minimum="0" Maximum="1" />
            </chart:RadCartesianChart.VerticalAxis>
        </chart:RadCartesianChart>
    </Grid>
</UserControl>
Tags
ChartView
Asked by
Joseph
Top achievements
Rank 1
Answers by
Joseph
Top achievements
Rank 1
Share this question
or