Note that there are some explanatory texts on larger screens.

plurals
  1. POFlot fails to render charts on certain browsers
    text
    copied!<p>I have a simple line chart that contains 2 series, with the x-axis being a date and the y-axis an integer. The code that illustrates this is as follows:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" language="javascript" src="flot/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" language="javascript" src="flot/jquery.flot.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt; #overview-plot24 { width: 94%; margin-left: 20px; height: 220px; } &lt;/style&gt; &lt;script type="text/javascript"&gt; $(function() { var plotOptions = { //Options go here xaxis: { mode: "time", tickLength: 5, reserveSpace: true, autoscaleMargin: 0.01 }, yaxis: { min: 0 }, legend: { show: false }, series: { lineWidth: 1, shadowSize: 0 }, grid: { hoverable: true, clickable: true } }; var plot2 = $.plot( '#overview-plot24', [ { label: "Alerts", color: "#FC8200", data: [ [Date.parse("2013-03-19 15:00"), 9650], [Date.parse("2013-03-19 16:00"), 33124], [Date.parse("2013-03-19 17:00"), 27806], [Date.parse("2013-03-19 18:00"), 24143], [Date.parse("2013-03-19 19:00"), 7573], ]}, { label: "Scores", color: "#8000FF", data: [ [Date.parse("2013-03-19 15:00"), 26407], [Date.parse("2013-03-19 16:00"), 93973], [Date.parse("2013-03-19 17:00"), 77760], [Date.parse("2013-03-19 18:00"), 68715], [Date.parse("2013-03-19 19:00"), 20383], ] } ], plotOptions ); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="overview-plot24"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>This is correctly rendered in Chrome and Opera, but the series fails to be rendered on Safari and Firefox. <img src="https://i.stack.imgur.com/sVgKa.png" alt="Correct rendering">Chrome renders is correctly. <img src="https://i.stack.imgur.com/Pgt6v.png" alt="Bad rendering">Safari and Firefox renders it incorrectly.</p> <p>This is perplexing as the examples on the flot web page render correctly on all browsers and I'm struggling to see where my code differs! </p> <p>For those interested in running the code directly, zip archive containing all you need is <a href="https://dl.dropbox.com/u/21682354/Internet%20Posts/Flot%20Render%20Issue/FlotBadRender.zip" rel="nofollow noreferrer">available</a>.</p>
 

Querying!

 
Guidance

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