Highchart Download Multiple graph on individual pa

Question

In highchart Export,currently i am downloading multiple graphs in single page pdf,but i want first graph on first page and second graph on second page(talking about pdf).

code is available in below jsfiddle link   

Click here for jsfiddle

Answer 1

Here is your relevant answer, you just need to implement in your angular code.

Note: it will not run directly here, so you will have to follow the link because jquery should be rander on document load, implement it like that.

So, follow this link : Working Fiddle

Highcharts.getSVG = function(charts) {
  var svgArr = [],
    top = 0,
    width = 0;

  $.each(charts, function(i, chart) {
    var svg = chart.getSVG();
    svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
    svg = svg.replace('</svg>', '</g>');

    top += chart.chartHeight;
    width = Math.max(width, chart.chartWidth);

    svgArr.push(svg);
  });

  return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};

/**
 * Create a global exportCharts method that takes an array of charts as an argument,
 * and exporting options as the second argument
 */
Highcharts.exportCharts = function(charts, options) {
  var form
  svg = Highcharts.getSVG(charts);

  // merge the options
  options = Highcharts.merge(Highcharts.getOptions().exporting, options);

  // create the form
  form = Highcharts.createElement('form', {
    method: 'post',
    action: options.url
  }, {
    display: 'none'
  }, document.body);

  // add the values
  Highcharts.each(['filename', 'type', 'width', 'svg'], function(name) {
    Highcharts.createElement('input', {
      type: 'hidden',
      name: name,
      value: {
        filename: options.filename || 'chart',
        type: options.type,
        width: options.width,
        svg: svg
      }[name]
    }, null, form);
  });
  //console.log(svg); return;
  // submit
  form.submit();

  // clean up
  form.parentNode.removeChild(form);
};

var chart1 = new Highcharts.Chart({

  chart: {
    renderTo: 'container1'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]

});

var chart2 = new Highcharts.Chart({

  chart: {
    renderTo: 'container2',
    type: 'column'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0]
  }]

});



<!-- PDF, Postscript and XPS are set to download as Fiddle (and some browsers) will not embed them -->

var click = "return xepOnline.Formatter.Format('JSFiddle', {render:'download'})";
jQuery('#buttons').append('<button onclick="' + click + '">PDF</button>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://www.cloudformatter.com/Resources/Pages/CSS2Pdf/Script/xepOnline.jqPlugin.js"></script>

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="buttons"></div>
<hr/>
<div id="JSFiddle">
  <!-- Insert your document here -->
  <header style="display:none;margin-top:20px;">
    <p>Add your header</p>
  </header>
  <footer style="display:none">
    <p>Add your header</p>
  </footer>
  <div id="container1" style="height: 200px; width:700px"></div>
  <div style="page-break-before:always;">
    <div id="container2" style="height: 200px;  width:700px"></div>
  </div>
</div>