title: Javascript: Plotting data from a variable using HighCharts- no data passing
body: <p>For the life of me I can't get this to work.  I have seen a similar post on this, but it didn't really explain what the solution was.  I'm taking data from an Access Database using the file called AccessDB.js which you can find online.  Based on some conversations I had with someone at HighCharts, I needed to parse the data from my SQL query result into a specific format, so I modified the AccessDB.js script to produce essentially the same data that you would put into the HighCharts code to display the data (the form is [[x1,y1],[x2,y2],[x3,y3], [etc]]  The modified code is found after my html.  </p>
  
  <p>In order to make it all work, it needs to be run in IE for the permissions to pass to allow the database file to open.  I'm ok with that.
  I need someone else to see if this works.  I get the result of the query to print out on the screen and I get the chart to appear, but there's no data in it.  Get all the files in order and run it in IE. Make sure the security options are set right or the DB won't load right.  I basically set all the security levels to zero to be sure I didn't miss anything.  I get data through so that's not the problem. The only problem that I can see is the chart is empty.  Any ideas what's wrong?</p>
  
  <p>The database file can be found here:   <a href="http://briantitone.com/files/Database.mdb" rel="nofollow">http://briantitone.com/files/Database.mdb</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;style&gt;
  body {
  font-family:verdana;
  padding:50px 150px;
  }
  h1 {
  font-weight:500;
  text-align:center;
  }
  table.myTable td, table.myTable th {
  border-right:1px solid #000;
  border-bottom:1px solid #000;
  padding:3px;
  }
  table.myTable tr:first-child td, table.myTable tr:first-child th {
  border-top:1px solid #000;
  }
  table.myTable tr td:first-child, table.myTable tr th:first-child {
  border-left:1px solid #000;
  }
  #res {
  border:1px solid darkgray;
  padding:12px;
  min-height:150px;
  max-height:300px;
  overflow:auto;
  }
  &lt;/style&gt;
  
  &lt;head&gt;
  &lt;script type="text/javascript" src="accessdb1.js"&gt;&lt;/script&gt;  
  &lt;script type="text/javascript"               src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/data.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var myDB = new ACCESSdb("DB.mdb", {showErrors:true}); 
  
  $(document).ready(function()
    {   
     $("#run").click(function()
        { 
             var jval = myDB.query($('#query').val(), 
           {HCScat       : true}); //gets json format data
  
          $("#res").html(jval);  //prints the html table to "res      
  
     $('#container').highcharts({
      chart: {
          type: 'scatter'
      },
     series: [{
           data: jval    
     }]
     });
  
  }); //end of click function
  
  }); //end of ready function
  
    &lt;/script&gt;
  &lt;/head&gt;      
  &lt;div id="container" style="min-width: 600px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;      
  &lt;textarea id="query" style="width:365px;height:100px"&gt;
  Select S_pct, Ca_pct from originaldata where s_pct between 5 and 8
  &lt;/textarea&gt;
  
  &lt;input type="button" id="run" value="Run Query" /&gt;
  
  &lt;div id="result"&gt;
  &lt;table id="res"&gt;&lt;/table&gt;
  &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript Code for access database (save as proper js file to run with the rest of the code):</p>
  
  <pre><code>/*
  * ACCESSdb JavaScript Library v0.9.2
  *
  * Joshua Faulkenberry
  * Dual licensed under the MIT and GPL licenses.
  *
  * Date: 2009-03-14
  * Revision: 4
  * Modified for HighChart format data export on 2/19/14 by Brian Titone
  */
  (function() {
  
  //Helper function to handle Date formatting
  window.Date.prototype.format = function(format) {
    if (format == "@") { return this.getTime(); }
    var MONTH_NAMES = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
    var DAY_NAMES = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
    var LZ = function(x) { return (x &lt; 0 || x &gt; 9 ? "" : "0") + x} 
    var date = this;
    format = format + "";
    var result = "";
    var i_format = 0;
    var c = "";
    var token = "";
    var y = date.getYear() + "";
    var M = date.getMonth() + 1;
    var d = date.getDate();
    var E = date.getDay();
    var H = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
    var yyyy, yy, MMM, MM, dd, hh, h, mm, ss, ampm, HH, H, KK, K, kk, k;
    // Convert real date parts into formatted versions
    var value = new Object();
    if (y.length &lt; 4) {
       y = "" + (y - 0 + 1900);
    }
    value["y"] = "" + y;
    value["yyyy"] = y;
    value["yy"] = y.substring(2, 4);
    value["M"] = M;
    value["MM"] = LZ(M);
    value["MMM"] = MONTH_NAMES[M - 1];
    value["NNN"] = MONTH_NAMES[M + 11];
    value["d"] = d;
    value["dd"] = LZ(d);
    value["E"] = DAY_NAMES[E + 7];
    value["EE"] = DAY_NAMES[E];
    value["H"] = H;
    value["HH"] = LZ(H);
    if (H == 0) {
       value["h"] = 12;
    }
    else if (H &gt; 12) {
       value["h"] = H - 12;
    }
    else {
       value["h"] = H;
    }
    value["hh"] = LZ(value["h"]);
    if (H &gt; 11) {
       value["K"] = H - 12;
    }
    else {
       value["K"] = H;
    }
    value["k"] = H + 1;
    value["KK"] = LZ(value["K"]);
    value["kk"] = LZ(value["k"]);
    if (H &gt; 11) {
       value["a"] = "PM";
    }
    else {
       value["a"] = "AM";
    }
    value["m"] = m;
    value["mm"] = LZ(m);
    value["s"] = s;
    value["ss"] = LZ(s);
    while (i_format &lt; format.length) {
       c = format.charAt(i_format);
       token = "";
       while ((format.charAt(i_format) == c) &amp;&amp; (i_format &lt; format.length)) {
          token += format.charAt(i_format++);
       }
       if (value[token] != null) {
          result = result + value[token];
       }
       else {
          result = result + token;
       }
    }
    return result;
   }
  
  
   ACCESSdb = function(dataSrc, options) {
    this.options = options || {};
    this.options.showErrors = this.options.showErrors || false;
    this.options.adOpenDynamic = this.options.adOpenDynamic || 2;
    this.options.adLockOptimistic = this.options.adLockOptimistic || 3;
    this.options.persist = this.options.persist || false;
   this.options.user = this.options.user || "";
   this.options.password = this.options.password || "";
   this.options.wrkgrpFile = "Jet OLEDB:System Database="+this.options.wrkgrpFile+";" || "";
    this.dataSource = dataSrc;
    this.provider = "Microsoft.Jet.OLEDB.4.0";
    this.conn = new ActiveXObject("ADODB.Connection");
  
    this.query = function(query, options) {
       if (!options) {
          options = {};
       }
       var result = true;
       var rs = new ActiveXObject("ADODB.Recordset");
       try {
          rs.open(query, this.conn, this.options.adOpenDynamic, this.options.adLockOptimistic);
       } 
       catch (e) {
          if (this.options.showErrors) {
             alert("Query " + e.name + "\n\n" + e.description);
          }
          if (options.errorHandler) {
             options.errorHandler(e);
          }
          result = false;
       }
       if (rs.Fields.Count) {
          if (!rs.bof &amp;&amp; !rs.eof) {
             if (options.json) {
                result = this.outJSON(rs);
             }
          else if (options.HCScat) {
             result = this.outHC(rs);
          }
             else if (options.xml) {
                result = this.outXML(rs, options.xml);
             }
             else if (options.table) {
                result = this.outTable(rs, options.table);
             }
             else {
                result = eval("(" + this.outJSON(rs) + ")");
             }
          }
          else {
             result = false;
          }
          rs.close();
       }
     else {
       result = false;
     }
       return result;
    };
  
    this.insert = function(table, data, options) {
       if (!options) {
          options = {};
       }
       var insList = [];
       var insStr = "INSERT INTO " + table + " (";
       data = this.translate(data);
       if (!data) { return false; }
       for (var key in data[0]) {
          if (key != "ID") {
             insStr += "" + key + ",";
          }
       }
       insStr = insStr.slice(0, insStr.length - 1) + ") VALUES(%%%)\n";
       for (var x = 0, row; row = data[x]; x++) {
          var rowIns = "";
          for (var key in row) {
             if (key != "ID") {
                var val = row[key];
                if (typeof(val) == "number" || typeof(val) == "boolean") {
                   rowIns += val + ",";
                }
                else {
                   val = val.replace(/\"/g, '&amp;#34;');
                   val = val.replace(/\'/g, '&amp;#39;');
                   rowIns += "\"" + val + "\",";
                }
             }
          }
          insList[insList.length] = insStr.replace("%%%", rowIns.slice(0, rowIns.length - 1));
       }
       var noerr = true;
       for (var x = 0, sql; sql = insList[x]; x++) {
          if (!this.query(sql, options)) {
             noerr = false;
             break;
          }
       }
       return noerr;
    };
  
    this.translate = function(data) {
       var tranObj;
       if (typeof(data) == "string") {
          if (data.replace(/^\s*(.*?)\s*$/, "$1").charAt(0) == "&lt;" &amp;&amp; data.replace(/^\s*(.*?)\s*$/, "$1").charAt(data.replace(/^\s*(.*?)\s*$/, "$1").length - 1) == "&gt;") {
             //Should be XML String
             var err = false;
             try {
                varxmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.loadXML(data);
             } 
             catch (e) {
                tranObj = false;
                err = true;
                if (this.options.showErrors) {
                   alert("XML " + e.name + "\n\n" + e.description);
                }
             }
             if (!err) tranObj = this.convertXML(xmlDoc);
          }
          else if (data.replace(/^\s*(.*?)\s*$/, "$1").charAt(0) == "[" &amp;&amp; data.replace(/^\s*(.*?)\s*$/, "$1").charAt(data.replace(/^\s*(.*?)\s*$/, "$1").length - 1) == "]") {
             //Should be JSON String
             try {
                tranObj = eval("(" + data + ")");
             } 
             catch (e) {
                tranObj = false;
                if (this.options.showErrors) {
                   alert("JSON " + e.name + "\n\n" + e.description);
                }
             }
          }
       }
  
  
     else if (typeof(data) == "object") {
          if (data.nodeName) {
             //Should be XML Object
             tranObj = this.convertXML(data);
          }
          else if (data[0]) {
             //Should be JSON Object
             tranObj = data;
          }
       }
       return tranObj;
    };
  
    this.convertXML = function(xmlDoc) {
       var jsObj = [];
       for (var x = 0, row; row = xmlDoc.getElementsByTagName("record")[x]; x++) {
          jsObj[x] = {};
          for (var y = 0, col; col = row.childNodes[y]; y++) {
             jsObj[x][col.nodeName] = col.text;
          }
       }
       return jsObj;
    };
  
    this.outJSON = function(rs) {
       var json = "[";
       rs.MoveFirst();
       while (!rs.eof) {
          json += '{';
          for (var x = 0; x &lt; rs.Fields.Count; x++) {
             json += '"' + rs.Fields(x).Name + '":';
             var val = rs.Fields(x).Value;
             if (typeof(val) == "string") {
                val = val.replace(/\"/g, '&amp;#34;');
                val = val.replace(/\'/g, '&amp;#39;');
                val = '"' + val + '"';
             }
             if (typeof(val) == "date") {
                val = "new Date(\"" + val + "\")";
             }
             json += val + ',';
          }
          json = json.slice(0, json.length - 1);
          rs.MoveNext();
          json += '},';
       }
       json = json.slice(0, json.length - 1);
       json += ']';
       return json;
    };
  
   this.outHC = function(rs) {  //This is a function I made to produce values for Highcharts
       var HCScat = "[";
       rs.MoveFirst();
       while (!rs.eof) {
          HCScat += '[';
          for (var x = 0; x &lt; rs.Fields.Count; x++) {
             //HC += '"' + rs.Fields(x).Name + '":';
             var val = rs.Fields(x).Value;
             if (typeof(val) == "string") {
                val = val.replace(/\"/g, '&amp;#34;');
                val = val.replace(/\'/g, '&amp;#39;');
                val = '"' + val + '"';
             }
             if (typeof(val) == "date") {
                val = "new Date(\"" + val + "\")";
             }
             HCScat += val + ',';
          }
          HCScat = HCScat.slice(0, HCScat.length - 1);
          rs.MoveNext();
          HCScat += '],';
       }
       HCScat = HCScat.slice(0, HCScat.length - 1);
       HCScat += ']';
       return HCScat;
    };
  
    this.outXML = function(rs, options) {
       var xml = "&lt;?xml version=\"1.0\" encoding=\"utf-8\"?&gt;&lt;recordset&gt;";
       rs.MoveFirst();
       while (!rs.eof) {
          xml += '&lt;record&gt;';
          for (var x = 0; x &lt; rs.Fields.Count; x++) {
             var val = rs.Fields(x).Value;
             if (typeof(val) == "string") {
                val = val.replace(/\&amp;/g, '&amp;#38;');
                val = val.replace(/\&lt;/g, '&amp;#60;');
                val = val.replace(/\&gt;/g, '&amp;#62;');
             }
             else if (typeof(val) == "date" &amp;&amp; options.formatDates) {
                if (typeof(options.formatDates) == "string") {
                   val = (new Date((val))).format(options.formatDates);
                }
                else {
                   for (var col in options.formatDates) {
                      if (col == rs.Fields(x).Name) {
                         val = (new Date((val))).format(options.formatDates[col]);
                      }
                   }
                }
             }
             xml += "&lt;" + rs.Fields(x).Name + "&gt;" + val + "&lt;/" + rs.Fields(x).Name + "&gt;";
          }
          xml += '&lt;/record&gt;';
          rs.MoveNext();
       }
       xml += '&lt;/recordset&gt;';
  
       if (!options.stringOut) {
          var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
          xmlDoc.async = "false";
          xmlDoc.loadXML(xml);
          xml = xmlDoc;
       }
       return xml;
    };
  
    this.outTable = function(rs, options) {
       var tbl = document.createElement("table");
       tbl.cellPadding = 0;
       tbl.cellSpacing = 0;
       var tbody = document.createElement("tbody");
       tbl.appendChild(tbody);
       if (options.id) {
          tbl.id = options.id;
       }
       if (options.className) {
          tbl.className = options.className;
       }
       rs.MoveFirst();
       if (!options.noHeaders) {
          var row = document.createElement("tr");
          tbody.appendChild(row);
          for (var x = 0; x &lt; rs.Fields.Count; x++) {
             var hdr = document.createElement("th");
             hdr.innerHTML = rs.Fields(x).Name;
             row.appendChild(hdr);
          }
       }
       while (!rs.eof) {
          var row = document.createElement("tr");
          tbody.appendChild(row);
          for (var x = 0; x &lt; rs.Fields.Count; x++) {
             var val = rs.Fields(x).Value;
             if (typeof(val) == "string") {
                val = val.replace(/\&amp;/g, '&amp;#38;');
                val = val.replace(/\&lt;/g, '&amp;#60;');
                val = val.replace(/\&gt;/g, '&amp;#62;');
             }
             else if (typeof(val) == "date" &amp;&amp; options.formatDates) {
                if (typeof(options.formatDates) == "string") {
                   val = (new Date((val))).format(options.formatDates);
                }
                else {
                   for (var col in options.formatDates) {
                      if (col == rs.Fields(x).Name) {
                         val = (new Date((val))).format(options.formatDates[col]);
                      }
                   }
                }
             }
             var cell = document.createElement("td");
             cell.innerHTML = val;
             row.appendChild(cell);
          }
          rs.MoveNext();
       }
       if (options.stringOut) { return tbl.outerHTML; }
       return tbl;
    };
  
    this.kill = function() {
       this.conn.close();
       delete this;
    };
  
    try {
       this.conn.open("Provider = " + this.provider + ";Data Source = " + this.dataSource + ";"+this.options.wrkgrpFile+"Persist Security Info = " + this.options.persist, this.options.user, this.options.password);
    } 
    catch (e) {
       if (this.options.showErrors) {
          alert("Load DB " + e.name + "\n\n" + e.description);
       }
    }
  };
  
  })();
  </code></pre>