HIDPI/Retina Plot Drawing?

Question

I have seen 3 tickets on bitbucket asking about this over the last year but have never seen a definitive answer.

One of those tickets gave some code, but I'm at a loss as to where that code belongs.

var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
        ctx.mozBackingStorePixelRatio ||
        ctx.msBackingStorePixelRatio ||
        ctx.oBackingStorePixelRatio ||
        ctx.backingStorePixelRatio || 1;

ratio = devicePixelRatio / backingStoreRatio;
if (devicePixelRatio !== backingStoreRatio) {
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;
this.canvasOrigWidth = oldWidth;
this.canvasOrigHeight = oldHeight;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;

canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';

// now scale the context to counter
// the fact that we've manually scaled
// our canvas element
ctx.scale(ratio, ratio);
}

How do you get JQPlot to output high resolution graphs?

Edit 1 The above code seems to have come from this website.

score 6 · Accepted Answer · answered Nov 26 '13 at 21:26

6

I figured it out based on the examples linked to in the question.

Replace

this.initCanvas = function(canvas) {
    if ($.jqplot.use_excanvas) {
        return window.G_vmlCanvasManager.initElement(canvas);
    }
    return canvas;
}

With

this.initCanvas = function(canvas) {
    if ($.jqplot.use_excanvas) {
        return window.G_vmlCanvasManager.initElement(canvas);
    }

    var cctx = canvas.getContext('2d');

    var canvasBackingScale = 1;
    if (window.devicePixelRatio > 1 && (cctx.webkitBackingStorePixelRatio === undefined || 
                                                cctx.webkitBackingStorePixelRatio < 2)) {
            canvasBackingScale = window.devicePixelRatio;
    }
    var oldWidth = canvas.width;
    var oldHeight = canvas.height;

    canvas.width = canvasBackingScale * canvas.width;
    canvas.height = canvasBackingScale * canvas.height;
    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';
    cctx.save();

    cctx.scale(canvasBackingScale, canvasBackingScale);

    return canvas;
};

That method can be found around line 290 in jquery.jqplot.js.

Then if you do not have a HIDPI or Retina display but do have a Mac you can use Quartz Debug and System Pref/Displays to simulate a HIDPI resolution for testing. Here is a composite screenshot showing normal graphing and the same graph with the replacement code. JQPlot Retina Comparison

answered Nov 26 '13 at 21:26

Andrew

2,690
23
27

Thanks for sharing, appreciated! – Teson Nov 26 '13 at 22:08
Just tested it out and it works great for me. Thanks a bunch! – TWilly Nov 26 '13 at 22:55
@Andrew, sadly this seems to break pie charts :( – halfdan Dec 19 '13 at 15:27
1

@halfdan, I don't currently use pie charts, but I'll give it a test when I have some time. In the meantime, any insights would be useful. – Andrew Dec 19 '13 at 16:48
1

@Andrew, sorry for the late reply - you can even see this live: http://demo.piwik.org/index.php?module=CoreHome&action=index&idSite=7&period=day&date=yesterday#module=UserSettings&action=index&idSite=7&period=day&date=yesterday - The "Browser Families" widget of Piwik is showing up incredibly huge. – halfdan Jan 26 '14 at 20:59
1

The followup fix for pie charts can be found [here](https://github.com/wedgeV/piwik/commit/f1c72b03704da41e5016d42e0e2c10b51a03b216) – Adam Paxton May 25 '14 at 23:24
@Adam, Where is the fix for pie charts? The link is broken. Version 1.0.9 is still rendering pie charts too large when canvasBackingScale is not 1. – bu11d0zer Dec 07 '17 at 22:30

HIDPI/Retina Plot Drawing?

1 Answers1