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,
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
I believe you use either Chrome or Firefox to run the attached sample. I notice that images are not always rendered on these browsers, while there is no issue with IE11 and Edge.
I have investigated your issue, and I have asked our engineering staff to examine this further. To ensure that it will receive attention, I have logged this behavior in our internal tracking system with a Development ID of 252785. This will be assigned to a developer in a future sprint to review my investigation and confirm my findings or to offer a fix, or other resolution. I’ve created a case for you CAS-195337-M1G8D8 and will update you for the progress of this issue via the mentioned case. You could reach your case following the link below:www.infragistics.com/.../support-activityPlease let me know if you need more information.
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"; } }
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?
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