CandlestickSeries questions

1 Answer 68 Views
Chart
Allen
Top achievements
Rank 1
Iron
Iron
Allen asked on 15 May 2023, 08:53 AM

Hey Team,

I am trying to investigate how to use CandlestickSeries here, there are some questions want to confirm

1. If I want to get point value, how can I do that?  like when I use below code, how can i get current point binding value in code behind? 

<telerik:ChartTooltipBehavior TriggerMode="Tap" />

2. how can I modify chart color?  like below screenshot: I want to reset white/blue to others 

3. how can set Grid line as dash line, Grid code here 


<telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLineThickness="1"
                                            MajorLinesVisibility="XY"
                                            StripLinesVisibility="XY"
                                            MajorLineColor="Red" />
</telerik:RadCartesianChart.Grid>

 

Thanks

1 Answer, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 15 May 2023, 06:06 PM

Hi Allen,

Let me get right to your answers.

1) Selection

You'd use a SelectionBehavior rather than a TooltipBehavior to get selection values. Please visit  .NET MAUI Chart Documentation - Selection Behavior to learn more.

You can choose to use the SelectionChanged event:

<telerik:ChartSelectionBehavior DataPointSelectionMode="Single"
                                SelectionChanged="ChartSelectionBehavior_OnSelectionChanged"
                                SeriesSelectionMode="None" />

or if you prefer MVVM, we also have a Command:

<telerik:ChartSelectionBehavior DataPointSelectionMode="Single"
                                Command="{Binding IsSelectionChangedCommand}"
                                SeriesSelectionMode="None" />

Also, depending on your chart implementation, the selection data will vary depending on your behavior settings (is it data point or series selection? is it single or multiple?). So my best recommendation here is to put a breakpoint in your code and carefully review what you're using.

For example, here I'm getting the value of a single selection (but you still use the SelectedPoints collection):

private void ChartSelectionBehavior_OnSelectionChanged(object sender, EventArgs e)
{
    if (sender is ChartSelectionBehavior { SelectedPoints: not null } behavior)
    {
        foreach (var selectedPoint in behavior.SelectedPoints)
        {
            Debug.WriteLine($"You selected: {selectedPoint}");
        }
    }
}

2) Chart Palette

To change the color of the stroke, you need to set a custom ChartPalette

Note that the "white" you're referring to is actually transparent, the background of the chart is showing through. Here's evidence of that by changing the entire background color of the plat area:

On some platforms, like Windows, the fill color is also used, so you can have some additional flexibility there.

3) Grid Dash Array

Please visit the following article for more information and complete instructions => Cartesian Chart Grid - Telerik UI for .NET MAUI. Pay attention to the Features list, as it describes the "____DashArray" properties, those are the ones you use to set the dash array if you want dotted lines.

If you're coming from another XAML framework like WPF... please note that .NET MAUI's XAML parser doesn't know how to convert "2,4" into an int array... so you're going to have to do it manually in XAML:

<telerik:RadCartesianChart.Grid>
    <telerik:CartesianChartGrid>
        <telerik:CartesianChartGrid.MajorYLineDashArray>
            <x:Array Type="{x:Type x:Double}">
                <x:Double>4.0</x:Double>
                <x:Double>2.0</x:Double>
            </x:Array>
        </telerik:CartesianChartGrid.MajorYLineDashArray>
        <telerik:CartesianChartGrid.MajorXLineDashArray>
            <x:Array Type="{x:Type x:Double}">
                <x:Double>4.0</x:Double>
                <x:Double>2.0</x:Double>
            </x:Array>
        </telerik:CartesianChartGrid.MajorXLineDashArray>
    </telerik:CartesianChartGrid>
</telerik:RadCartesianChart.Grid>

I am not 100% sure if you also want line annotations, so please also visit this documentation => Annotations - Telerik UI for .NET MAUI.

 

Pro-Tip Technical Support - If you have any trouble with your specific implementation, you'll probably open a support ticket instead of a public forum post to take advantage of your trial support while you have it. This will allow you to better share your private code with us. Yes, it is usually useful to share common information amongst the general community, but once we get into a specific implementation, it's better to get 1:1 help with that implementation in a faster manner (tickets are faster than forums and are guaranteed an answer from our engineers).

Regards,
Lance | Manager Technical Support
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Allen
Top achievements
Rank 1
Iron
Iron
commented on 16 May 2023, 03:01 AM

Hey Lance,

1). I've tried your mentioned before. It works if we selected a point, but how can I get point when we slide into it? like ToolTipBehavior, when moves to a point, it shows us point info? like below screenshot 

2). Yes, It works when I set Palette, but it modified all stroke color, Actually I want to set color by true or false, if it's true then a color, otherwise another color.

3). Great, it works. 

 

Thanks

Allen
Top achievements
Rank 1
Iron
Iron
commented on 16 May 2023, 01:27 PM

one more thing, can we show more info in ToolTip? like Date? or Chnages?

Lance | Manager Technical Support
Telerik team
commented on 16 May 2023, 05:40 PM

Hi Allen, 

In short, what you want requires custom development. Let me try to get to the topics I can here to give you a head start if you decide to pursue custom native development further.

#1 - Tooltip Events

It seems like you're trying to get SelectionChanged-like functionality out of the TooltipBehavior? Maybe the TrackballBehavior is better, but fundamentally this is not possible at this time because only the SelectionBehavior has an event which does require the user to make a distinct selection.

If you're really just trying to customize the tooltip, you need to override the native control's tooltip UI elements and build your own. Inside the Windows platform's App.xaml file, you can define WinUI native DataTemplates.

Then when reaching down into the native platform controls via the .NET MAUI handler, you can assign that native DataTemplate:

Then at runtime, you should see this DataTemplate being used on Windows. Here's a couple screenshots of the value converter returning different colors to the custom template:

I have attached this demo to give you a headstart. If you have any questions about this, please open a  Support Ticket as the forums are not suitable for deep dive discussions on a custom implementation. The support team may be able to help, but I can't give you a 100% guarantee on this because it is custom business logic implementation.

#2. Individual DataPoint Styling Based on Conditional Logic.

It's helpful to step back and understand that the chart is not a .NET Maui XAML control, it is a native platform control with a .NET Maui handler. so, when you define your desired settings in XAML, we take those values and apply them to the specific native platform control at instantiation.

So, yes, you can programmatically add and remove a PaletteItem to the chart according to a set of rules... but this is not a per datapoint rendering setup. For example, this will make all the series data points green or red based on a bool:

If you want per-datapoint rendering, you'll need to develop a custom native code approach that overrides the settings of our native controls. I do not have any examples of this being done in .NET Maui for OHLC as it's quite advanced custom implementation.

Outside of those custom native control development approaches, I don't have a way for you to dynamically change the colors of a data point as it is being rendered. All of the series datapoints use the same PaletteItem defined in the .NET Maui layer, for anything above this, it must be done natively.

Important Note: Every platform has a different native chart control, so you will need to write the specific code using that platform's native control, so you can use the native control's documentation for some guidance on the available properties. On Windows, it is a WinUI3 ChartView. For Android see RadChartView Overview.  For iOS/MacCatalyst see TKChart Overview.

For WinUI development, please study this article where we describe the PointTemplateSeries templates (OHLC uses point template) PointTemplateSeries Class - WinUI Chart - Series - Telerik UI for WinUI. We describe the information you'll need to understand before defining your own custom point templates, for example:

you can find the source code for the Candlestick point template container visual factory here => UI-For-UWP/ContainerVisualsFactory.cs at fbf9d9e5fce787098d026e5d62cc3b7bf7d620d3 · telerik/UI-For-UWP (github.com).

Combining Concepts

One tip I can give you is to consider using both of the above ideas into one approach. you can define a native WinUI DataTemplate for the PointTemplate, then use a windows-specific IValueConverter that returns a different brush based on the DataContext's values.

For example, here's the Windows-native IValueConverter that I used in the example above to return different colors based on some conditions:

You may have noticed that I added conditions for different incoming data types. This is so that I can use the same converter for multiple DataTemplates. You're not forced to have to write a separate converter for everything, its up to you.

Additional Tips:

  • Use breakpoints in your converters/behaviors/helpers to understand the lifecycle and what data types are passed around
  • Use temporary placeholder values to understand the UI layout (for example a Red background)
  • This is going to take some experimentation on your part, there's no path laid before you to take as it's new custom development specifically designed for your needs in that specific application. Use my last two tips to help get you through it.
Allen
Top achievements
Rank 1
Iron
Iron
commented on 17 May 2023, 11:30 AM

Hey Lance, Thanks for your detail explain, 

Actually I want to draw a chart with CandlestickSeries, and shows gain or lose with different color, like stocks, and when the mouse points over a DataPoint, I can get the DataPoint info to show in other place(only Mac and Win). 

And I also want to show tips when the mouse points over a DataPont, I saw your code, It is supposed to work on Windows only, How can I handle Mac version?

 

Thanks

Lance | Manager Technical Support
Telerik team
commented on 17 May 2023, 04:28 PM

Hi Allen,

Instead of trying to write custom code to individually render data points, might I suggest that you just simply split up the data and have two series? You can have one series for gains and one series for losses.

Because you have two series, you can now easily use the Chart Palette features to distinguish gain/loss data points without the need for custom datapoint renderers.

This does mean you'd split up the incoming data into two ObservableCollections (Gains and Losses), but it's a significantly less amount of work that developing custom renderers.

At runtime, this looks perfect:

Doing this has some additional benefits. It allows you to set different custom Tooltip templates based on whether the data point is a gain or loss. See my Windows Demo Update section below for details.

About Behaviors 

This is the bottom line for behaviors:

  • SelectionBehavior- Requires user interaction
  • Recommended --> TooltipBehavior - appears while hovering the mouse, after a short delay (~1s)
  • TrackballBehavior - appears immediately

For MacCatalyst, see my code comment in the demo project.  My demo was simply a head start, not a complete solution. It's to help you see the interaction between the .NET MAUI layer and how to access the native platform layer by demonstrating the HandlerChanged event. Now that you have access to the native control, you can write that custom code to fit your scenario-specific needs.

At the bottom of my MainPage.xaml.cs, you will see a commented out code for #ELIF MACCATALYST, that shows you how to assign your own custom delegate for the iOS/MacCatalyst chart (Mac deployment uses MacCatalyst, not MacOS native, it's essentially iOS on Mac).

Please keep in mind that although there are native APIs to achieve these things using highly customized overrides, it's not available as a feature of the Telerik UI for MAUI chart right now. This custom code consulting is not something that is part of the product's technical support. We can arrange having this code written (or just consulting on how to do it) through out Professional Services partners.

I do not have any examples to share for custom delegates that does exactly what you need, you will need to write this part yourself. Fortunately,  I did however find an old KB article for Xamarin that explains how to write an iOS delegate that override the trackball/tooltip template, see https://docs.telerik.com/devtools/xamarin/knowledge-base/chart-custom-text-tooltip#custom-renderer-for-ios.

and that delegate goes here:

In your custom delegate, you can do whatever you want:

Note that the base class and the constructor is a little different for .NET MAUI than what is described in the KB article, but everything else is the same. For your convenience, you can use this as a head start:

#if MACCATALYST

public class MyChartDelegate : TelerikUI.TKChartDelegate
{
    public override void TrackballDidTrackSelection(TelerikUI.TKChart chart, TelerikUI.TKChartSelectionInfo[] selection)
    {
        ...code form article
 }
}

#endif

Two final Tips about iOS/MacCatalyst

Remember that you're working with OHLC data points, so you need to further modify the KB article's code to show OHLC values (instead of X/Y values):

For styling options, you can use what is available in the iOS API. This is very different from XAML where you can do things in a nice XAML DataTemplate, instead you must programmatically go through all the elements and set the accordingly. For example:

Windows Demo Update

I have made some improvements to the windows example for you, please study the code in my attached demo. you will now see that I only use the tooltip (instead of trackball) and apply a different DataTemplate for each series (the extra benefit for having two different series for gain/loss!).

here's the result at runtime

Further Assistance

If you have trouble writing the delegate, please open a Support Ticket instead of replying to this forum post. This is a highly specialized request and will need direct attention with your specific scenario.  This is so that you can talk to the developers or support engineers, I was not able to get the full functionality that I was hoping from the custom delegate, so I imagine you'll eventually want to talk to them..  I go to great lengths to avoid mentioning Support or Professional Services in the forums, however in this case, any further discussion to meet your low level customization needs should be done via Technical Support.

I've noticed you have started multiple trials (6 times) and have never been assigned a license. Please ask whomever is the owner of the license that you're using to assign you to the dev seat so that you can open a ticket. Go to Manage Licensed Users portal, there they can assign you to the license, which unlocks the advanced support options.

Tags
Chart
Asked by
Allen
Top achievements
Rank 1
Iron
Iron
Answers by
Lance | Manager Technical Support
Telerik team
Share this question
or