imageDataURL in Angular-Kendo

4 posts, 0 answers
  1. Moshi
    Moshi avatar
    7 posts
    Member since:
    Jul 2020

    Posted 27 Jul Link to this post

    Hi

    I have a screen with multiple charts displayed.

    I need to create a thumbnail image for each chart, to be displayed as a charts panel at the bottom.

    Say every chart is created and creates an image thumbnail to be used at he bottom.

    I saw the imageDataURL option, but I didn't see any option for it with Angular.

    (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/arcgauge/methods/imagedataurl#imagedataurl)

    I'll appreciate any help.

    Thanks.

     

  2. Svetlin
    Admin
    Svetlin avatar
    444 posts

    Posted 29 Jul Link to this post

    Hi Moshi,

    Thank you for the provided referenced link.

    What could be used for the Kendo UI for Angular ArcGauge component is its built - in exportImage() method. Please check the public API of the ArcGauge component for a list of all provided functions:

    https://www.telerik.com/kendo-angular-ui/components/gauges/api/ArcGaugeComponent/#toc-methods

    I hope this helps.

    Regards,
    Svetlin
    Progress Telerik

  3. Moshi
    Moshi avatar
    7 posts
    Member since:
    Jul 2020

    Posted 30 Jul in reply to Svetlin Link to this post

    Thank you Svetlin.

    What I'm looking for is not an option to download as an image, but to get a thumbnail - a tiny copy, 

    to be used on the screen as a representation of the chart.

    I found an option of the method drawImage which deals with canvas, but I can't use it since the chart is 

    not a video/img/canvas etc. (btw - an option of chart as a canvas won't solve it).

    Anyways, that is what I need and I'm afraid the option is not available for Angular Kendo chart...

    Any idea will be appreciated!

  4. Svetlin
    Admin
    Svetlin avatar
    444 posts

    Posted 02 Aug Link to this post

    Hi Moshi,

    Thank you for the provided additional details.

    Indeed, there isn't such method that could be used to achieve the desired behavior out-of-the-box. What could be done as a workaround is to render the chart with a smaller height and width. For the purpose hiding the legend, and its axis labels and series markers would also be recommended so that the small chart looks better. Please check the following example demonstrating such approach:

    https://stackblitz.com/edit/angular-zbsjg8?file=app/app.component.ts

    I hope this helps.

    Regards,
    Svetlin
    Progress Telerik

Back to Top