Synchronise 3 Highcharts Trend Views

Question

I'm looking for some help with syncing 3 line charts similar to this: http://jsfiddle.net/v2t171og/

Here is my code:

https://codepen.io/anon/pen/EerNyO

(function() {
  var files = ["https://code.highcharts.com/stock/highstock.js", "https://code.highcharts.com/highcharts-more.js", "https://code.highcharts.com/highcharts-3d.js", "https://code.highcharts.com/modules/data.js", "https://code.highcharts.com/modules/exporting.js", "https://code.highcharts.com/modules/funnel.js", "https://code.highcharts.com/modules/annotations.js", "https://code.highcharts.com/modules/solid-gauge.js"],
    loaded = 0;
  if (typeof window["HighchartsEditor"] === "undefined") {
    window.HighchartsEditor = {
      ondone: [cl],
      hasWrapped: false,
      hasLoaded: false
    };
    include(files[0]);
  } else {
    if (window.HighchartsEditor.hasLoaded) {
      cl();
    } else {
      window.HighchartsEditor.ondone.push(cl);
    }
  }

  function isScriptAlreadyIncluded(src) {
    var scripts = document.getElementsByTagName("script");
    for (var i = 0; i < scripts.length; i++) {
      if (scripts[i].hasAttribute("src")) {
        if ((scripts[i].getAttribute("src") || "").indexOf(src) >= 0 || (scripts[i].getAttribute("src") === "http://code.highcharts.com/highcharts.js" && src === "https://code.highcharts.com/stock/highstock.js")) {
          return true;
        }
      }
    }
    return false;
  }

  function check() {
    if (loaded === files.length) {
      for (var i = 0; i < window.HighchartsEditor.ondone.length; i++) {
        try {
          window.HighchartsEditor.ondone[i]();
        } catch (e) {
          console.error(e);
        }
      }
      window.HighchartsEditor.hasLoaded = true;
    }
  }

  function include(script) {
    function next() {
      ++loaded;
      if (loaded < files.length) {
        include(files[loaded]);
      }
      check();
    }
    if (isScriptAlreadyIncluded(script)) {
      return next();
    }
    var sc = document.createElement("script");
    sc.src = script;
    sc.type = "text/javascript";
    sc.onload = function() {
      next();
    };
    document.head.appendChild(sc);
  }

  function each(a, fn) {
    if (typeof a.forEach !== "undefined") {
      a.forEach(fn);
    } else {
      for (var i = 0; i < a.length; i++) {
        if (fn) {
          fn(a[i]);
        }
      }
    }
  }
  var inc = {},
    incl = [];
  each(document.querySelectorAll("script"), function(t) {
    inc[t.src.substr(0, t.src.indexOf("?"))] = 1;
  });

  function cl() {
    if (typeof window["Highcharts"] !== "undefined") {
      var options = {
        "chart": {
          "type": "line",
          "height": 220,
          "polar": false
        },
        "rangeSelector": {
          "enabled": false
        },
        "title": {
          "text": ""
        },
        "scrollbar": {
          "enabled": false
        },
        "subtitle": {
          "text": ""
        },
        "series": [{
          "name": "RMS",
          "_colorIndex": 0,
          "_symbolIndex": 0,
          "turboThreshold": 0,
          "marker": {}
        }, {
          "name": "Minimum",
          "_colorIndex": 1,
          "_symbolIndex": 1
        }, {
          "name": "Maximum",
          "_colorIndex": 2,
          "_symbolIndex": 2
        }, {
          "name": "Threshold",
          "_colorIndex": 3,
          "_symbolIndex": 3
        }],
        "data": {
          "csv": "\"Movement\";\"RMS\";\"Minimum\";\"Maximum\";\"Threshold\"\n1;12.87;12;15;14\n2;13.16;12;15;14\n3;12.92;12;15;14\n4;13.14;12;15;14\n5;12.88;12;15;14\n6;13.03;12;15;14\n7;12.76;12;15;14\n8;13.04;12;15;14\n9;12.72;12;15;14\n10;13.2;12;15;14",
          "googleSpreadsheetKey": false,
          "googleSpreadsheetWorksheet": false
        },
        "yAxis": [{
          "title": {}
        }],
        "navigator": {
          "adaptToUpdatedData": true,
          "enabled": false
        },
        "pane": {
          "background": []
        },
        "responsive": {
          "rules": []
        },
        "plotOptions": {
          "series": {
            "animation": false
          }
        }
      };
      new Highcharts.StockChart("highcharts-aaf432a9-4966-4429-b3eb-d35fe01e2924", options);
    }
  }
})();

I've created the graphs but I can't connect them using the highcharts events or hairlines.

Any assistance would be appreciated.

Answer 1

First of all, you should look at the console, you have a few error there, related with the location of the scripts. Next, you need to change highlight method to onMouseOver :

                    $('#container').bind('mousemove touchmove touchstart', function(e) {
                        var chart,
                            point,
                            i,
                            event;

                        for (i = 0; i < Highcharts.charts.length; i++) {
                            chart = Highcharts.charts[i];
                            event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
                            point = chart.series[0].searchPoint(event, true); // Get the hovered point

                            if (point) {
                                point.onMouseOver(e);
                            }
                        }
                    });

API: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver

Live demo: http://jsfiddle.net/BlackLabel/0gmrf64y/