title: Javascript chart only appears when toggling 'developer tools' (F12) in Chrome
body: <p>Similar to <a href="https://stackoverflow.com/questions/24452854/">THIS QUESTION</a>, only with a different charting library (<a href="http://canvasjs.com/" rel="nofollow noreferrer">CanvasJS</a>), and with my code included.</p>
  
  <p>Chart appears only after 'developer tools' has been <strong>toggled</strong> (ie. switch from on-off OR off-on).</p>
  
  <p>Code I'm using:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org"&gt;
  &lt;script type="text/javascript" src="jquery-2.1.3.min.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.canvasjs.min.js"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  var dataPoints = [];
  (function () {
          $.getJSON('boop.little.json',
                  function(thedata) {
                          $.each(thedata, function(i, v) {
                                  dataPoints.push({ x: new Date(v.Datetime), y: parseFloat(v.Value) });
                          });
                  }
          )
  })();
  
  $(function () {
          var options = {
                  data: [{
                          type: "splineArea", //change it to column, spline, line, pie, etc
                          dataPoints: dataPoints
                          }
                  ]
          };
  
          $("#chartContainer").CanvasJSChart(options);
  });
  &lt;/script&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="chartContainer" style="height: 300px; width: 100%;"&gt;&lt;/div&gt;
  &lt;div id="chartContainer2" style="width:100%; height:300px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JSON source:</p>
  
  <pre><code>[
      {
          "Datetime": "01/01/2012 00:00:01",
          "Value": "0.48"
      },
      {
          "Datetime": "01/01/2012 00:10:01",
          "Value": "0.50"
      },
      {
          "Datetime": "01/01/2012 00:20:01",
          "Value": "0.48"
      },
      {
          "Datetime": "01/01/2012 00:30:01",
          "Value": "0.49"
      },
      {
          "Datetime": "01/01/2012 00:40:01",
          "Value": "0.50"
      },
      {
          "Datetime": "01/01/2012 00:50:01",
          "Value": "0.47"
      },
      {
          "Datetime": "01/01/2012 01:00:01",
          "Value": "1.23"
      },
      {
          "Datetime": "01/01/2012 01:10:01",
          "Value": "2.09"
      },
      {
          "Datetime": "01/01/2012 01:20:01",
          "Value": "2.08"
      },
      {
          "Datetime": "01/01/2012 01:30:01",
          "Value": "2.64"
      },
      {
          "Datetime": "01/01/2012 01:40:01",
          "Value": "2.91"
      },
      {
          "Datetime": "01/01/2012 01:50:01",
          "Value": "0.49"
      },
      {
          "Datetime": "01/01/2012 02:00:01",
          "Value": "0.50"
      },
      {
          "Datetime": "01/01/2012 02:10:01",
          "Value": "0.49"
      },
      {
          "Datetime": "01/01/2012 02:20:01",
          "Value": "0.53"
      },
      {
          "Datetime": "01/01/2012 02:30:01",
          "Value": "0.51"
      }
  ]
  </code></pre>
  
  <p>Interestingly (and the reason it appears), removing the line:</p>
  
  <pre><code>&lt;div id="chartContainer2" style="width:100%; height:300px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Stops the chart rendering at all! (even with toggling developer tools).
  Something fishy going on here, can anyone suggest some further debugging?</p>
  
  <p>Cheers,</p>
  
  <p>-Phil</p>
  
  <p>PS. FYI: Nothing displayed in IE9, regardless of F12 toggle (expected IE behaviour?).</p>