StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy are symbols rendered three times in a flot graphic?
text
Body
copied!<p>I am using the flot library to render a plot where PNG images are rendered as points. It's working, but each PNG image seems to be rendered three times. This is visible on a refresh (the overlap isn't perfect), and I also logged the image's onload function and Firebug tells me that it is being called three times for each graphic. Here is the function that renders the images (counter is the logging variable):</p> <pre><code>function generateImageFunction (image) { return function getImage(ctx, x, y, radius, shadow) { var img = new Image(); img.onload = function() { console.log(counter++); ctx.drawImage(img, x, y, img.width, img.height); } img.src = image; } } </code></pre> <p>data has 13 series, these are just the first two as an example:</p> <pre><code>var data = [ { data: [[1, 1]], points: { symbol: generateImageFunction("face-angel.png") } } { data: [[2, 2]], points: { symbol: generateImageFunction("face-angry.png") } } ]; </code></pre> <p>My options are these:</p> <pre><code>var options = { series: { points: { show: true }, }, xaxis: { min: 0, max: 15}, yaxis: { show: false, min: 0, max: 15 }, selection: { mode: "x" } }; </code></pre> <p>And then I do <code>$.plot($("#placeholder"), data, options);</code></p> <p>With the 13 data series, the counter variable goes to 39 when I first load the page. If I zoom in on a region with only one data point, the counter is increased by 3. Can anyone tell me why this is happening, or what can I do investigate further?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload