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

How to display values in CandleStickChart's Bars

5 Answers 245 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Arun
Top achievements
Rank 1
Arun asked on 11 Sep 2013, 07:37 AM
I am able to get the Mockup using CandleStick chart.. Please look into the attached Screenshot.
Can somebody help me in solving the below 2 issues..
    1. I have to display the "HighValue" and "LowValue" at the top and bottom of every item as in the mockup.
    2. Using Annotation, I have drawn a line at the value of "13" and i have named the Label as "BASE VALUE".
       I want that label to be displayed outside the graph as in the mockup.

<
telerik:RadCartesianChart x:Name="xCartesianChart" Height="300"  Width="400" Palette="Windows8" >
            <telerik:RadCartesianChart.VerticalAxis>
                    <telerik:LinearAxis x:Name="verticalAxis"  HorizontalLocation="Left"/>
            </telerik:RadCartesianChart.VerticalAxis>
              
            <telerik:RadCartesianChart.HorizontalAxis >
                    <telerik:CategoricalAxis VerticalLocation="Top" LineThickness="1" LabelInterval="2" ShowLabels="True"/>
            </telerik:RadCartesianChart.HorizontalAxis>
              
            <telerik:CandlestickSeries x:Name="xCandleStick" 
                                       CategoryBinding="XValue" 
                                       LowBinding="YValue2" HighBinding="YValue"
                                       CloseBinding="YValue2" OpenBinding="YValue" 
                                       ShowLabels="True"/>   
              
            <telerik:RadCartesianChart.Annotations>
                <telerik:CartesianGridLineAnnotation Axis="{Binding ElementName=verticalAxis}" Label="BASE VALUE" Value="13" Stroke="Green">
                        <telerik:CartesianGridLineAnnotation.LabelDefinition>
                            <telerik:ChartAnnotationLabelDefinition Location="Left" VerticalAlignment="Top" VerticalOffset="0" HorizontalOffset="80"/>
                        </telerik:CartesianGridLineAnnotation.LabelDefinition>
                    </telerik:CartesianGridLineAnnotation>
            </telerik:RadCartesianChart.Annotations>
              
        </telerik:RadCartesianChart>

//Code-behind
public MainWindow()
        {
            InitializeComponent();
  
            PopulateCartesianChart();
        }
  
void PopulateCartesianChart()
        {
            Random rnd = new Random();
  
            List<ChartDataClass> chartDatas = new List<ChartDataClass>();
  
            for (int i = 0; i < 20; i++)
            {
                ChartDataClass cdc = new ChartDataClass();
                cdc.XValue = i;
                cdc.YValue = rnd.NextDouble() * 100;
                cdc.YValue2 = cdc.YValue - 50;
  
                chartDatas.Add(cdc);
            }
  
            xCartesianChart.Series[0].ItemsSource = chartDatas;
}

Thanks in Advance :)

5 Answers, 1 is accepted

Sort by
0
Evgenia
Telerik team
answered on 11 Sep 2013, 11:10 AM
Hello Arun,

 It is not possible to show multiple labels per serie. What I can suggest is that you show the High and Low values in a single Label, formatted one under the other for example. For the purpose you might use the ChartSeriesLabelDefinition and your own custom template:

<telerik:ChartSeriesLabelDefinition Margin="-4 0 0 0">
        <telerik:ChartSeriesLabelDefinition.Template>
            <DataTemplate>
                  <StackPanel>
                                                          <TextBlock Text="{Binding DataItem.HighValue}" HorizontalAlignment="Center" />
                                                         <TextBlock Text="{Binding DataItem.LowValue}" HorizontalAlignment="Center" />
                                                  </StackPanel>
        </DataTemplate>
                            </telerik:ChartSeriesLabelDefinition.Template>
                        </telerik:ChartSeriesLabelDefinition>

Please mind that LowValue and HighValue are properties of your business object class.

Regards,

Evgenia
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Arun
Top achievements
Rank 1
answered on 12 Sep 2013, 02:40 PM

Thanks for your quick reply Evgenia.. As you suggested, i have added a 'ChartSeriesLabelDefinition' Template with 2 Textblocks to display both the HighBinding and LowBinding property values.. But they are not getting displayed. I am not sure what DataItem refers to.

I looked into someother solutions but am not able to open the attached project(Error : This project requires Windows8 or higher to load). Any help will be appreciated.. It will be great if you could attach a workable solution.

Reference:-
http://www.telerik.com/community/forums/metro/chart-xaml/displaying-category-value-in-bar-series-label.aspx

<telerik:CandlestickSeries x:Name="xCandleStick" 
                                           CategoryBinding="XValue"
                                           CloseBinding="YValue2"
                                           HighBinding="YValue"
                                           LowBinding="YValue2"
                                           OpenBinding="YValue"
                                           ShowLabels="True">
                    <telerik:CandlestickSeries.LabelDefinitions>
                        <telerik:ChartSeriesLabelDefinition Margin="-4 0 0 0">
                            <telerik:ChartSeriesLabelDefinition.Template>
                                <DataTemplate>
                                    <StackPanel>                            
                                        <TextBlock HorizontalAlignment="Center" Text="{Binding YValue}" />
                                        <TextBlock HorizontalAlignment="Center" Text="{Binding DataContext.YValue2, RelativeSource={RelativeSource AncestorType={x:Type telerik:CandlestickSeries}}}" />
                                    </StackPanel>
                                </DataTemplate>
                            </telerik:ChartSeriesLabelDefinition.Template>
                        </telerik:ChartSeriesLabelDefinition>
                    </telerik:CandlestickSeries.LabelDefinitions>
                </telerik:CandlestickSeries>
0
Accepted
Evgenia
Telerik team
answered on 13 Sep 2013, 03:05 PM
Hi Arun,

 You may find attached a sample that demonstrates what I explained in my previous post. Feel free to modify it per your own scenario needs.

Regards,
Evgenia
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Arun
Top achievements
Rank 1
answered on 16 Sep 2013, 05:24 PM
Thanks Evgenia for your sample solution. It works.. Can you answer my 2nd question also..!!
2. Using Annotation, I have drawn a line at the value of "13" and i have named the Label as "BASE VALUE".
   I want that label to be displayed outside the graph as in the mockup.

0
Evgenia
Telerik team
answered on 19 Sep 2013, 12:16 PM
Hello,

 I'm glad my project was helpful.
 There are three ways you might choose from to achieve your second requirement:

1. You might set Title for the Vertical Axis and Rotate the label via Custom style for the axis so that is appears as you desire. For the purpose you need to create Style with TargetType TextBlock.
Let me know if you need further assistance with this.

2. You might choose to use a CartesianCustomAnnotation where its Content is simple text or TextBlock. Use it with combination of ClipToPlotArea property set to false so that the text will go outside the plot area.

3. Simply position a TextBlock over the chart at the place you desire and use the Horizontal/Vertical Alignment and Margin properties to fixate its position over the ChartView.

Regards,
Evgenia
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WPF.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
ChartView
Asked by
Arun
Top achievements
Rank 1
Answers by
Evgenia
Telerik team
Arun
Top achievements
Rank 1
Share this question
or