Export Radchart image as HTML

6 posts, 1 answers
  1. Rahul
    Rahul avatar
    50 posts
    Member since:
    Jun 2008

    Posted 11 Dec 2010 Link to this post

    Hello,

    I want to export image of Rad chart as HTML
    i.e. I want to save an HTML page with Radchart image on it.

    Is it possible to export the image of Rad chart as HTML.

    Thanks in advance.
  2.
  3. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 15 Dec 2010 Link to this post

    Hi Rahul,

    You can export RadChart as an image and you can create an html file in code behind with link to the exported image file. Unfortunately Silverlight supports only a single SaveFileDialog instance to be created in a button click event. The solution is either to create both files in a single event handler and then save them as a zip file. Another way could be to use 2 buttons - 1 for saving image and other for saving the html file like this:

    string htmlPage =
        "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">" + Environment.NewLine +
        "<html xmlns=\"http://www.w3.org/1999/xhtml\">" + Environment.NewLine +
        Environment.NewLine +
        "<head>" + Environment.NewLine +
        "<meta content=\"text/html; charset=utf-8\" http-equiv=\"Content-Type\" />" + Environment.NewLine +
        "<title>Untitled 1</title>" + Environment.NewLine +
        "</head>" +
        Environment.NewLine +
        "<body>" + Environment.NewLine +
        "<img src=\"{0}\" alt=\"RadChart\" />" + Environment.NewLine +
        "</body>" + Environment.NewLine +
        Environment.NewLine +
        "</html>";
     
    private string imageName;
     
    private void button1_Click(object sender, RoutedEventArgs e)
    {
        SaveFileDialog sfd = new SaveFileDialog();
        sfd.DefaultExt = ".png";
        sfd.Filter = "Image file|*.png";
     
        //Save image
        imageName = string.Empty;
     
        if (sfd.ShowDialog() == true)
        {
            imageName = sfd.SafeFileName;
     
            using (Stream fs = sfd.OpenFile())
            {
                this.RadChart1.ExportToImage(fs, new PngBitmapEncoder());
            }
     
            button1.IsEnabled = false;
            button2.IsEnabled = true;
        }
    }
     
    private void button2_Click(object sender, RoutedEventArgs e)
    {
        SaveFileDialog sfd1 = new SaveFileDialog();
        sfd1.DefaultExt = ".html";
        sfd1.Filter = "HTML file|*.html"; ;
     
        // Save html file
        if (sfd1.ShowDialog() == true)
        {
            using (StreamWriter writer = new StreamWriter(sfd1.OpenFile()))
            {
                writer.Write(string.Format(htmlPage, imageName));
            }
     
            button1.IsEnabled = true;
            button2.IsEnabled = false;
        }
    }

    You can find in the attached file a runnable sample project that demonstrates the code above in action.

    All the best,
    Yavor Ivanov
    the Telerik team

    Browse the videos here>> to help you get started with RadControls for Silverlight
  5. Rahul
    Rahul avatar
    50 posts
    Member since:
    Jun 2008

    Posted 22 Dec 2010 Link to this post

    Hello Yavor,

    Thanks for your reply.

    In the given implementation we have to use two button clicks
    but i want to export RadChart as an image and create an html file containing this image in a single Button click.
    Is it possible to export RadChart image in HTML file in a single button click.

    Or is it possible to open two Save Dialogboxes in a single button click,
    and then export image first and then use it in the HTML file.

    Thanks in advance,
  7. Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 23 Dec 2010 Link to this post

    Hello Rahul,

    Unfortunately due to security limitation of Silverlight only 1 SaveFileDialog can be opened at a time and only in response to a user command. Here is a quote from MSDN:

    For security purposes Silverlight file and print dialogs must be user-initiated. This means you must show them from a user-initiated action such as the click event handler for a button. In addition, there is a limit on the time allowed between when the user initiates the dialog and when the dialog is shown. If the time limit between these actions is exceeded, an exception will occur.

    You can pack both of the files as a single archived file and save this file with a SaveFileDialog, thus skipping the limitation.
    Hope this helps!

    Kind regards,
    Yavor Ivanov
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  8.
  9. Rahul
    Rahul avatar
    50 posts
    Member since:
    Jun 2008

    Posted 23 Dec 2010 Link to this post

    Thanks Yavor for your instant reply,

    How can we pack both of the files as a single archived file and save this file with a SaveFileDialog.

    Thanks,
  11. Answer
    Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 27 Dec 2010 Link to this post

    Hello Rahul,

    There are several community archiving utilities available for Silverlight. You can try SharpZipLib port for Silverlight. Saving the 2 files now can be achieved in a single instance of SaveFileDialog like this:

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        SaveFileDialog sfd = new SaveFileDialog();
        sfd.DefaultExt = ".zip";
        sfd.Filter = "Zip file|*.zip";
     
        if (sfd.ShowDialog() == true)
        {
            using (Stream file = sfd.OpenFile())
            {
                ZipOutputStream zipOutputStream = new ZipOutputStream(file);
                SaveImage(zipOutputStream);
                SaveFile(zipOutputStream);
                zipOutputStream.Finish();
            }
        }
    }
     
    private void SaveImage(ZipOutputStream stream)
    {
        stream.PutNextEntry(new ZipEntry("image.png"));
        this.RadChart1.ExportToImage(stream, new PngBitmapEncoder());
    }
     
    private void SaveFile(ZipOutputStream stream)
    {
        stream.PutNextEntry(new ZipEntry("RadChart.html"));
        StreamWriter writer = new StreamWriter(stream);
        writer.Write(string.Format(htmlPage, "image.png"));
        writer.Flush();
    }

    You can find the code above in the sample application attached to this post. Feel free to try out other archiving utilities and choose the one that suits you best.

    Hope this helps!


    Kind regards,
    Yavor Ivanov
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
Back to Top