Show custom images with ScatterLineSeries

4 posts, 0 answers
  1. Auvo
    Auvo avatar
    34 posts
    Member since:
    Jul 2011

    Posted 08 Sep Link to this post

    Hi

    is it possible to show custom images / image files in the chart, over the scatterlineseries?

     

    If possible, could you provide some examples

     

    Regards,

    Auvo

     

  2. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 13 Sep Link to this post

    Hi Auvo,

    I am not quite sure whether I understand the exact scenario you want to achieve properly.

    If you want to set a background image to the whole chart, you can do it by setting such to its element like follows:
    div.RadHtmlChart {
        background-image: url("image.jpg");
    }

    In case you want to add custom image to the markers of the ScatterLine series, you can achieve it by utilizing the RadHtmlChart's markers Visual functionality like demonstrated here:
    http://demos.telerik.com/kendo-ui/line-charts/visuals

    In a RadHtmlChart scenario, the configuration should be similar to:
    <telerik:RadHtmlChart runat="server" ID="ScatterChart1" Width="800px">
        <PlotArea>
            <Series>
                <telerik:ScatterSeries Name="Applicance 1">
                    <MarkersAppearance Visual="markersVisual" Size="30" />
                    <SeriesItems>
                        <telerik:ScatterSeriesItem X="82" Y="15" />
                        <telerik:ScatterSeriesItem X="79" Y="13" />
                        <telerik:ScatterSeriesItem X="77" Y="10" />
                        <telerik:ScatterSeriesItem X="74" Y="7" />
                    </SeriesItems>
                </telerik:ScatterSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    <script>
        function markersVisual(e) {
            var src = "./icons/sampleIcon.png";
            var image = new kendo.drawing.Image(src, e.rect);
            return image;
        }
    </script>

    I hope this helps.

    Regards,
    Vessy
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jayaraman
    Jayaraman avatar
    1 posts
    Member since:
    Feb 2015

    Posted 19 Sep in reply to Vessy Link to this post

    Hi, We have a similar requirement. But can not use Kendo. Need to display an image from a set of a few images (max 20) based on Y Value range? Is it possible to do without using Kendo, by customising Label. If so could you give an example?

     

    Thanks,

    Jay

  5. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 22 Sep Link to this post

    Hi Jayaraman,

    RadHtmlChart for ASP.NET AJAX is a serer-side wrapper for the kendo UI widget, this is why you can use the Kendo UI chart API without referencing any additional scripts. Currently the desired by you functionality can be achieved only client-side, in the way demonstrated in my previous reply.

    Regards,
    Vessy
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top