Add title to chart on export

6 posts, 1 answers
  1. James
    James avatar
    20 posts
    Member since:
    Feb 2015

    Posted 02 Sep Link to this post

    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!

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 06 Sep Link to this post

    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
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. James
    James avatar
    20 posts
    Member since:
    Feb 2015

    Posted 06 Sep in reply to Veselin Tsvetanov Link to this post

    Thanks, Veselin! 
  5. James
    James avatar
    20 posts
    Member since:
    Feb 2015

    Posted 06 Sep in reply to Veselin Tsvetanov Link to this post

    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?
  6. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 08 Sep Link to this post

    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
    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
  7. James
    James avatar
    20 posts
    Member since:
    Feb 2015

    Posted 08 Sep in reply to Veselin Tsvetanov Link to this post

    That did the trick. Thanks for the quick response!
Back to Top
UI for ASP.NET MVC is VS 2017 Ready