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
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
Looked at the code and all made sense...
But just now tried the code and the images are not displayed (chrome)
render function is called, but nothing on canvas
Are there any errors in the console of the browser? If yes, maybe they are related.
If no, check the network traffic in the browser (using the developer tools), is the request made for the image? If yes, what is the response from the server?
found that this worked, however I did have to add the initial check because the render function was being called twice? with a different yPosition?
markerTemplate: { render: function(renderInfo) { if (renderInfo.yPosition > 80) return; var img = new Image(); img.xPosition = renderInfo.xPosition; img.yPosition = renderInfo.yPosition; img.addEventListener('load', function(evt) { var ctx = renderInfo.context; ctx.drawImage(this, this.xPosition - 30, this.yPosition - 25, 70, 70); }, false); img.src = "./ignite-white.png"; } }
After the investigation, there is a problem in the previous sample. In the sample, image object is created in the render function. But the image might not be loaded in time to be rendered into the canvas. Instead, listen to the load timing of the image and initialize igDataChart when the image is loaded. Please refer to the modified sample.
If you have any question with this, please let me know.
updated sample.zip