Dygraphs - highlighting only working on first graph

We're diving into Dygraphs and encountering some odd issues. We're essentially attempting to copy http://dygraphs.com/gallery/#g/highlighted-series; however, highlighting only works on one of the graphs. Additionally, when mousing over data points on other graphs, we see an error in Chrome's console: "Uncaught TypeError: undefined is not a function." Attempting to dive into the Dygraphs source hasn't been fruitful, as we only have the minified version and haven't experimented with the "source" version. Has anyone encountered similar issues? If so, how did you solve it?

To provide some additional context, we're working with decently sized data: 450+ lines and about ~500 data points per line. The goal of these graphs is to see outliers.

On Firefox, the data doesn't even show up, but the significant majority of our users are on Chrome, so we're not terribly worried about that.

Any additional feedback is welcome in comments :)

<html>
<head>

</head>
<body>
<style type='text/css'>

.graphdiv2 .dygraph-legend > span { display: none; }
.graphdiv2 .dygraph-legend > span.highlight { display: inline; }

.graphdiv2 {width:40% ; height: 40%;}

</style>

<p id="debug"></p>
<div id="graphdiv2"></div>
<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/*
<link rel="stylesheet" type="text/css" href="graphs.css">
*/
  $("#debug").text("Loading...");

var makeGraph = function(col_name) {
  var div = document.createElement('div');
  div.className = "graphdiv2 "+col_name;
  div.style.display = 'inline-block';
  div.style.margin = '4px';
  gs = [];
  var blockRedraw = false;

  $("#graphdiv2").append(div);
  $.ajax({
    dataType: "json",
    url: "data.php",
    data:{ col_name: col_name, realm_id: 1, hours: 0.5 }
    }).done(function(data) {

    $("#debug").text("Data Loaded. Setting up graph");

    /*var labels = { labels: data["labels"] };*/
    var graph_data = data["data_junk"]
;
    for ( var i = 0; i < graph_data.length; i++) {
      graph_data[i][0] = new Date(graph_data[i][0]);
    }
    gs.push(
    new Dygraph(
      div,
      graph_data, // path to CSV file
      { 
      labels: data["labels"],
      title: col_name,
      ylabel: col_name,
      xlabel: 'date/time',

      showLabelsOnHighlight: true,
      labelsSeparateLines: false,
      showRoller: false,
     /*legend: 'always',*/
      highlightCircleSize: 2,
      strokeWidth: 1,
      strokeBorderWidth: 1,

      highlightSeriesOpts: {
        strokeWidth: 3,
        strokeBorderWidth: 1,
        highlightCircleSize: 5,
        },
      drawCallback: function(me, initial) {
        if (blockRedraw || initial) return;
        blockRedraw = true;
        var range = me.xAxisRange();
        for (var j = 0; j < 4; j++) {
          if (gs[j] == me) continue;
          gs[j].updateOptions( {
            dateWindow: range
          } );
        }
        blockRedraw = false;
      }


      }           // options
    )
    );
  });


};



makeGraph("data1");
makeGraph("data2");
makeGraph("data3");
makeGraph("data4");


</script>
</body>
</html>

Solution

Found the issue.

Our data was being returned as strings instead of integers. Casting them to integers resolved the issue.

Changed

for ( var i = 0; i < graph_data.length; i++) {
  graph_data[i][0] = new Date(graph_data[i][0]);
}

for ( var i = 0; i < graph_data.length; i++) {
  graph_data[i][0] = new Date(graph_data[i][0]);
  for ( var j = 1; j < graph_data[i].length; j++) {
    graph_data[i][j] = parseInt(graph_data[i][j]);
  }
}