Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
David
945
Images placed at data points
posted

Want to combine a line graph on a igDataChart with evenly intervaled dataset which I would like to show related image of the data point.

I assume that I could have a tooltip showing the image, but would prefer showing upto a dozen(12) images at a time. Sort of a Timeline concept but combined with a graph....

look a lot like this but work together 

 

Parents
No Data
Reply
  • 530
    Verified Answer
    Offline posted

    Hello David,

    You could use scatter series of igDataChart, and replace data point with corresponding image. You can use markerTemplate option of scatter series, and can assign your image to each data point in render function.

    $(selector).igDataChart({
    ...
    series: [{
        name: "scatter",
        type: "scatter",
        ...
        markerTemplate: {
            render: function (renderInfo) {
                var img = new Image();
                img.src = "http://users.infragistics.com/ignite/ignite-white.png";
                var ctx = renderInfo.context;
                ctx.drawImage(img, renderInfo.xPosition - 30, renderInfo.yPosition - 25, 70, 70);
            }
        }
    }],
});

    https://www.igniteui.com/help/api/2017.2/ui.igDataChart#options:series.markerTemplate

    The attached sample contains the above code and you can use it as a reference. If you have any question with this, please let me know.

    igDataChart_Scatter.zip

Children