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

Export to PNG issues

4 Answers 181 Views

ChartView

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

Mike asked on 13 Sep 2012, 04:51 PM

TelerikChart.png

ExportedChart.png

Hello,

I've created a sample chart in Telerik with stacked bars, and a line (TelerikChart.png). When I export to PNG with the following code:

PngBitmapEncoder testEncoder = new PngBitmapEncoder();
Telerik.Windows.Media.Imaging.ExportExtensions.ExportToImage(RadCartesianChart, "c:\\temp\\test.png", testEncoder);

The PNG is created, but it appears the line has moved from it's original values (the points have not). See ExportedChart.png.

Also, how can I get the exported PNG to contain the legend as well?

4 Answers, 1 is accepted

answered on 14 Sep 2012, 02:47 PM

Here is the code. Clicking on the button exports.

Xaml:

<Window x:Class="TelerikTest.Example"

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:chart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:barDemo="clr-namespace:TelerikTest"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

<Grid Name="TheGrid">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="6*" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<chart:RadCartesianChart x:Name="RadCartesianChart" Palette="Metro" Margin="0,18,0,0">

<telerik:RadCartesianChart.Behaviors>

<telerik:ChartSelectionBehavior DataPointSelectionMode="Single"

SelectionChanged="ChartSelectionBehavior_SelectionChanged"/>

</telerik:RadCartesianChart.Behaviors>

<telerik:RadCartesianChart.Grid>

<telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="5, 5" MajorYLineDashArray="5, 5">

<telerik:CartesianChartGrid.MajorXLineStyle>

<Style TargetType="Line">

<Setter Property="Shape.Stroke" Value="Gray" />

</Style>

</telerik:CartesianChartGrid.MajorXLineStyle>

<telerik:CartesianChartGrid.MajorYLineStyle>

<Style TargetType="Line">

<Setter Property="Shape.Stroke" Value="Gray" />

</Style>

</telerik:CartesianChartGrid.MajorYLineStyle>

</telerik:CartesianChartGrid>

</telerik:RadCartesianChart.Grid>

<telerik:RadCartesianChart.VerticalAxis>

<telerik:LinearAxis />

</telerik:RadCartesianChart.VerticalAxis>

<telerik:RadCartesianChart.HorizontalAxis>

<telerik:CategoricalAxis />

</telerik:RadCartesianChart.HorizontalAxis>

<telerik:LineSeries CombineMode="Stack" Stroke="#FF5AA4D4">

<telerik:LineSeries.DataPoints>

<telerik:CategoricalDataPoint Value="0.5" />

<telerik:CategoricalDataPoint Value="0.8" />

<telerik:CategoricalDataPoint Value="0.9" />

<telerik:CategoricalDataPoint Value="1.2" />

<telerik:CategoricalDataPoint Value="1.1" />

<telerik:CategoricalDataPoint Value="1.3" />

</telerik:LineSeries.DataPoints>

<telerik:LineSeries.PointTemplate>

<DataTemplate>

<Ellipse Fill="#FF5AA4D4" Height="10" Width="10" />

</DataTemplate>

</telerik:LineSeries.PointTemplate>

</telerik:LineSeries>

<telerik:LineSeries CombineMode="Stack" Stroke="#FFFF5B00">

<telerik:LineSeries.DataPoints>

<telerik:CategoricalDataPoint Value="0.5" />

<telerik:CategoricalDataPoint Value="0.8" />

<telerik:CategoricalDataPoint Value="0.9" />

<telerik:CategoricalDataPoint Value="1.2" />

<telerik:CategoricalDataPoint Value="1.1" />

<telerik:CategoricalDataPoint Value="1.3" />

</telerik:LineSeries.DataPoints>

<telerik:LineSeries.PointTemplate>

<DataTemplate>

<Ellipse Fill="#FFFF5B00" Height="10" Width="10" />

</DataTemplate>

</telerik:LineSeries.PointTemplate>

</telerik:LineSeries>

</chart:RadCartesianChart>

<StackPanel Grid.Column="1" Margin="0,14,0,0" HorizontalAlignment="Center">

<Button Width="40" Height="30" Content="Export" Click="Button_Click"></Button>

</StackPanel>

</Grid>

</Window>







CS:




using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Telerik.Windows.Controls.ChartView;
 
namespace TelerikTest
{
    /// <summary>
    /// Interaction logic for Example.xaml
    /// </summary>
    public partial class Example : Window
    {
        public Example()
        {
            InitializeComponent();
 
        }
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            System.Windows.Media.Imaging.PngBitmapEncoder test = new PngBitmapEncoder();
            PngBitmapEncoder testEncoder = new PngBitmapEncoder();
            Telerik.Windows.Media.Imaging.ExportExtensions.ExportToImage(RadCartesianChart, "c:\\temp\\test.png", testEncoder);
        }
    }
}