title: Highcharts: picking points in one chart and have the same points highlight in other charts
body: <p>I have 9 charts that generate in one container each on a page.  What I want to do is use one chart to choose samples and have them highlighted, list them in a table and simultaneously have them show up in the other 8 charts. I have the part where I can get the table to generate, but I can't get the series to show up in the the charts.  Here's what I have so far:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;title&gt;HighCharts Data Output&lt;/title&gt; 
  &lt;/head&gt;
  &lt;script 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/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.highcharts.com/modules/data.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  $(function () {
  var $report = $('#report'),
      selectedPoints = [];
  
  $('#container1').highcharts({
  chart: {
  type: 'scatter',
  zoomType: 'xy',
  plotBorderColor: 'black',
  plotBorderWidth: 1,
  },
     tooltip: {
     formatter: function() {
     return this.series.name + '&lt;br&gt;&lt;b&gt;X: &lt;/b&gt;'+ Highcharts.numberFormat(this.x, '1',',') +'&lt;b&gt;  Y:&lt;/b&gt;'+ Highcharts.numberFormat(this.y, '1',',') +'&lt;br&gt;&lt;span style="color: ' + this.series.color + '; font-weight:bold;"&gt;' + this.point.samp +'&lt;/span&gt;';
  },
  },
  subtitle: {
  text: 'Data Analysis'
  },
  title: {
  text: 'DataX vs DataY'
  },
  xAxis: {
  minorGridLineColor: '#F0F0F0',
  minorTickInterval: 'auto',
  min: 0.05,
  max: 900,
  title: {
  enabled: true,
  text: 'XData'
  },
   startOnTick: true,
   endOnTick: true,
   showLastLabel: true
   },
  
  yAxis: {
  min: 0.05,
  max: 900,
  title: {
  text: 'YData)' 
  }
  },
  
  plotOptions: {
          series: {
              allowPointSelect: true,
              point: {
                  events: {
                      select: function (event) {
                          var chart = this.series.chart;
  
                          var selectedPointsStr = "";
                          if (event.accumulate) {
                              selectedPoints.push(this);
                          } else {
                              selectedPoints = [this];
                          }
                          // when is the chart object updated? after this function finshes?
                          $.each(selectedPoints, function (i, value) {
                              selectedPointsStr += "&lt;tr&gt;&lt;td&gt;" + value.x  + "&lt;/td&gt;&lt;td&gt; " + value.y + "&lt;/td&gt;&lt;/tr&gt;&lt;br&gt;";
                              //var Plot = eval(selectedPointsStr);
                          });
                          $report.html(selectedPointsStr);
                      }
                  }
              }
          }
      },
  
  series: [{
  
  type: 'line',
  name: '1:1 Line',
  data: [[0, 0], [1000, 1000]],
  marker: {
  enabled: false
  },
  states: {
  hover: {
  lineWidth: 0
  }
  },
  enableMouseTracking: false
  },
  
  {name: 'group1',
  data: [{x:115.9,y:179,samp:'CR13-451D_384.5-386'},{x:37.5,y:188,samp:'CR13-389D_292-293.5'}]
  },
  {name: 'group2',
  data: [{x:27.8,y:64,samp:'CR12-361D_226.5-228'},{x:51.9,y:228,samp:'CR12-369D_428-429.5'}] 
  },
  {name: 'group3',
  data: [{x:27.2,y:863,samp:'CR12-346D_973.5-975'},{x:478.8,y:575,samp:'CR12-348D_1100-1101.5'},{x:39.1,y:598,samp:'CR12-360D_1167.5-1169'}]
  },
  {name: 'group4',
  data: [{x:22.8,y:244,samp:'CR11-149D_333-334.5'},{x:25.3,y:224,samp:'CR11-149D_346.5-348'},{x:34.4,y:128,samp:'CR11-196D_130.5-132'},{x:198.4,y:31,samp:'CR11-197D_271.5-273'},{x:0.9,y:14,samp:'CR11-204D_127.5-129'},{x:9.1,y:223,samp:'CR11-224D_207-208.5'},{x:0.05,y:288,samp:'CR11-224D_64.5-66'},{x:0.05,y:120,samp:'CR11-228D_14-15.5'},{x:5.6,y:181,samp:'CR11-231D_93-94.5'},{x:95.6,y:0.05,samp:'CR11-246D_90-91.5'},{x:0.05,y:176,samp:'CR11-256D_130.5-132'},{x:13.1,y:133,samp:'CR11-258D_321-322.5'},{x:0.05,y:246,samp:'CR11-260D_90-91.5'},{x:340.9,y:185,samp:'CR11-266D_304.5-306'},{x:0.05,y:143,samp:'CR11-267D_12.5-14'},{x:33.1,y:239,samp:'CR11-267D_135.5-137'},{x:0.05,y:213,samp:'CR11-267D_314-315.5'},{x:180.9,y:23,samp:'CR11-270D_396.5-398'},{x:114.4,y:169,samp:'CR11-272D_301.5-303'},{x:235.9,y:12,samp:'CR11-272D_318-319.5'},{x:118.1,y:103,samp:'CR11-272D_361.5-363'},{x:22.8,y:144,samp:'CR11-274D_285-286.5'},{x:48.8,y:109,samp:'CR11-275D_209-210.5'},{x:28.4,y:185,samp:'CR11-275D_231.5-233'},{x:129.1,y:5,samp:'CR11-275D_365-366.5'},{x:18.8,y:234,samp:'CR11-277D_33-34.5'},{x:0.05,y:165,samp:'CR11-280D_145.5-147'},{x:0.05,y:261,samp:'CR11-280D_15-16.5'},{x:24.1,y:174,samp:'CR11-280D_337.5-339'},{x:15.6,y:66,samp:'CR11-280D_420-421.5'},{x:0.05,y:174,samp:'CR11-284D_217.5-219'},{x:12.2,y:441,samp:'CR11-289D_39.5-41'},{x:107.8,y:240,samp:'CR11-291D_279.5-281'},{x:0.05,y:143,samp:'CR11-297D_118.5-120'},{x:23.8,y:160,samp:'CR11-301D_127.5-129'},{x:0.05,y:321,samp:'CR11-302D_313.5-315'},{x:26.6,y:225,samp:'CR11-309D_135-136.5'},{x:0.05,y:190,samp:'CR11-313D_42-43.5'},{x:48.8,y:180,samp:'CR11-313D_456-457.5'},{x:9.7,y:208,samp:'CR11-318D_73-74.5'},{x:0.6,y:13,samp:'CR11-323D_57-58.5'},{x:12.5,y:174,samp:'CR11-324D_181-182.5'},{x:0.05,y:153,samp:'CR11-324D_244-245.5'},{x:70.3,y:128,samp:'CR11-326D_369.5-371'},{x:4.4,y:181,samp:'CR11-328D_163.5-165'},{x:0.05,y:121,samp:'CR12-340D_476-477.5'},{x:26.6,y:149,samp:'CR12-341D_133.5-135'},{x:5.3,y:194,samp:'CR12-341D_147-148.5'},{x:195,y:73,samp:'CR12-342D_609-610.5'},{x:0.05,y:226,samp:'CR12-342D_66-67.5'},{x:37.8,y:208,samp:'CR12-345D_489-490.5'},{x:50,y:150,samp:'CR12-345D_594-595.5'},{x:37.5,y:239,samp:'CR12-346D_100.5-102'},{x:0.05,y:219,samp:'CR12-346D_21-22.5'},{x:40.6,y:259,samp:'CR12-346D_312-313.5'},{x:22.2,y:208,samp:'CR12-347D_157.5-159'},{x:0.05,y:478,samp:'CR12-348D_11-12.5'},{x:30.9,y:294,samp:'CR12-348D_156.5-158'},{x:42.5,y:238,samp:'CR12-349D_438-439.5'},{x:5.6,y:210,samp:'CR12-355D_529.5-531'},{x:28.1,y:221,samp:'CR12-355D_618-619.5'},{x:72.5,y:108,samp:'CR12-357D_427.5-429'},{x:35,y:258,samp:'CR12-366D_213-214.5'},{x:0.05,y:208,samp:'CR12-369D_36.5-38'},{x:10.3,y:163,samp:'CR12-372D_320-321.5'},{x:2.5,y:195,samp:'CR12-372D_47-48.5'},{x:22.8,y:175,samp:'CR12-374D_109.5-111'},{x:29.1,y:219,samp:'CR12-374D_174-175.5'},{x:42.5,y:203,samp:'CR12-374DB_372-373.5'},{x:30,y:175,samp:'CR12-375D_253.5-255'},{x:63.8,y:150,samp:'CR12-375D_304.5-306'},{x:18.8,y:165,samp:'CR13-377D_374-375.5'},{x:4.7,y:189,samp:'CR13-381D_55.5-57'},{x:72.2,y:163,samp:'CR13-386D_235.5-237'},{x:29.1,y:203,samp:'CR13-390D_159.5-161'},{x:12.2,y:204,samp:'CR13-393D_462-463.5'},{x:22.2,y:173,samp:'CR13-393D_481.5-483'},{x:23.8,y:179,samp:'CR13-394D_617-618.5'},{x:50.6,y:266,samp:'CR13-399D_189.5-191'},{x:7.8,y:245,samp:'CR13-409D_160.5-162'},{x:26.3,y:193,samp:'CR13-416D_506-507.5'},{x:42.5,y:176,samp:'CR13-422D_511.5-513'},{x:23.8,y:221,samp:'CR13-428D_510-511.5'},{x:88.8,y:259,samp:'CR13-432D_195.5-197'},{x:28.8,y:245,samp:'CR13-432D_236-237.5'},{x:7.2,y:158,samp:'CR13-433D_155-156.5'},{x:18.4,y:169,samp:'CR13-433D_228.5-230'},{x:43.8,y:229,samp:'CR13-433DB_303.5-305'},{x:1.9,y:159,samp:'CR13-433DB_488-489.5'},{x:27.2,y:233,samp:'CR13-435D_349.5-351'},{x:37.2,y:203,samp:'CR13-435D_429-430.5'},{x:26.6,y:223,samp:'CR13-438D_331.5-333'},{x:65.3,y:161,samp:'CR13-438D_573-574.5'},{x:365.9,y:79,samp:'CR13-440D_370.5-372'},{x:315.6,y:56,samp:'CR13-440D_382.5-384'},{x:11.9,y:183,samp:'CR13-444D_160.5-162'},{x:29.1,y:213,samp:'CR13-444D_202.5-204'},{x:2.5,y:214,samp:'CR13-447D_127.5-129'},{x:7.8,y:200,samp:'CR13-449D_272-273.5'},{x:17.2,y:266,samp:'CR13-449D_537.5-539'}]
  },
  {name: 'group5',
  data: [{x:238.4,y:80,samp:'CR11-197D_418.5-420'},{x:0.9,y:12,samp:'CR11-226D_148.5-150'},{x:30.3,y:220,samp:'CR11-260D_121.5-123'},{x:45,y:309,samp:'CR11-260D_132-133.5'},{x:42.8,y:238,samp:'CR11-260D_183-184.5'},{x:6.3,y:499,samp:'CR11-282D_5-8'},{x:28.1,y:136,samp:'CR12-340D_279.5-281'},{x:0.05,y:134,samp:'CR12-343D_309-310.5'},{x:221.6,y:175,samp:'CR12-343D_316.5-318'},{x:24.4,y:203,samp:'CR12-347D_351-352.5'},{x:43.8,y:55,samp:'CR12-357D_543-544.5'},{x:29.7,y:259,samp:'CR13-389D_446.5-448'},{x:0.05,y:150,samp:'CR13-391D_116.5-118'},{x:0.05,y:208,samp:'CR13-391DB_115-116.5'},{x:40.6,y:249,samp:'CR13-394D_114.5-116'},{x:34.7,y:229,samp:'CR13-396D_247.5-249'},{x:23.1,y:186,samp:'CR13-414D_196.5-198'},{x:47.2,y:239,samp:'CR13-416D_392-393.5'},{x:81.6,y:54,samp:'CR13-428D_372-373.5'},{x:1.9,y:139,samp:'CR13-429D_583.5-585'},{x:18.4,y:235,samp:'CR13-432D_489.5-491'},{x:47.8,y:166,samp:'CR13-448D_230-231.5'},{x:14.4,y:201,samp:'CR13-451D_332-333.5'}]
  },
  {name: 'group6',
  data: [{x:0.05,y:179,samp:'CR11-260D_112.5-114'},{x:0.05,y:585,samp:'CR11-267D_840.5-842'},{x:0.05,y:608,samp:'CR11-267D_852.5-854'},{x:68.4,y:560,samp:'CR11-300D_759.5-761'},{x:0.05,y:793,samp:'CR11-324D_917.5-919'},{x:39.1,y:525,samp:'CR12-346D_792-793.5'},{x:303.4,y:475,samp:'CR12-349D_865.5-867'},{x:135.9,y:550,samp:'CR12-352D_972-973.5'},{x:80.9,y:265,samp:'CR12-354D_1034-1035.5'}]
  },
  {name: 'group7',
  data: [{x:3.4,y:299,samp:'CR11-294D_0-2'}]
  },
  {type: 'line',
    name: '3:1 Line',
    data: [[0, 0], [1000, 3000]],
    marker: {
    enabled: false
  },
  states: {
   hover: {
     lineWidth: 0 
     }
   },
   enableMouseTracking: false  
  }],
  exporting: {
     sourceWidth: 800,
     sourceHeight: 400,
     chartOptions: {
         subtitle: null
     }
  }
  });
  
  
  $('#container2').highcharts({
  chart: {
  data: {
         table: eval(document.getElementById('report'))
    },
  type: 'scatter',
  zoomType: 'xy',
  plotBorderColor: 'black',
  plotBorderWidth: 1
  },
     tooltip: {
     formatter: function() {
     return this.series.name + '&lt;br&gt;&lt;b&gt;X: &lt;/b&gt;'+ Highcharts.numberFormat(this.y, '1',',') +'&lt;b&gt;  Y:    &lt;/b&gt;'+ Highcharts.numberFormat(this.y, '1',',') +'&lt;br&gt;&lt;span style="color: ' + this.series.color + '; font-weight:bold;"&gt;' + this.point.samp +'&lt;/span&gt;';
  },
  series: [{
              name: 'new Series',  //this is the new series I want to populate the other charts
              data: (function() {table:
                  data.push(document.getElementById('report'))
                  return data;
              })
  }]
  }
  
  });
  
  });  
  &lt;/script&gt;
  &lt;body&gt;
  
  &lt;table width="1200" border="0" cellpadding="0" cellspacing="0"&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;div id="container1" style="height: 400px; min-width: 530px"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt; &lt;table id="report"&gt;&lt;/table&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;div id="container2" style="height: 400px; min-width: 530px"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="container3" style="height: 400px; min-width: 530px"&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm not sure I'm taking the right approach.  The end result will be the other 8 charts will be "dynamic" with respect to this other series (static data) that will be different X,Y pairs for each sample. So as I click on chart1, the other points appear in the other charts based on the sample ID.</p>
  
  <p>my data is as follows:
      SampID    Data1    Data2    Data3     Data4     Data5     Data6    Data7, etc</p>
  
  <p>Each of the 9 charts is a combination of these data but they all refer to the sampID.  So chart 1 is Data1 vs Data2, chart 2 might be Data2 vs Data6 but they all refer back to the sampID as these data are in rows. </p>
  
  <p>The real challenge is trying to link the sampID of the selected samples in chart 1 with the sampIDs of the same name in Charts 2-9. </p>
  
  <p>Any advice on this? </p>