title: HighCharts - How to create dynamic chart that exports EVERYTHING
body: <p>I'm trying to export a dynamically generated chart and I've noticed that some things don't get exported.  For example, my chart has PlotBands which are dynamic depending on the data being displayed.</p>
  
  <p>As I built my chart, I followed the standard code layout of all the great HighChart examples where I generated the chart immediately on the document load.  Then later in my code, I use an Ajax call to load the data and modify things like titles, plot bands, custom text, etc.</p>
  
  <p>The problem is that anything modified on the chart after the initial chart load won't be exported to images or PDFs.  My PlotBands were added during the Ajax call.  They couldn't be included in the chart object that was built on <code>document.load()</code>.  So they were conveniently ignored by HighCharts.</p>
  
  <p>In my chart, I want to show energy usage during a 24-hour period at different sites.  The user can choose different days and different sites.  The Plot Bands needed to highlight the operating hours and each site has different operating hours which are loaded with the data.  Also, the chart title shows the site name and the subtitle shows the square footage.</p>
  
  <p>Additionally, my code draws some custom text on the bottom of the graph using the HighCharts renderer <code>text()</code> command.</p>
  
  <p>My code for the barely-functioning export looks something like this:</p>
  
  <pre><code>var chart;
  $(document).ready(function() {
      chart = new Highcharts.Chart({
          chart: {
              renderTo: "ChartContainer",
              type: "line",
              title: { text: null },
              subtitle: { text: null }
          }
      }
  });
  
  function UpdateChart() {
      $.ajax({
          url: "/my/url.php",
          success: function(json) {
              chart.addSeries(json[1]);
              chart.addSeries(json[2]);
              chart.setTitle(json[0].title, json[0].subtitle);
              chart.xAxis[0].addPlotBand({ color: "#FCFFB9", from: json[0].OpenInterval, to: json[0].CloseInterval, label: { text: "Operating Hours", verticalAlign: "bottom", y: -5, style: { fontSize: "8pt", color: "gray" } } });
              chart.renderer.text("Custom Text", 50, 100);
          }
      });
  }
  </code></pre>
  
  <p>Unfortunately, the title, the plot bands and the "custom text" won't appear if the user exports the chart.</p>