Create High Resolution Charts with Flot on Retina Displays

Question

I want to show a simple diagram in my web application, but using Flot on an Apple device with a Retina display looks blurry.

I use the settings for the "normal" view:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

and this container for the fleet:

<div id="placeholder" style="width: 300px;height:400px;"></div>

This is what I get:

Thus, by default, Flot does not use window.devicePixelRatio , so I would like to help with some kind of custom code:

 var newWidth = $(chart.getCanvas()).attr("width") * window.devicePixelRatio; var newHeight = $(chart.getCanvas()).attr("height") * window.devicePixelRatio; $(chart.getCanvas()).attr("width", newWidth); $(chart.getCanvas()).attr("height", newHeight); chart.setupGrid(); chart.draw(); 

This actually resizes the canvas, and they save that path even after painting. On the iPhone 4S, he tells me that the canvas size is now 600 * 800 (after the picture), but it still doesn't look crisp.