Support for high resolution devices

[khenderick]

Added support for devices with a devicePixelRatio > 1, like all devices with so called "retina" screens. For example, the most recent iPad.

[gwatts]

Are you sure this is the right approach? See http://www.html5rocks.com/en/tutorials/canvas/hidpi/ and http://www.iwalt.com/weblog/2010/08/generating-highresolution-graphics-with-html5s-canvas-element for example

[khenderick]

Well, to all my own canvas controls I made for the project I'm working on, I was indeed working with context.scale(ratio, ratio).

However, if I do exactly the same to sparklines, without the scaling, the sparkline renders 100% crisp, but scaled down with the device's pixel ratio (so the sparkline looks too small). The same effect I get when I comment out the scaling in my own canvas controls. However, as soon as I enable the scaling in my own controls, the scaling is good on all devices, but if I enable the context.scale inside sparklines, (and I'm using the normal line style with light blue fill and blue topline) the fill is drawing scaled up with the device's pixel ratio (so, it's twice too big on the iPad) and the blue topline isn't displaying at all. Additionally, as soon as I hover the mouse over the sparkline, it completely disappears.

I think I somehow miss something in sparklines, but the code above gives at least a more crisp image on the iPad while it's not yet pixel perfect. It might be a start for you to work on?

A snipped of the code I use in my canvas controls:

var draw_width = 480;
var draw_height = 320;
var ratio = window.hasOwnProperty('devicePixelRatio') ? window.devicePixelRatio : 1;
var canvas_element = document.getElementById(id_offset + 'canvas');
canvas_element.style.width = draw_width + 'px';
canvas_element.style.height = draw_height + 'px';
canvas_element.width = draw_width * ratio;
canvas_element.height = draw_height * ratio;
var canvas = $('#' + id_offset + 'canvas');
var context = canvas[0].getContext('2d');
context.scale(ratio, ratio);
context.strokeStyle = background_color;
context.fillStyle = background_color;
context.fillRect(0, 0, draw_width, draw_height);
context.stroke();

[gwatts]

Hrm.. Well, my ideal solution would be to add an svg renderer to complement the canvas & vml renderers.

Had a severe lack of time recently though to work on it :-(

[hartator]

Any update on that?

Will love to use this plugin in our project but I've a retina as a dev. screen and that doesn't look really good...

Anyway thanks for great work!

[introvert]

Any updates on this? Sparklines on retina look awful..

[jfkahn]

+1 to retina viewable sparklines

[avand]

+1 for 👀

[hartator]

+1 <3

[atuttle]

I would very much like to have retina sparkline charts!

I tried retrofitting this into my minified version and the displayed pie charts look great... but the hover effect is off. No matter where I hover, I seem to highlight whichever piece is on the left side of the chart. Seems like the hover-calculations also need to take the ratio into account.

... Unless I did something wrong? :)

[atuttle]

Also worth noting I also tried a slightly lower tech solution: I set my size to 2x what I want and added style="zoom: 50%" to the container. This made it appear high-resolution on retina screens, but the hover effect doesn't work at all, then.