Add title to chart on export

[James]

Currently, we have a chart situated within an ASP.NET MVC view without a title. When a user clicks an export button on the view, the chart is successfully created, however, business owners require the tile in the exported image. Is there any way to add a title to the chart prior to exporting it, or add one to the MVC chart and not display it in the view, just in the export?  I've tried the following without success:

$("#btnExport").on("click", function () {
    var titleVal = $(this).data("name"); // this should be the exported chart title
    var chart = $("#myChart").getKendoChart();

    chart.options.title = titleVal;
    //chart.options.Title = titleVal;
    chart.exportImage().done(function (data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "MyChart.png",
            proxyURL: '@Url.Action("Export_Save", "MyController")'
        });
    });
});

 

Any help or guidance would be greatly appreciated!

[Veselin Tsvetanov]

Hello James,

I would suggest you to specify the Chart tile on its initialization, but set it to be invisible (.Visible(false)):

@(Html.Kendo().Chart()
    .Name("chart")
    .Title(t => t.Text("Title").Visible(false))

Then in the click handler you could make the title visible just for exporting and set it again to be invisible after the export has been performed:

$("#btnExport").on("click", function () {
    var chart = $("#myChart").getKendoChart();

    var currentOptions = chart.options;
    currentOptions.title.visible = true;
    chart.setOptions(currentOptions);

    chart.exportImage().done(function (data) {
    currentOptions.title.visible = false;
        chart.setOptions(currentOptions);

    kendo.saveAs({
            dataURI: data,
            fileName: "MyChart.png",
            proxyURL: '@Url.Action("Export_Save", "MyController")'
        });
    });
});

Simple implementation of the above could be found in the following Dojo.

Regards,
Veselin Tsvetanov
Telerik by Progress

[James]

Thanks, Veselin! 

[James]

Both locally and in the Dojo example you posted, the data points and chart lines are no longer visible within the export, although the title is now visible in the export as requested. Any thoughts as to why the data are not displayed within the chart on export?

[Veselin Tsvetanov]

Hi James,

Sorry for the incomplete suggestion. As the Chart has some transitions applied, in the moment, in which it is exported, the data is still not visualized (that is the beginning of the animation). Therefore, you will have to turn off transitions, before exporting and turn them on immediately after that:

$(".export-img").click(function() {
    var chart = $("#chart").getKendoChart();
    var currentOptions = chart.options;
    currentOptions.title.visible = true;
    currentOptions.transitions = false;
    chart.setOptions(currentOptions);

    chart.exportImage().done(function(data) {
        currentOptions.title.visible = false;
        currentOptions.transitions = true;
        chart.setOptions(currentOptions);

        kendo.saveAs({
            dataURI: data,
            fileName: "chart.png",
            proxyURL: "//demos.telerik.com/kendo-ui/service/export"
        });
    });
});

And the modified Dojo here.

Regards,
Veselin Tsvetanov
Telerik by Progress

[James]

That did the trick. Thanks for the quick response!