Show custom images with ScatterLineSeries

[Auvo]

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

 

[Vessy]

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

[Jayaraman]

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

[Vessy]

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