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

Set individual bar color based on value in code

8 Answers 97 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Timothy
Top achievements
Rank 1
Timothy asked on 12 Jul 2013, 10:21 PM
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.

8 Answers, 1 is accepted

Sort by
0
Victor
Telerik team
answered on 15 Jul 2013, 07:36 AM
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.
0
Manuel
Top achievements
Rank 1
answered on 22 Jul 2013, 09:48 AM
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


0
George
Top achievements
Rank 1
answered on 16 Jan 2014, 03:33 PM
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



0
Rosy Topchiyska
Telerik team
answered on 21 Jan 2014, 12:03 PM

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.
0
George
Top achievements
Rank 1
answered on 24 Jan 2014, 04:11 PM
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>

0
Rosy Topchiyska
Telerik team
answered on 29 Jan 2014, 10:16 AM
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.
0
George
Top achievements
Rank 1
answered on 29 Jan 2014, 12:33 PM
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
0
Rosy Topchiyska
Telerik team
answered on 03 Feb 2014, 09:10 AM
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.
Tags
Chart
Asked by
Timothy
Top achievements
Rank 1
Answers by
Victor
Telerik team
Manuel
Top achievements
Rank 1
George
Top achievements
Rank 1
Rosy Topchiyska
Telerik team
Share this question
or