Get rendered code of HtmlCharts (HtmlChart to pdf)

[AK]

Hi,
I have a problem and would appreciate your help.

I have a website with some Teleriks controls: radgrid and htmlchart. No one will see this website (none of users will enter/display this website). The only purpose of this website is to generate a html, which I pass to third-party PDF Generator. I pass it as a byte[]. My pdf generator copes easily with css and javascript (animations in jQuery etc.).
The problem is that the htmlcharts do not display in final pdf, other telerik controls display properly. When I view this website via browser, everything is displaying ok. Only witho htmlcharts in my final pdf is problem. I suppose the problem is "client-side-nature of this charts". I have read the http://www.telerik.com/community/code-library/aspnet-ajax/html-chart/exporting-radhtmlchart-to-png-and-pdf.aspx and this solution works, but I have different scenario. In my situation no one (none user) will enter the website via a browser. So passing svg with getSVGString() to server is impossible.
So my question is, how to get a rendered html view of this htmlchart.

Thanks in advance for help.
AK

[Danail Vasilev]

Hi AK,

As you have already seen from the provided information in Exporting RadHtmlChart to PNG and PDF Code Library, RadHtmlChart (as well as the RadGauge) renders entirely on the client through JavaScript and SVG and therefore a direct export is not achievable as the control is not available on the server.

That is the reason why we have exposed the client-side method - getSVGString through which the SVG rendering can be obtained on the client and then passed to the server for export. Therefore you can recreate you current logic in order to fit in with that behavior, however, this is a custom solution that gets out of the scope of our support services and it is up to the developer how to proceed.

Note also that this is not an issue with the control but rather a consequence of the RadHtmlChart's rendering. Nevertheless if you need a chart that renders and export on the server, you can consider using the RadChart - the chart can be exported to an image format and then use an additional library to convert it to pdf format. If the RadChart, however, is used inside the RadGrid, RadGrid's export can be used for the purpose.

Regards,
Danail Vasilev
Telerik

[Zubin]

I am rendering RadHtml chart in iframe along with some other table. now  then i copy Iframe html content(RadHtml chart + table) to rad Editor using set-html(). now i can see chart and table in radEditor Preview tab but when i fire exportToPdf to generate Pdf, Pdf viewer showing error "Corrupted PDF"......

can you tell me what exaclty  problem is....

[Danail Vasilev]

Hi Zubin,

The reason for the mentioned error is that the content of the RadEditor is invalid due to the SVG rendering that is passed there. You can try exporting the chart to a png through the provided Code Library and then insert it in the RadEditor and then do the export.

Another approach could be to render the chart as canvas, export the canvas to base64 format on the client, insert the image to the editor and do the export. For example:
JavaScript:

<script type="text/javascript">
    function ExportChart() {
        //Render chart as Canvas
        var chart = $find("<%=RadHtmlChart1.ClientID%>");
        chart._chartObject.options.renderAs = "canvas";
        chart.repaint();
        //Export Canvas Image on Client
        var canvas = chart.get_element().children[0];
        var img = canvas.toDataURL("image/png");

        var editor = $find("<%=RadEditor1.ClientID%>");
        editor.set_html("<img src='" + img + "'/>");
    }
</script>

ASPX:

<telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" Text="Add Chart in Editor" OnClientClicked="ExportChart" />
<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="true" Text="Export Editor Content to PDF" OnClick="RadButton1_Click" />
<telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" Height="400">
    <Appearance FillStyle-BackgroundColor="White"></Appearance>
    <PlotArea>
        <Series>
            <telerik:ColumnSeries Name="Series 1">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="30" />
                    <telerik:CategorySeriesItem Y="10" />
                    <telerik:CategorySeriesItem Y="20" />
                </SeriesItems>
            </telerik:ColumnSeries>
        </Series>
        <XAxis>
            <Items>
                <telerik:AxisItem LabelText="item 1" />
                <telerik:AxisItem LabelText="item 2" />
                <telerik:AxisItem LabelText="item 3" />
            </Items>
        </XAxis>
    </PlotArea>
</telerik:RadHtmlChart>

 
C#:

protected void Page_Load(object sender, EventArgs e)
{

}

protected void RadButton1_Click(object sender, EventArgs e)
{
    RadEditor1.ExportToPdf();
}

This approach, however, will work only in newer browsers that support canvas (i.e., IE 8/7 and doesn't support canvas).

You can also find the full VS example in the attached archive.

Regards,
Danail Vasilev
Telerik

[Dylan Nicholson]

Like many others, we need a chart library that can render SVG on the server-side - we need to generate HTML emails that don't include any javascript, and we need to generate PDFs from static HTML that includes charts.

At this stage without this support we're having to look at moving away from the Telerik library entirely - surely there's a plan to introduce this?

 

[Marin Bratanov]

Hello Dylan,

Telerik UI for ASP.NET AJAX controls are, first and foremost, user interface controls. Thus, they are designed to work with user interaction.

In terms of export, nowadays you can use the RadClientExportManager control as shown here: http://demos.telerik.com/aspnet-ajax/client-export-manager/applicationscenarios/export-radhtmlchart/defaultcs.aspx?product=htmlchart.

You can then use tools like PhantomJS to fire up a browser on your server, so that the chart renders and provides you with the exported PDF. You may also find useful this concept of saving the exported files to the server: http://docs.telerik.com/devtools/aspnet-ajax/controls/clientexportmanager/how-to/save-exported-files.

If you want to generate charts on the server only and embed them in PDFs, perhaps you should consider a tool specialized in that like the Telerik Reporting. Perhaps the following topic can be a good starting point: http://www.telerik.com/help/reporting/charttypes.html.

All that being said, the HtmlChart engine (which is actually the Kendo Chart widget) is designed to operate on the client-side, with JavaScript. Thus, there is no generic approach that can be built-in for it to work on the server.

I hope this answers your question.

Regards,

Marin Bratanov
Telerik

[Dylan Nicholson]

Can the Telerik Reporting library generate SVG? All we really need is a server-side library that can spit out SVG for pie charts, bar charts, line charts and a simple gauge. The rest of the report is already fine.

We tried to replace the existing RadChart with HtmlRadChart but it seems the latter needs an ASPX form to render on to, which we don't have when generating reports for email etc.

 

[Marin Bratanov]

Hello,

We do not have a server-side engine that can generate SVG. This is why I suggested looking into tools that can fire up the aspx page in a browser on the server so you can get that SVG.

Regards,

Marin Bratanov
Telerik

[Dylan Nicholson]

Ok, we've resigned ourselves to having to use phantomjs, but we do want the ability to generate the necessary HTML/js without having to be rendering an ASP.NET form. I.e. to just create a RadHtmlControl on the fly and call Render(...). But we need to avoid the references to WebResource.axd that are currently generated when we put one of these on a page. Is that possible/supported?

Thanks

Dylan

[Dylan Nicholson]

BTW it looks like if we use the kendo charting library, which is entirely client side, we wouldn't need an ASP.NET page to put a control on...but is there a server-side type-safe C# library that can help with configuring the chart output? Even if it's just a few classes that can be serialized to JSON.

 

[Marin Bratanov]

Hi Dylan,

I have been trying to explain that you cannot Render() RadHtmlChart on the server. It renders entirely on the client (i.e., in the browser, with JavaScript).

The same goes for the Kendo Chart widget. Both are actually the same - RadHtmlChart serializes a JSON literal that is used for configuring a Kendo Chart widget on the client.

Thus, whether you will use a WebForm with RadHtmlChart or a plain html page with a Kendo Chart does not matter. In all cases you will need to provide it with data and settings, and render it in a browser.

You can avoid the webresource requests by using the CDN we provide: http://docs.telerik.com/devtools/aspnet-ajax/controls/scriptmanager/cdn-support/overview.

Regards,

Marin Bratanov
Telerik

[Dylan Nicholson]

I understand you can't render the SVG (or other graphical format) on the server, but I was hoping you could at least "render" the HTML/JavaScript without needing an ASP.NET page request.

But it seems this is not possible - if you call RadHtmlControl.RenderControl( ) without having an active "Page" request it throws an error saying Page cannot be null.

So at this stage we'd prefer to use the Kendo one, but has anyone created C# classes that mirror the JavaScript chart definition object, so we can construct it server side and serialize to JSON? (the result of which will be sent to PhantomJS).

 

[Dylan Nicholson]

BTW it seems these wrappers do exist - I've seen examples of them being used in Mvc apps. But I can't work out how to use them in library code that could be running anywhere (including from a console app, or a unit test driver).

i.e. I want to be able to do something like:

string html = Html.Kendo().Chart<InternetUsers>().Name("internetUsersChart").DataSource(dataSource => dataSource .Read(read => read.Action("InternetUsers_Read", "Home")).Series(series => { series.Bar(d => d.Value).Name("United States");}).CategoryAxis(axis => axis .Categories(model => model.Year));

And have it generate the necessary Html/Javascript to render the chart.

 

[Dylan Nicholson]

We got the MVC wrappers working even outside a web application, so it looks we have a workable solution, even if it does mean calling phantomjs.