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

RadHtmlChart make legend visible client side

1 Answer 130 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
jasear
Top achievements
Rank 1
jasear asked on 28 Jun 2013, 04:47 PM
Hi,

I am following this article:

http://www.telerik.com/community/code-library/aspnet-ajax/html-chart/exporting-radhtmlchart-to-png-and-pdf.aspx

To export my radhtmlchart to PDF. The problem is that I am hiding the RadHtmlChart Legend and displaying my own custom legend. When I export the chart I see the chart in PDF but no legend (understandbly because I am hiding the legend).

I believe that a possible solution could be that I make the Legend visible, then generate the SVG text, then hide the legend. Is this possible? Can you suggest a work around?

1 Answer, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 03 Jul 2013, 11:05 AM
Hello,

You are quite right that the proper way to export the legend is to make it visible just before the start of the export and then hide it again. You can do that using this code snippet (this is a modified version of the getSvgContent() method from the Code Library):

<script type="text/javascript">
    function getSvgContent(sender)
    {
        //get the chart
        var chart = $find("RadHtmlChart1");
        //show the legend so that it is visible when the export begins
        chart._chartObject.options.legend.visible = true;
        //repaint the chart to apply the changes to the legend
        chart.repaint();
         
        //obtain an SVG version of the chart regardless of the browser
        var chartRendering = $find("<%=RadHtmlChart1.ClientID %>").getSVGString();
        //store the SVG string in a hidden field and escape it so that the value can be posted to the server
        $get("<%=svgHolder.ClientID %>").value = escape(chartRendering);
        //initiate the postback from the button so that its server-side handler is executed
        __doPostBack(sender.name, "");
 
        //hide the legend again
        chart._chartObject.options.legend.visible = false;
        chart.repaint();
    }
</script>

The reason why you cannot export your custom legend is probably  because it is created  by HTML while the Code Library relies on the rendered SVG elements of the chart. What you could do in this situation is to search and find a library which provides exporting the HTML content of a page to PNG or PDF and apply it in your scenario.

Regards,
Stamo Gochev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Chart (HTML5)
Asked by
jasear
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Share this question
or