SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy. We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

Please note: SciChart team will only answer questions from customers with active support subscriptions. Expired support questions will be ignored. If your support status shows incorrectly, contact us and we will be glad to help.

Answered
0
0

FAQ: How to create a custom legend with TextFormatting for the FastHeatmapRenderableSeries? The provided legend in SciChart v3.4 does not allow text formatting.

  • You must to post comments
Best Answer
0
0

UPDATE

As of Scichart v4 we now support TextFormatting natively in the HeatmapColorMap control.

Please see our HeatMapExampleView in the WPF Chart Examples Suite for more information.

    <s:HeatmapColourMap Margin="10,10,60,40" 
                 Grid.Column="1"
                 HorizontalAlignment="Right"
                 VerticalAlignment="Stretch"
                 Background="{Binding ElementName=sciChart, Path=Background}"
                 Foreground="{Binding ElementName=sciChart, Path=Foreground}"
                 ColorMap="{Binding ElementName=heatmapSeries, Path=ColorMap}"
                 Minimum="{Binding ElementName=heatmapSeries, Path=Minimum}"
                 Maximum="{Binding ElementName=heatmapSeries, Path=Maximum}"
                 TextFormatting="0.00"
                 Opacity="0.8"
                 BorderBrush="#777"
                 BorderThickness="1"
                 Orientation="Vertical" />
  • You must to post comments
0
0

This is quite simple to do by creating a custom control. We will be including this control in the next major version of Scichart, but for now, you can declare it yourself as follows:

C# Code

/// <summary>
/// A Legend Control for the <see cref="FastHeatMapRenderableSeries"/>, which gives a visual representation of double-to-color mapping in the heatmap
/// </summary>
public class HeatmapColourMap : Control, INotifyPropertyChanged
{
    private const string DefaultTextFormatting = "n2";

    public static readonly DependencyProperty ColorMapProperty = DependencyProperty.Register(
        "ColorMap", typeof (Brush), typeof (HeatmapColourMap), new PropertyMetadata(default(Brush)));

    public Brush ColorMap
    {
        get { return (Brush) GetValue(ColorMapProperty); }
        set { SetValue(ColorMapProperty, value); }
    }

    public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register(
        "Minimum", typeof (double), typeof (HeatmapColourMap), new PropertyMetadata(default(double), OnFormattedPropertyChanged));

    public double Minimum
    {
        get { return (double) GetValue(MinimumProperty); }
        set { SetValue(MinimumProperty, value); }
    }

    public static readonly DependencyProperty MaximumProperty = DependencyProperty.Register(
        "Maximum", typeof(double), typeof(HeatmapColourMap), new PropertyMetadata(default(double), OnFormattedPropertyChanged));

    public double Maximum
    {
        get { return (double) GetValue(MaximumProperty); }
        set { SetValue(MaximumProperty, value); }
    }

    public static readonly DependencyProperty TextFormattingProperty = DependencyProperty.Register(
        "TextFormatting", typeof(string), typeof(HeatmapColourMap), new PropertyMetadata(default(string), OnFormattedPropertyChanged));      

    public string TextFormatting
    {
        get { return (string) GetValue(TextFormattingProperty); }
        set { SetValue(TextFormattingProperty, value); }
    }

    public static readonly DependencyProperty FormattedMinimumProperty = DependencyProperty.Register(
        "FormattedMinimum", typeof (string), typeof (HeatmapColourMap), new PropertyMetadata(default(string)));

    public string FormattedMinimum
    {
        get { return (string) GetValue(FormattedMinimumProperty); }
        set { SetValue(FormattedMinimumProperty, value); }
    }

    public static readonly DependencyProperty FormattedMaximumProperty = DependencyProperty.Register(
        "FormattedMaximum", typeof (string), typeof (HeatmapColourMap), new PropertyMetadata(default(string)));

    public string FormattedMaximum
    {
        get { return (string) GetValue(FormattedMaximumProperty); }
        set { SetValue(FormattedMaximumProperty, value); }
    }

    public static readonly DependencyProperty FormattedMiddleValueProperty = DependencyProperty.Register(
        "FormattedMiddleValue", typeof (string), typeof (HeatmapColourMap), new PropertyMetadata(default(string)));

    public string FormattedMiddleValue
    {
        get { return (string) GetValue(FormattedMiddleValueProperty); }
        set { SetValue(FormattedMiddleValueProperty, value); }
    }

    /// <summary>
    /// Defines the Orientation DependencyProperty
    /// </summary>
    public static readonly DependencyProperty OrientationProperty = DependencyProperty.Register("Orientation",
        typeof(Orientation),
        typeof(HeatmapColourMap), new PropertyMetadata(Orientation.Horizontal, OnOrientationChanged));

    /// <summary>
    /// Gets or sets <see cref="Orientation"/>
    /// </summary>
    public Orientation Orientation
    {
        get { return (Orientation)GetValue(OrientationProperty); }
        set { SetValue(OrientationProperty, value); }
    }


    /// <summary>
    /// Initializes a new instance of the <see cref="HeatmapColourMap" /> class.
    /// </summary>
    public HeatmapColourMap()
    {
        DefaultStyleKey = typeof(HeatmapColourMap);
    }

    private static void OnMappingSettingsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {

    }
    private static void OnOrientationChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
    }

    /// <summary>
    /// Is raised when a property is changed
    /// </summary>
    public event PropertyChangedEventHandler PropertyChanged;

    private static void OnFormattedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var h = d as HeatmapColourMap;
        if (h == null) return;

        string textFormatting = h.TextFormatting ?? DefaultTextFormatting;

        double middleValue = (h.Minimum + h.Maximum)*0.5;
        h.FormattedMinimum = string.Format("{0:" + textFormatting + "}", h.Minimum);
        h.FormattedMaximum = string.Format("{0:" + textFormatting + "}", h.Maximum);
        h.FormattedMiddleValue = string.Format("{0:" + textFormatting + "}", middleValue);
    }
}

XAML

<!--  HeatmapColourMap  -->
<Style TargetType="visuals:HeatmapColourMap">
    <Setter Property="BorderBrush" Value="{markupExtensions:ThemeBinding Path=GridBorderBrush}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Background" Value="{markupExtensions:ThemeBinding Path=LegendBackgroundBrush}" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="Padding" Value="5" />
    <Setter Property="FontSize" Value="12" />
    <Setter Property="Foreground" Value="{markupExtensions:ThemeBinding Path=CursorLabelForeground}" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="visuals:HeatmapColourMap">
                <Border x:Name="PART_Border"
                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Padding="{TemplateBinding Padding}">
                    <Grid>
                        <Grid Visibility="{Binding Orientation, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource HorisontalOrientationVisibilityConverter}}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Rectangle Grid.ColumnSpan="3"
                                       Height="15"
                                       Margin="3"
                                       HorizontalAlignment="Stretch"
                                       VerticalAlignment="Center"
                                       Fill="{TemplateBinding ColorMap}" />
                            <TextBlock Grid.Row="1"
                                       Grid.Column="0"
                                       Text="{TemplateBinding FormattedMinimum}" />
                            <TextBlock Grid.Row="1"
                                       Grid.Column="1"
                                       HorizontalAlignment="Center"
                                       Text="{TemplateBinding FormattedMiddleValue}" />
                            <TextBlock Grid.Row="1"
                                       Grid.Column="2"
                                       HorizontalAlignment="Right"
                                       Text="{TemplateBinding FormattedMaximum}" />
                        </Grid>
                        <Grid Visibility="{Binding Orientation, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource VerticalOrientationVisibilityConverter}}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <Rectangle Grid.RowSpan="3"
                                       Width="15"
                                       Margin="3"
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Stretch"
                                       Fill="{TemplateBinding ColorMap}" 
                                       RenderTransformOrigin="0.5, 0.5">
                                <Rectangle.RenderTransform>
                                    <RotateTransform Angle="180" />
                                </Rectangle.RenderTransform>
                            </Rectangle>
                            <TextBlock Grid.Row="2"
                                       Grid.Column="1"
                                       VerticalAlignment="Bottom"
                                       Text="{TemplateBinding FormattedMinimum}" />
                            <TextBlock Grid.Row="1"
                                       Grid.Column="1"
                                       VerticalAlignment="Center"
                                       Text="{TemplateBinding FormattedMiddleValue}" />
                            <TextBlock Grid.Row="0"
                                       Grid.Column="1"
                                       VerticalAlignment="Top"
                                       Text="{TemplateBinding FormattedMaximum}" />
                        </Grid>
                    </Grid>

                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Usage:

    <!-- Declare the modified HeatmapColorMap control --> 
    <!-- Background, Foreground are optional properties to match the heatmap legend to the chart surface -->
    <!-- ColorMap, Minimum, Maximum are bound to the FastHeatmapRenderableSeries -->
    <!-- TextFormatting is used to format the text labels -->
    <myNamespace:HeatmapColourMap Margin="30,30,60,60" 
                        HorizontalAlignment="Left"
                        VerticalAlignment="Stretch"                            
                        Background="{Binding ElementName=sciChartSurface, Path=Background}"
                        Foreground="{Binding ElementName=sciChartSurface, Path=Foreground}"
                        ColorMap="{Binding ElementName=heatmapRenderableSeries, Path=ColorMap}"
                        Minimum="{Binding ElementName=heatmapRenderableSeries, Path=Minimum}"
                        Maximum="{Binding ElementName=heatmapRenderableSeries, Path=Maximum}"
                        TextFormatting="0.00"
                        Opacity="0.8"
                        BorderBrush="#777"
                        BorderThickness="1"
                        Orientation="Vertical" >
    </myNamespace:HeatmapColourMap>

Result:

enter image description here

Best regards,
Andrew

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.