Pre loader

Exporting Heatmap to .png with included HeatmapColorMap

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
0
0

I’m attempting to export a heatmap to .png using the SciChartSurface.ExportToFile() method. The problem is the corresponding HeatmapColorMap is not included in this exported image.

Is there a way to render the image and include the HeatmapColorMap as an overlay?

Version
5.0
  • You must to post comments
Best Answer
1
0

Only if the HeatmapColorMap is a child of the SciChartSurface.

You can do this by hosting it inside a BoxAnnotation.

Try this code:

<Window x:Class="WpfApp23.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp23"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.Resources>
            <s:GradientStopsToLinearGradientBrushConverter x:Key="ColorsToLinearGradientBrushConverter"/>
        </Grid.Resources>

        <s:SciChartSurface x:Name="sciChart">

            <s:SciChartSurface.RenderableSeries>
                <s:FastUniformHeatmapRenderableSeries x:Name="heatmapSeries" Opacity="0.9">
                    <s:FastUniformHeatmapRenderableSeries.ColorMap>
                        <s:HeatmapColorPalette Maximum="200">
                            <s:HeatmapColorPalette.GradientStops>
                                <GradientStop Offset="0" Color="DarkBlue" />
                                <GradientStop Offset="0.2" Color="CornflowerBlue" />
                                <GradientStop Offset="0.4" Color="DarkGreen" />
                                <GradientStop Offset="0.6" Color="Chartreuse" />
                                <GradientStop Offset="0.8" Color="Yellow" />
                                <GradientStop Offset="1" Color="Red" />
                            </s:HeatmapColorPalette.GradientStops>
                        </s:HeatmapColorPalette>
                    </s:FastUniformHeatmapRenderableSeries.ColorMap>
                </s:FastUniformHeatmapRenderableSeries>
            </s:SciChartSurface.RenderableSeries>

            <s:SciChartSurface.XAxis>
                <s:NumericAxis DrawMajorBands="True" />
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis DrawMajorBands="True" />
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.Annotations>
                <s:BoxAnnotation X1="0" X2="1" Y1="0" Y2="1" CoordinateMode="Relative" Background="Transparent">
                    <s:BoxAnnotation.Template>
                        <ControlTemplate>
                            <Border x:Name="PART_BoxAnnotationRoot"
                                    Margin="{TemplateBinding Margin}"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}">
                                <s:HeatmapColorMap                                                
                                               HorizontalAlignment="Right"
                                               VerticalAlignment="Stretch"
                                               Background="{Binding ElementName=sciChart, Path=Background}"
                                               Foreground="{Binding ElementName=sciChart, Path=Foreground}"
                                               ColorMap="{Binding ElementName=heatmapSeries, Path=ColorMap.GradientStops, Converter={StaticResource ColorsToLinearGradientBrushConverter}}"
                                               Minimum="{Binding ElementName=heatmapSeries, Path=ColorMap.Minimum, Mode=TwoWay}"
                                               Maximum="{Binding ElementName=heatmapSeries, Path=ColorMap.Maximum, Mode=TwoWay}"
                                               TextFormatting="0.00"
                                               Opacity="0.8"
                                               BorderBrush="#777"
                                               BorderThickness="1"
                                               Orientation="Vertical" />
                            </Border>
                        </ControlTemplate>
                    </s:BoxAnnotation.Template>
                </s:BoxAnnotation>
            </s:SciChartSurface.Annotations>
        </s:SciChartSurface>

        <Button Margin="40" Content="Export me!" Click="OnExportClick" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    </Grid>
</Window>

Code behind

using System;
using System.Diagnostics;
using System.Windows;
using SciChart.Charting.Model.DataSeries;
using SciChart.Charting.Model.DataSeries.Heatmap2DArrayDataSeries;
using SciChart.Core;

namespace WpfApp23
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            heatmapSeries.DataSeries = CreateSeries(0, 300, 200, 0, 100);
        }

        private IDataSeries CreateSeries(int index, int width, int height, double cpMin, double cpMax)
        {
            var random = new Random(Environment.TickCount << index);
            double angle = Math.PI * 2 * index / 30;
            int w = width, h = height;
            var data = new double[h, w];
            for (int x = 0; x < w; x++)
            for (int y = 0; y < h; y++)
            {
                var v = (1 + Math.Sin(x * 0.04 + angle)) * 50 + (1 + Math.Sin(y * 0.1 + angle)) * 50 * (1 + Math.Sin(angle * 2));
                var cx = w / 2; var cy = h / 2;
                var r = Math.Sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
                var exp = Math.Max(0, 1 - r * 0.008);
                var zValue = (v * exp + random.NextDouble() * 50);
                data[y, x] = (zValue > cpMax) ? cpMax : zValue;
            }
            return new UniformHeatmapDataSeries<int, int, double>(data, 0, 1, 0, 1);
        }

        private void OnExportClick(object sender, RoutedEventArgs e)
        {
            sciChart.ExportToFile("C:/dev/test.png", ExportType.Png, false);
            Process.Start("C:/dev/test.png");
        }
    }
}

This is tested as working in SciChart WPF v5.1

Best regards,
Andrew

  • Chris Favaro
    Wonderful! This is exactly what I was looking for. Thank you.
  • Ammar Anwar Khan
    Using BoxAnnotation will only help in drawing HeaMapColorMap within plotting area. I do not want to obstruct the plot area. I want to have this ColoMap outside of plot area, next to Y-Axis. Any ideas how to implement it?
  • Nazariy Pelyushkevych
    @Ammar Anwar Khan, i can suggest you to use WPF RenderTargetBitmap on a parent container for both SciChartSurface and HeatmapColorMap. I believe that should be Grid, and then save it to file. http://ericsink.com/wpf3d/3_Bitmap.html
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies