title: Highcharts on click show larger graph
body: <p>I'm setting up a way to be able to enlarge small-ish charts on my webpage by un-hiding a page 'overlay' div and creating a secondary, larger chart inside it with the same data as the chart which was clicked on.</p>
  <pre><code>function DrawSmallChart() {
  
  chart_data = [1, 2, 3, 4, 5];
  
  LargeChartOptions = {
      series: [{
          name: 'Data',
          data: chart_data
      }],
  };
  
  SmallChartOptions = {
      series: [{
          name: 'Data',
          data: chart_data
      }],
      events: {
          click = function (e) { DrawLargeChart(LargeChartOptions); }
      }
  };
  
  $('#smallchart-div-container').highcharts(SmallChartOptions);
  }
  
  function DrawLargeChart(options) {
  
  chart_container_div = document.getElementById(&quot;graph-div-id&quot;);
  chart_container_div.style.display = &quot;&quot;
  $('#graph-div-id').off();
  $(&quot;#graph-overlay-graph&quot;).highcharts('StockChart', options);
  
  }
  </code></pre>
  <p>I have another function that hides this div when I click a button.</p>
  <p>The first time I click the small graph when the page loads, the big graph shows up fine with all the data. The second time I click it, the graph shows but with no data.</p>
  <p>I've used the debugger to flick through what is happening and I've found exactly what the problem is, but I can't figure out how to solve it.</p>
  <p>The first time I click the graph, the <code>DrawLargeChart</code> function is called with <code>options.series = &lt;Array containing my series object with chart_data&gt;</code>. The second time, <code>DrawLargeChart</code> is called with <code>options.series = null</code>.</p>
  <p>When I refresh the page it is the same - first click works, subsequent clicks don't. I suspect it has something to do with the <code>chart_data</code> variable...</p>
  <p>Any help would be greatly appreciated</p>
  <h1>EDIT 1:</h1>
  <p>After some more debugging, it is clear that the <code>options</code> object which is passed to <code>DrawLargeChart()</code> is not the same in the first click versus subsequent clicks. There is nothing in my code which is changing the <code>LargeChartOptions</code> structure</p>
  <h1>EDIT 2:</h1>
  <p>I figured out that this is a pass by value / pass by reference error. <code>LargeChartOptions</code> is being passed in by reference which no longer exists after the first click. Is there a way to pass it by value? I'd rather not have to type out the <code>LargeChartOptions</code> (much bigger than I've typed up here) into the function parameter in case I change anything in future</p>
  <h1>EDIT 3 // I've figured it out:</h1>
  <p>I figured out what the problem is. The <code>$(target).highcharts(options)</code> function actually <em>modifies</em> the options object and sets <code>options.series = null</code></p>
  <h1>The solution</h1>
  <p>I modified the <code>DrawLargeChart</code> function to create a local copy of <code>options</code> by using <code>options_buffer = $.extend(true,{},options);</code></p>
  <pre><code>function DrawLargeChart(options) {
  
  chart_container_div = document.getElementById(&quot;graph-div-id&quot;);
  options_buffer = $(target).highcharts(options);
  chart_container_div.style.display = &quot;&quot;
  $('#graph-div-id').off();
  $(&quot;#graph-overlay-graph&quot;).highcharts('StockChart', options_buffer);
  
  }
  </code></pre>
  <p>By creating <code>options_buffer</code>, the highcharts function cannot modify <code>LargeChartOptions</code> (because <code>options</code> is just a reference to that variable - yay Javascript)</p>