How to display values in CandleStickChart's Bars

6 posts, 1 answers
  1. Arun
    Arun avatar
    3 posts
    Member since:
    Sep 2013

    Posted 11 Sep 2013 Link to this post

    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 :)
  2. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 11 Sep 2013 Link to this post

    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 >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Arun
    Arun avatar
    3 posts
    Member since:
    Sep 2013

    Posted 12 Sep 2013 Link to this post

    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>
  5. Answer
    Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 13 Sep 2013 Link to this post

    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 >>
  6. Arun
    Arun avatar
    3 posts
    Member since:
    Sep 2013

    Posted 16 Sep 2013 Link to this post

    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.

  7. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 19 Sep 2013 Link to this post

    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 >>
Back to Top
UI for WPF is Visual Studio 2017 Ready