Exporting RadHtmlChart to PNG and PDF

80 posts, 0 answers
  1. matt
    matt avatar
    259 posts
    Member since:
    Oct 2007

    Posted 29 Oct 2014 in reply to Marin Bratanov Link to this post

    Thanks for the tip on PhantomJS. I was mistaken, it's not a listener service to be placed on the web server, it's just a stand-alone executable to run from any machine. You can write a .JS script and pass in command line parameters for URL and filename, and have it go out and save that URL to a file. like so:

    //call via: phantomjs savePage.js http://www.google.com zzz.png
    var system = require('system');
     
    var url = system.args[1]; //'http://www.google.com';
    var filename = system.args[2]; //'zzz.png';
     
    var page = require('webpage').create();
     
    page.open(url, function() {
      page.render(filename);
      phantom.exit();
    });

    and call it like so:

    phantomjs savePage.js http://myServer/ChartEngine/chart.aspx?type=3 chartType3.png

    ...with some tweaking one may be able to define the captured-portion to only the desired chart element, then call this from our consuming apps that require the saved chart image. Still not ideal, owing to it being an third-party, an .EXE on our app servers, and non-supported...but may be better than using InkScape or commercial screenscapers.
  2. Christian
    Christian avatar
    3 posts
    Member since:
    Jun 2014

    Posted 30 Oct 2014 Link to this post

    Hi Guys,

    I've found a solution to get the radhtmlchart images to the server but I'm finding that the quality of some of the rendered images is not what I would expect.(seems to be a problem with images using Line Series when lines are close together) My solution is to call the ImageDataURL jscript method on the kendo chart as mentioned earlier in this post and use JSON to send this data to a webmethod async inside the page which then reconstructs the image and saves it to the server.It works pretty well but I'm just curious why the images with line series are getting messed up as when I do a file save as on the image in the browser they are fine.The images are in the attached zip file.

    i.e in the Page markup/client side

    function Print(sender, args) {
    debugger;
    var $j_object = $(".RadHtmlChart");

    $j_object.each( function(i)
    {
    var radHtmlChartObject = $find($j_object[i].id);
    var kendoChart = radHtmlChartObject.get_kendoWidget();
    var imageDataURL = kendoChart.imageDataURL();
    //var blob = toBlob(imageDataURL, "image/png");
    PostSvgData($j_object[i].id, imageDataURL);
    } );
    }

    function PostSvgData(id, fileData)
    {
    $.ajax({
    type: 'POST',
    url: "PerformanceReporting.aspx/PostSvgFile",
    data: '{fileData: "' + fileData + '",filename:"' + id + '"}',
    contentType: "application/json; charset=utf-8",
    async: true,
    dataType: "json",
    success: OnSuccess,
    failure: function(response) {
    alert(response.d);
    }
    });
    }

    function OnSuccess(response) {
    }

    //On server side
    [System.Web.Services.WebMethod]
    public static void PostSvgFile(string fileData, string filename)
    {
    int data_index = fileData.IndexOf("base64") + 7;
    string fileContents = fileData.Substring(data_index);

    byte[] binaryData;

    binaryData = System.Convert.FromBase64String(fileContents);

    // save to disk
    System.IO.FileStream outFile;
    try
    {
    string file = Path.Combine(@"c:\temp\png", filename.Replace("-", ""));
    file = string.Concat(file, ".png");

    outFile = new System.IO.FileStream(file,
    System.IO.FileMode.Create,
    System.IO.FileAccess.Write);
    outFile.Write(binaryData, 0, binaryData.Length);
    outFile.Close();
    }
    catch (System.Exception exp)
    {
    // Error creating stream or writing to it.
    System.Console.WriteLine("{0}", exp.Message);
    }
    }
  3. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 03 Nov 2014 Link to this post

    Hi Christian,

    I have tried to reproduce the mentioned issue but to no avail - the charts output looks like the one in the browser. Could you please try to reproduce the issue with the attached VS example and then tell us what changes you have made, so that I can proceed further with the investigation?

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  4. Karthick Purushothaman
    Karthick Purushothaman avatar
    23 posts
    Member since:
    Mar 2009

    Posted 18 Mar 2015 in reply to Danail Vasilev Link to this post

    Hello Danail,

    We are using Inkscape to export the svg file to pdf/png from the RadHTML chart. We are facing the same issue of text missing while exporting to image/pdf. This issue occurs when it is hosted in the server and not in the development machine(http://localhost:2001). We have also added MIME type in the IIS also.

    FYR, I have attached the screenshot of the exported pdf file with missing text, from the application hosted in the server.
    Could you help us to resolve the issue
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 18 Mar 2015 Link to this post

    Hi Karthick,

    I can suggest that you try to export the chart on the client-side through the RadClientExportManager control. You can find an example in the HtmlChart - Export to PDF demo.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Carlos
    Carlos avatar
    2 posts
    Member since:
    Mar 2015

    Posted 20 Mar 2015 Link to this post

    Hi,

    I'm trying to export a RadHtmlChart but I get the next error:

    Error en tiempo de ejecución de Microsoft JScript: Sys.WebForms.PageRequestManagerParserErrorException: No se pudo analizar el mensaje recibido del servidor. Este error suele producirse cuando la respuesta resulta modificada por llamadas a Response.Write() o cuando los filtros de respuesta, los HttpModules o el seguimiento de servidor están habilitados.
    Detalles: Error de análisis cerca de '￿PNG

    The code creates the temp.svg and exportedchart.png files in the app_data folder, but the files are deleted and then I get the error.

    Thanks for your help.
    Carlos García Tovar
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1494 posts

    Posted 24 Mar 2015 Link to this post

    Hi Carlos,

    Since you are modifying the request by returning the image from the server you should disable the AJAX.

    Regards,
    Danail Vasilev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8. Doug
    Doug avatar
    70 posts
    Member since:
    Aug 2014

    Posted 01 May 2015 Link to this post

    it is not clear on how to implement this export.
    I downloaded your test project
    inserted the telerik dll into the bin folder and ran it.
    it created the file app_code/temp.svg and it has the correct svg chart in it.

    but my page errors on

    ExportRadHtmlChart_VB\App_Code\HtmlChartExporter.vb    Line: 21    
    inkscape.Start()
    error = The system cannot find the file specified

    do I need to put an inkscape dll into my bin?
            

     

  9. Doug
    Doug avatar
    70 posts
    Member since:
    Aug 2014

    Posted 01 May 2015 in reply to Doug Link to this post

    before you ask - yes I had already installed inkscape
  10. Doug
    Doug avatar
    70 posts
    Member since:
    Aug 2014

    Posted 01 May 2015 in reply to Doug Link to this post

    ok a few things - first I see it is hardcoded to the path of inkscape so I fixed that.
    I am having a different issue of the chart not showing in the image but I didn't see there were 3 pages of help text on this post so I just need to review those before I post again.
    disregard my posts (admin delete if you can)

    Doug
  11. Doug
    Doug avatar
    70 posts
    Member since:
    Aug 2014

    Posted 01 May 2015 in reply to Doug Link to this post

    I am having 2 issues
    1) my exports show only a small top left corner of the chart (I think)
    in debug mode I see the width and height are correct.

    the svg exported temp file shows the chart when viewed. (see attached files)
    I even tried putting into the export a larger/smaller amount then the actual chart width / height to no avail.

    2) I have a HtmlChartHolder that holds my charts and I want to export that whole thing. can it be done with this code or method?
    $find("<%=RadHtmlChart1.ClientID %>").getSVGString(); <-- does not work for a chart holder, maybe there is a way to get it?

  12. Doug
    Doug avatar
    70 posts
    Member since:
    Aug 2014

    Posted 01 May 2015 Link to this post

    here are my attachments
  13. Doug
    Doug avatar
    70 posts
    Member since:
    Aug 2014

    Posted 04 May 2015 Link to this post

    I have my .svg file saved so I tried opening it directly with inkscape and it gives me the image shown in my attachment.


    now when I opened the svg in inkscape and use the export GUI on the "page" tab it has the same bounding box as shown in image (0-100, 0-100)
    but on the "drawing" tab it has the correct values and exports correctly.
    it seems somehow my inkscape is exporting in "page" mode and I need it in "drawing" mode.

    ok now looking at their help page I added this to my arguments and it does now export the full chart
     --export-area-drawing

    but the labels are not showing on export.
    I tried adding --export-text-to-path (to no effect)

    perhaps there are default settings on inkscape that I need to set when I install it?
  14. Hari
    Hari avatar
    4 posts
    Member since:
    Feb 2014

    Posted 29 Jun 2015 Link to this post

    Please Help me with this. 

     I have created a RadHtmlChart and trying to export it to pdf. I followed this http://demos.telerik.com/aspnet-ajax/client-export-manager/applicationscenarios/export-radhtmlchart/defaultcs.aspx?product=htmlchart

     But for me its not working which means im getting a blank pdf without datas.

  15. Hari
    Hari avatar
    4 posts
    Member since:
    Feb 2014

    Posted 29 Jun 2015 in reply to Hari Link to this post

    i binded the data in client side.
  16. Mandy
    Mandy avatar
    33 posts
    Member since:
    Mar 2010

    Posted 10 Feb Link to this post

    Hello Admin,

     I have tried your solution and it works really well on my localhost, But How can i use the same approach when publishing the code on Shared hosting environment like Godaddy.com.

     Is is possible or not?

    Quick reply will be really appreciated.

    Thanks

    Mandeep

  17. Henrik
    Henrik avatar
    23 posts
    Member since:
    Feb 2012

    Posted 11 Feb in reply to Mandy Link to this post

    Hey Mandy.
    I dont know what solution you're using but I ended up using the RadClientExportManager:

    This javascript function finds the image (#foo) and exports it:

                    function Print(s, e) {
                        var exportMngr = $find("<%= RadClientExportManager1.ClientID %>");
                        exportMngr.exportImage($telerik.$("#foo"));
                    }


    This is a javascript event on the ClientExportManager that sends the image to the server via a pagemethod and triggers an ajax request by clicking a button when done.

                    function ClientImageExporting(sender, args) {
                        var dataRaw = args.get_dataURI().split(',');

                        PageMethods.InitiateTransfer(gQuestionnaireGuid, dataRaw[1], function () {
                            $find('<%=DoPrint.ClientID %>').click();
                        });

                        args.set_cancel(true);
                    }


    On the server-side i get the image from the pageMethod like this :
            public static void InitiateTransfer(string rkaGUID, string encodedImage)
            {

                    var image = Functions.Imaging.Base64ToBitmap(encodedImage);
    //Save the image or images to some cache..  I use session variables
            }


                public static object Base64ToBitmap(string encodedImage)
                {
                        Bitmap bmpReturn = null;

                        byte[] byteBuffer = Convert.FromBase64String(encodedImage);
                        using (MemoryStream memoryStream = new MemoryStream(byteBuffer))
                        {
                            memoryStream.Position = 0;

                            bmpReturn = (Bitmap)Bitmap.FromStream(memoryStream);

                            memoryStream.Close();
                        }
                        byteBuffer = null;

                        return bmpReturn;
                }

            protected void DoPrint_Click(object sender, EventArgs e)
            {
    //In the ajax callback I get the images from the session variable and clears it, since I don't need that image anymore.
            }


    Using this approach I'm not reliant on any 3rd party libraries being installed on the server..  Its all plain MS and Telerik and should work on all hosts.Hey Mandy.
    I dont know what solution you're using but I ended up using the RadClientExportManager:

                    function Print(s, e) {
                        var exportMngr = $find("<%= RadClientExportManager1.ClientID %>");
                        exportMngr.exportImage($("#foo"));
                    }

                    function ClientImageExporting(sender, args) {
                        var dataRaw = args.get_dataURI().split(',');

                        PageMethods.InitiateTransfer(gQuestionnaireGuid, dataRaw[1], function () {
                            $find('<%=DoPrint.ClientID %>').click();
                        });

                        args.set_cancel(true);
                    }

  18. Michael
    Michael avatar
    1 posts
    Member since:
    Feb 2016

    Posted 01 Mar Link to this post

    Hello,

    I am using following code to get RadHtml chart in pdf

    HtmlChartExportSettings currentSettings = new HtmlChartExportSettings();

            currentSettings.Height = (int)RadHtmlChart1.Height.Value;
            currentSettings.Width = (int)RadHtmlChart1.Width.Value;

     

    but for HtmlChartExportSettings shows namespace could not be found

    I have included

    using System.Web.UI;

    using Telerik.Web.UI;

  19. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 04 Mar Link to this post

    Hi Michael,

    To avoid inconsistency of the thread please open a new support ticket for your case.

    Regards,
    Peter Filipov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  20. ธนา
    ธนา avatar
    1 posts
    Member since:
    Oct 2016

    Posted 27 Oct Link to this post

    i use RadClientExportManager to export RadOrgChart to PNG but i got the problem when i use firefox to export like this

    https://www.mediafire.com/?td7cun457hfd4ci

    How to solve this problem

Back to Top