title: Highcharts. Browser compatibility issues
body: <p>I'm currently working on a website that uses Highcharts to display
  some data. I've been testing the different options, retrieving data
  from the server, etc and everything works perfect, but ONLY on chrome.</p>
  
  <p>When testing it on firefox, I can see where the chart is supposed to
  be. I can see the border, title, print/export buttons (all of this
  generated by the plugin itself), but not the data. I used firebug to
  check if it was retrieving the data correctly from the server and
  everything seems to be fine.</p>
  
  <p>On IE6 gets even worse, becouse I can't even see the border, title, etc..</p>
  
  <p>I read somewhere that Highcharts had an issue with line charts and
  jquery 1.7, but I tried with different types of charts and changed my
  jquery version to 1.8. It always works on chrome, but doesn't on
  firefox/IE6</p>
  
  <p>I'm not pasting any code becouse I honestly have no idea where the
  problem is and i'm hoping i'ts just a bug that I can easily solve..
  Thanks in advance</p>
  
  <p>EDIT:</p>
  
  <p>I checked out jsFiddle but I couldn't figure how to make it work without the server side without changing some stuff. Here's some of the code. Hope it can be helpful:</p>
  
  <pre><code>HTML
  
  &lt;html class="gecko  win" xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="en" lang="en-US"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"&gt;
      &lt;title&gt;Portal de Conciliacion SMS Prepago&lt;/title&gt;
      &lt;script type="text/javascript" src="Plantilla/script.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/jquery-1.8.0.min.js"&gt;&lt;/script&gt;  
      &lt;script src="Highcharts/js/highcharts.js"&gt;&lt;/script&gt;
      &lt;script src="Highcharts/js/modules/exporting.js"&gt;&lt;/script&gt;
      &lt;style type="text/css" title="currentStyle"&gt;@import "DataTables/media/css/demo_table.css";&lt;/style&gt;
      &lt;script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.dataTables.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="Plantilla/style.css" type="text/css" media="screen"&gt;
      &lt;!--[if IE 6]&gt;&lt;link rel="stylesheet" href="Plantilla/style.ie6.css" type="text/css" media="screen" /&gt;&lt;![endif]--&gt;
      &lt;!--[if IE 7]&gt;&lt;link rel="stylesheet" href="Plantilla/style.ie7.css" type="text/css" media="screen" /&gt;&lt;![endif]--&gt;   
  &lt;/head&gt;
      &lt;body&gt;
          &lt;div style="overflow: hidden"&gt;  
              &lt;div id="diferencia" style="width: 48%; height: 200px; margin: 0 auto"&gt;&lt;/div&gt;
              &lt;br&gt;
              &lt;br&gt;        
              &lt;div id="ttdm" style="float: left; width: 48%; height: 200px; margin: 0 auto"&gt;&lt;/div&gt;        
              &lt;div id="rtbs" style="float: right; width: 48%; height: 200px; margin: 0 auto"&gt;&lt;/div&gt;   
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>(Im also usign the datatables plugin to show the data in the page. I left that part of the code out but kept the includes in case it might have something to do)</p>
  
  <pre><code>JS
  
  function getUrlVars() {
      var vars = {};
      var parts = window.location.href.replace(/[?&amp;]+([^=&amp;]+)=([^&amp;]*)/gi, function(m,key,value) {
          vars[key] = value;
      });
      return vars;
  }
  
  $(function () {
  
      var fecha = getUrlVars()["fecha"];
      if (fecha) {
          console.log(fecha);
      }
      else {
          fecha = "";
          console.log("NO!!!");
      }
  
      var chart_diferencia;
      var chart_ttdm;
      var chart_rtbs;
  
      $(document).ready(function() {
  
          var options_diff = {
  
              chart: {
                  renderTo: 'diferencia',
                  borderColor: '#000000',
                  borderWidth: 2,
                  margin: [30, 30, 30, 30],
                  type: 'area'
              },
  
              title: {
                  text: 'Diferencia (TTDM vs RTBS)'
              },
  
              xAxis: {
                  type: 'datetime',
                  tickInterval: 3 * 24 * 3600 * 1000,
                  tickWidth: 5,
                  gridLineWidth: 1,
                  labels: {
                      align: 'center',
                      formatter: function() {
                          return Highcharts.dateFormat('%e/%m', this.value);
                      }
                  }           
              },
  
              yAxis: [{
                  title: {
                      text: null
                  },
                  labels: {
                      align: 'center',
                      x: -12,
                      formatter: function() {
                          return Highcharts.numberFormat(this.value/1000, 0) + 'K';
                      }
                  },
                  showFirstLabel: false,
              }],
  
              legend: {
                  enabled: false,
              },
  
              tooltip: {
                  shared: true,
                  crosshairs: true,               
              },
  
              series: [{
                  name: 'Diferencia',
                  color: '#FF8C00',
                  lineWidth: 2,
                  marker: {
                      radius: 3
                  }
              }]
          };
  
          var options_ttdm = {
  
              chart: {
                  renderTo: 'ttdm',
                  borderColor: '#000000',
                  borderWidth: 2,
                  margin: [30, 30, 30, 30],
                  type: 'area'
              },
  
              title: {
                  text: 'TTDM (cursado)'
              },
  
              xAxis: {
                  type: 'datetime',
                  tickInterval: 3 * 24 * 3600 * 1000,
                  tickWidth: 5,
                  gridLineWidth: 1,
                  labels: {
                      align: 'center',
                      formatter: function() {
                          return Highcharts.dateFormat('%e/%m', this.value);
                      }
                  }           
              },
  
              yAxis: [{
                  title: {
                      text: null
                  },
                  labels: {
                      align: 'center',
                      x: -12,
                      formatter: function() {
                          return Highcharts.numberFormat(this.value/1000000, 0) + 'M';
                      }
                  },
                  showFirstLabel: false,
              }],
  
              legend: {
                  enabled: false,
              },
  
              tooltip: {
                  shared: true,
                  crosshairs: true,               
              },
  
              series: [{
                  name: 'TTDM',
                  lineWidth: 2,
                  marker: {
                      radius: 3
                  }
              }]
          };
  
          var options_rtbs = {
  
              chart: {
                  renderTo: 'rtbs',
                  borderColor: '#000000',
                  borderWidth: 2,
                  margin: [30, 30, 30, 30],
                  type: 'area'
              },
  
              title: {
                  text: 'RTBS (facturado)'
              },
  
              xAxis: {
                  type: 'datetime',
                  tickInterval: 3 * 24 * 3600 * 1000,
                  tickWidth: 5,
                  gridLineWidth: 1,
                  labels: {
                      align: 'center',
                      formatter: function() {
                          return Highcharts.dateFormat('%e/%m', this.value);
                      }
                  }           
              },
  
              yAxis: [{
                  title: {
                      text: null
                  },
                  labels: {
                      align: 'center',
                      x: -12,
                      formatter: function() {
                          return Highcharts.numberFormat(this.value/1000000, 0) + 'M';
                      }
                  },
                  showFirstLabel: false,
              }],
  
              legend: {
                  enabled: false,
              },
  
              tooltip: {
                  shared: true,
                  crosshairs: true,               
              },
  
              series: [{
                  name: 'RTBS',
                  color: '#8B0000',
                  lineWidth: 2,
                  marker: {
                      radius: 3
                  }
              }]
          };
  
  
          // Load data asynchronously using jQuery. On success, add the data
          // to the options and initiate the chart.
          // This data is obtained by exporting a GA custom report to TSV.
          // http://api.jquery.com/jQuery.get/
          jQuery.get('Solicitudes/concil_TTDMvsRTBS.php', null, function(tsv, state, xhr) {
              var lines = [],
                  listen = false,
                  date,
  
                  // set up the two data series
                  diferencia = [],
                  ttdm = [],
                  rtbs = [];
  
              // inconsistency
              if (typeof tsv !== 'string') {
                  tsv = xhr.responseText;
              }
  
              // split the data return into lines and parse them
              tsv = tsv.split(/\n/g);
              jQuery.each(tsv, function(i, line) {
  
  
  
                  listen = true;
                  //console.log(line);
  
                  // all data lines start with a double quote
                  if (line != "") {
  
  
                      line = line.split(',');
  
                      //console.log(line);
  
  
  
                      date = Date.parse(line[0] +' UTC');
  
                      diferencia.push([
                          date,
                          parseInt(line[1].replace(',', ''), 10)
                      ]);
                      ttdm.push([
                          date,
                          parseInt(line[2].replace(',', ''), 10)
                      ]);
                      rtbs.push([
                          date,
                          parseInt(line[3].replace(',', ''), 10)
                      ]);
                  }
              });
  
              //console.log(allVisits);
              diferencia.reverse();
              ttdm.reverse();
              rtbs.reverse();
  
  
              options_diff.series[0].data = diferencia;
              options_ttdm.series[0].data = ttdm;
              options_rtbs.series[0].data = rtbs;
              //options.series[1].data = newVisitors;
  
              //console.log(allVisits);
              //console.log(newVisitors);
  
  
              Highcharts.setOptions({ 
                  lang: { 
                      weekdays: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado']
                  } 
              }); 
              Highcharts.setOptions({ 
                  lang: { 
                      months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre']
                  } 
              }); 
              chart_diferencia = new Highcharts.Chart(options_diff);
              chart_ttdm = new Highcharts.Chart(options_ttdm);
              chart_rtbs = new Highcharts.Chart(options_rtbs);
  
              console.log("LISTO!");
          });
  
          $('#example').dataTable( {
              "sScrollY": "200px",
              "bPaginate": false,
              "bInfo": false,
              "bFilter": false,
              "bAutoWidth": true
          });
      });
  
  });
  </code></pre>
  
  <p>It's kind of long becouse I set up the options for three different graphics. The get part is a little bit messy becouse I got there by modifiying the example that comes with the plugin, but I have checked on both debbuging consoles (firebug and chrome) and the data is beign received exactly the same on both.</p>
  
  <p>I read on highcharts support forum that stray commas in the charts options could be the reason it doesn't work on IE6, gotta check tomorrow at work. But as i mentioned earlier, on firefox i can see the background, title, print/export buttons, but none of the data..</p>
  
  <p>The highchart version is 2.2.5. I dowloaded the 2.3 but havent tried it yet. First thing tomorrow morning.</p>
  
  <p>Thanks for any help!</p>