export multiple chart with text area to multiple PDF file - Javascript highcharts

Javascript examples for highcharts:Area Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Area Chart

Description

export multiple chart with text area to multiple PDF file

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <style id="compiled-css" type="text/css">

#container {/*w w  w.j  a  v  a 2 s.  c  om*/
   height: 400px;
   min-width: 310px;
   max-width: 800px;
   margin: 0 auto;
}


      </style> 
      <script type="text/javascript">
$(function() {
  Highcharts.getSVG = function(charts, texts) {
    var svgArr = [],
      top = 0,
      width = 0,
      txt,
      numberOfLines;
    Highcharts.each(charts, function(chart, i) {
      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);
      txt = texts[i];
      value = $(txt).val().replace(/\n/g, '</tspan><tspan x="0" dy="1.2em">');
      numberOfLines = $(txt).val().split("\n").length;
      txt = '<text x= "' + 0 + '" y = "' + (top + 20) + '" styles = "' + txt.attributes.style.value + '"><tspan x="0" dy="1.2em">' + value + '</tspan></text>';
      top += 1.2 * 16 * numberOfLines + 20;
      svgArr.push(txt);
    });
    return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
  };
  Highcharts.exportChartWithText = function(charts, texts, options) {

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

    Highcharts.post(options.url, {
      filename: options.filename || 'chart',
      type: options.type,
      width: options.width,
      svg: Highcharts.getSVG(charts, texts)
    });
  };
  chart1 = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'column'
    },
    series: [{
      data: [1, 2, 3, 3, 4]
    }],
    exporting: {
      enabled: true
    }
  });
  chart2 = new Highcharts.Chart({
    chart: {
      renderTo: 'container2',
    },
    series: [{
      data: [1, 2, 3, 3, 4]
    }],
    exporting: {
      enabled: true
    }
  });
  var texts = $('.HC');
  $("#export2pdf").click(function() {
    Highcharts.exportChartWithText([chart1, chart2], texts, {
      type: 'application/pdf',
      filename: 'wow-pdf'
    });
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <button id="export2pdf"> export to pdf </button> 
      <div id="container" style="height: 600px; width:600px"></div> 
      <textarea name="message" class="HC" id="2" style="width:600px; height:50px">
  Custom text for my charts
</textarea> 
      <div id="container2" style="height: 300px; width:600px"></div> 
      <textarea name="message" class="HC" id="2" style="width:600px; height:50px">
  Custom text for my charts 2
</textarea>  
   </body>
</html>

Related Tutorials