How to setup Flot for iOS retina display

Question

I have tested this on an iPad (3 generation). The line chart appears perfectly smooth. http://justindarc.github.com/flot.touch/example/index.html I have tried diffing the code with my flot code and cannot see any significant difference that would cause it to run in retina mode. My flot is version 0.7, same as his code. No matter what I try my own chart runs in non-retina mode. What is the trick in running retina mode? My setup code is rather long. ``` function setup_chart0(setup_options) { var point_data = []; if(setup_options.use_sample_data_for_chart0) { point_data = generate_dummy_data( setup_options.timestamp_generate_min, setup_options.timestamp_generate_max ); } var average_data = henderson23(point_data); var datasets = make_chart0_datasets(point_data, average_data); if(is_dualaxis_detail_mode) { datasets = make_chart0_dual_datasets( [], [], [], [] ); } var options = default_plot_options(); options.xaxis.min = setup_options.timestamp_visible_min; options.xaxis.max = setup_option…

Accepted Answer

I have modified jquery.flot.js like this:

In the top I have added

```
retinaMode = (window.devicePixelRatio > 1),
```

I have extended these functions

```
function makeCanvas(skipPositioning, cls) {
    var c = document.createElement('canvas');
    c.className = cls;
    c.width = canvasWidth;
    c.height = canvasHeight;

if (!skipPositioning)
        $(c).css({ position: 'absolute', left: 0, top: 0 });

$(c).appendTo(placeholder);

if(retinaMode) {
        c.width = canvasWidth * 2;
        c.height = canvasHeight * 2;
        c.style.width = '' + canvasWidth + 'px';
        c.style.height = '' + canvasHeight + 'px';
    }

if (!c.getContext) // excanvas hack
        c = window.G_vmlCanvasManager.initElement(c);

// used for resetting in case we get replotted
    c.getContext("2d").save();

if (retinaMode) {
         c.getContext("2d").scale(2,2);
    }

return c;
}

function getCanvasDimensions() {
    canvasWidth = placeholder.width();
    canvasHeight = placeholder.height();

if (canvasWidth <= 0 || canvasHeight <= 0)
        throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight;
}

function resizeCanvas(c) {
    // resizing should reset the state (excanvas seems to be
    // buggy though)
    if (c.width != canvasWidth) {
        c.width = canvasWidth;
        if(retinaMode) {
            c.width = canvasWidth * 2;
        }
        c.style.width = '' + canvasWidth + 'px';

}

if (c.height != canvasHeight) {
        c.height = canvasHeight;
        if(retinaMode) {
            c.height = canvasHeight * 2;
        }
        c.style.height = '' + canvasHeight + 'px';
    }

// so try to get back to the initial state (even if it's
    // gone now, this should be safe according to the spec)
    var cctx = c.getContext("2d");
    cctx.restore();

// and save again
    cctx.save();

if(retinaMode) {
        cctx.scale(2, 2);
    }
}
```

How to setup Flot for iOS retina display

Solution

Problem