Set individual bar color based on value in code

9 posts, 0 answers
  1. Timothy
    Timothy avatar
    2 posts
    Member since:
    Apr 2013

    Posted 12 Jul 2013 Link to this post

    HI.  I see an example of how to set the bar colors in XAML, is there a way to do it in code based on their value?

    ChartSeries barSeries = this.chart.Series[0];
                    barSeries.Chart.Name = "my chart";
                    barSeries.ItemsSource = valueEnum;
    I want to color each bar based on the value of the item but not sure how to access the individual bars.
  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 15 Jul 2013 Link to this post

    Hello Timothy,

    Thanks for writing.
    You can specify the fill for each bar using the PointTemplates property of your bar series. You can add a DataTemplate to this collection and bind the fill of the bar to some color that changes dynamically based on what the bar represents.

    Regards,
    Victor
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Manuel
    Manuel avatar
    5 posts
    Member since:
    Mar 2012

    Posted 22 Jul 2013 Link to this post

    Hi Timothy,

    I find a Silverlight sample i have adapted to Windows phone. it works with a viewmodel. If it can help you.

       MainPage.xaml (nothing in MainPage.xaml.cs)

    the datacontext
    <UserControl.DataContext>
        <local:ViewModel />
    </UserControl.DataContext>

    the chart
    <telerikChart:RadCartesianChart Margin="12,0,0,0" x:Name="radChart1">
        <telerikChart:RadCartesianChart.Grid>
            <telerikChart:CartesianChartGrid StripLinesVisibility="Y">
                <telerikChart:CartesianChartGrid.YStripeBrushes>
                    <SolidColorBrush Color="#FF222222"/>
                    <SolidColorBrush Color="Transparent"/>
                </telerikChart:CartesianChartGrid.YStripeBrushes>
            </telerikChart:CartesianChartGrid>
        </telerikChart:RadCartesianChart.Grid>
        <telerikChart:RadCartesianChart.HorizontalAxis>
            <telerikChart:CategoricalAxis LineStroke="{StaticResource PhoneDisabledBrush}" LineThickness="2"/>
     
        </telerikChart:RadCartesianChart.HorizontalAxis>
        <telerikChart:RadCartesianChart.VerticalAxis>
            <telerikChart:LinearAxis LineStroke="{StaticResource PhoneDisabledBrush}" LineThickness="2"/>
        </telerikChart:RadCartesianChart.VerticalAxis>
        <telerikChart:BarSeries ValueBinding="Value" ItemsSource="{Binding Data}">
            <telerikChart:BarSeries.PointTemplate>
                <DataTemplate>
                    <Rectangle Fill="{Binding DataItem.Color}"/>
                </DataTemplate>
            </telerikChart:BarSeries.PointTemplate>
        
        </telerikChart:BarSeries>
    </telerikChart:RadCartesianChart>

    ViewModel.cs

    namespace MonGraphe {     public class ViewModel : ViewModelBase     {         public ViewModel()         {             List<ChartData> data = new List<ChartData>();             data.Add(new ChartData() { Value = 1, Color = new SolidColorBrush(Colors.Red) });             data.Add(new ChartData() { Value = 2, Color = new SolidColorBrush(Colors.Green) });             data.Add(new ChartData() { Value = 5, Color = new SolidColorBrush(Colors.Blue) });             data.Add(new ChartData() { Value = 11, Color = new SolidColorBrush(Colors.Yellow) });             this.Data = data;         }         public List<ChartData> Data         {             get;             set;         }     }     public class ChartData     {         public Brush Color         {             get;             set;         }         public double Value         {             get;             set;         }     } }


    ViewModelBase.cs
    public class ViewModelBase : INotifyPropertyChanged
    {
        #region *** Notify ***
     
        public event PropertyChangedEventHandler PropertyChanged;
     
        public void RaisePropertyChanged(string propname)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propname));
            }
        }
     
        #endregion
    }



    Hope it helps

    Best regards

    Manuel PERPEN


  5. George
    George avatar
    62 posts
    Member since:
    Sep 2008

    Posted 16 Jan 2014 Link to this post

    I have a simple line series and I want to change say the color and shape of the last point in the line to something else. Can you please elaborate further how you can pro-grammatically change the color of a line point to something else using the PointTemplates collection? I cannot figure out how to implement this.

    Thanks,

    George



  6. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 21 Jan 2014 Link to this post

    Hello George,

    Thank you for contacting us.

    You can use the PointTemplateSelector property of the series to set a different template to the data points depending on your custom logic. First, you have to create a class that inherits from the DataTemplateSelector class and override its SelectTemplate method. Then set the PointTemplateSelector to an instance of this class. I have prepared a sample project that demonstrates how you can change the template for the last point.

    I hope this was useful. Please, do not hesitate to contact us if you have further questions.

    Regards,
    Rositsa Topchiyska
    Telerik
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  7. George
    George avatar
    62 posts
    Member since:
    Sep 2008

    Posted 24 Jan 2014 Link to this post

    Thank Rositsa,

    The example you have attached work. However I have a problem trying to implement it in the case where my horizontal axis is a DateTimeContinousAxis. In this case I can only produce a graph when the series line type is "LineSeries", "ScatterLineSeries" does not work, and the "LineSeries" does not accept XValueBinding and YValueBinding.

    Can you please suggest an alternative way to handle the case where the horizontal axis os of DateTimeContinousAxis?

    Regards,

    George

    **** Update: I managed to find a working solution, although the "LineSeries" does not support XValueBinding and YValueBinding in XAML code like the "ScatterLineSeries", you can assign these properties in code, so it now works OK.


    <Controls:RadCartesianChart x:Name="FFAChart" Margin="0">
                        <Controls:RadCartesianChart.VerticalAxis>
                            <Controls:LinearAxis/>
                        </Controls:RadCartesianChart.VerticalAxis>
                        <Controls:RadCartesianChart.HorizontalAxis>
                            <Controls:DateTimeContinuousAxis LabelFitMode="Rotate" LabelFormat="MMM-yy"/>
                        </Controls:RadCartesianChart.HorizontalAxis>
                        <Controls:RadCartesianChart.Series>                       
                            <Controls:ScatterLineSeries Stroke="Orange" StrokeThickness="2" PointTemplateSelector="{StaticResource CustomPointTemplateSelector}"
                               XValueBinding="Date" YValueBinding="Value" Tag="Trade"/>
                        </Controls:RadCartesianChart.Series>
                        <Controls:RadCartesianChart.Behaviors>
                            <Controls:ChartPanAndZoomBehavior ZoomMode="Horizontal"  PanMode="Horizontal"/>
                        </Controls:RadCartesianChart.Behaviors>
                    </Controls:RadCartesianChart>

  8. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 29 Jan 2014 Link to this post

    Hello George,

    Thank you for the question.

    The difference between Categorical and Scatter series is that while the Categorical Series needs one categorical axis and one numerical axis, the Scatter Series needs two numerical axes. That's why the Scatter Series introduces XValueBinding and YValueBinding properties.
    Both the DateTimeCategoricalAxis and the DateTimeContinuousAxis are categorical axes, so they are incompatible with the Scatter Series.

    I have modified the project from my previous answer to work with DateTimeContinuousAxis.

    I hope this was useful. Please, let us know if you have further questions.

    Regards,
    Rositsa Topchiyska
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peek previews directly from the developers working on the UI for Windows Phone, subscribe to the blog feed now.
  9. George
    George avatar
    62 posts
    Member since:
    Sep 2008

    Posted 29 Jan 2014 in reply to Rosy Topchiyska Link to this post

    Thank you for your answer. I am afraid the attachment for the project modification you refer to is not in your post. Can you please publish it?

    Regards,

    George
  10. Rosy Topchiyska
    Admin
    Rosy Topchiyska avatar
    551 posts

    Posted 03 Feb 2014 Link to this post

    Hello George,

    I am not sure if you can not find an attachment at all, or just the project in my post is not the right one. The attachment is just above the Reply button. I have downloaded and opened it and it is exactly the project I have referred to in my post. Just in case, I have attached the project again.

    Please, let us know if you still have problems.

    Regards,
    Rositsa Topchiyska
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peek previews directly from the developers working on the UI for Windows Phone, subscribe to the blog feed now.
Back to Top
DevCraft banner