How to save a chart as image with a fixed size

4 posts, 1 answers
  1. Somesh
    Somesh avatar
    12 posts
    Member since:
    Aug 2010

    Posted 29 Nov 2010 Link to this post

    Hi,
    Can i save a Rad Chart a image with fixed.
    i.e. can we save Rad Chart as image of size 800 pixel * 600 pixel

    Thanks in advance.

    Regards,
    Somesh
  2. Evgeni "Zammy" Petrov
    Admin
    Evgeni "Zammy" Petrov avatar
    168 posts

    Posted 02 Dec 2010 Link to this post

    Hi Somesh,

     Check out this example:
    http://demos.telerik.com/silverlight/#Chart/Exporting

    There we show how to export to image and other formats.

    All the best,
    Evgeni "Zammy" Petrov
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. Somesh
    Somesh avatar
    12 posts
    Member since:
    Aug 2010

    Posted 02 Dec 2010 Link to this post

    Thanks Evgeni for your reply,

    but my problem is that in my application RadCharts are placed inside RadPane and when we resize the radpane,
    size of radchart will also be changed and then i export chart as image then the image is exported in the dimension
    of chart displayed in UI and i want to export image of chart in our desired dimension ( say 800*600 px).

    Is it possible to export image of chart in desired dimension.

    Thanks,

    Regard,
    Somesh
  4. Answer
    Evgeni "Zammy" Petrov
    Admin
    Evgeni "Zammy" Petrov avatar
    168 posts

    Posted 07 Dec 2010 Link to this post

    Hello Somesh,

    For the image export functionality to work we need to have an UIElement drawn. You actually need the chart to be 800x600 for it to get export 800x600. You can export in any resolution and then try to re-sample the image into another but this will result in lose of quality.

    I have a solution with a drawback.It makes the chart blink because it is removed from the visual tree and then added back. Here is a code snippet:

    private void Export(object sender, RoutedEventArgs e)
    {
        SaveFileDialog dialog = new SaveFileDialog();
        dialog.DefaultExt = "*.png";
        dialog.Filter = "PNG File (*.png) | *.png";
     
        if (!(bool)dialog.ShowDialog())
            return;
     
        Canvas c = new Canvas();
        LayoutRoot.Children.Remove(RC1);
        c.Children.Add(RC1);
        Canvas.SetTop(RC1, -1000);
        LayoutRoot.Children.Add(c);
        RC1.Height = 600;
        RC1.Width = 800;
        Dispatcher.BeginInvoke(() =>
        {
            Stream fileStream = dialog.OpenFile();
            RC1.ExportToImage(fileStream, new Telerik.Windows.Media.Imaging.PngBitmapEncoder());
            RC1.Height = Double.NaN;
            RC1.Width = Double.NaN;
            fileStream.Close();
            c.Children.Remove(RC1);
            LayoutRoot.Children.Remove(c);
            LayoutRoot.Children.Add(RC1);
        });
    }
    So what happens in the snippet:
    1.First are the usual steps that you take to export.
    2.For the actual saving I create a Canvas and add it to the LayoutRoot.
    3.Remove the chart from LayoutRoot and add it to the Canvas with a big negative Canvas.Top value.
    4.Set the resolution needed to the chart (800x600).
    5.This is the tricky part, Create a lambda expression and execute it with Dispetcher. This will force the rest of the code to be executed after a layout cycle (the chart gets redrawn.)
    6.Export the chart to file.
    7.Remove chart from Canvas and add it back to layout root.

    I hope this will be of help.

     

    Regards,
    Evgeni "Zammy" Petrov
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top