javascript - Highchart Download Multiple graph on individual page -


in highchart export,currently downloading multiple graphs in single page pdf,but want first graph on first page , second graph on second page(talking pdf).

code available in below jsfiddle link

click here jsfiddle

here relevant answer, need implement in angular code.

note: it not run directly here, have follow link because jquery should rander on document load, implement that.

so, follow 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 global exportcharts method takes array of charts argument,   * , exporting options second argument   */  highcharts.exportcharts = function(charts, options) {    var form    svg = highcharts.getsvg(charts);      // merge options    options = highcharts.merge(highcharts.getoptions().exporting, options);      // create form    form = highcharts.createelement('form', {      method: 'post',      action: options.url    }, {      display: 'none'    }, document.body);      // add 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    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 , xps set download fiddle (and browsers) 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 document here -->    <header style="display:none;margin-top:20px;">      <p>add header</p>    </header>    <footer style="display:none">      <p>add 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>


Comments

Post a Comment

Popular posts from this blog

php - How to add and update images or image url in Volusion using Volusion API -

actually have store importing products store product data insert , update image or image url not insert , update. this xml code name datapro.txt. <products_joined> <productcode>3710_012t</productcode> <vendor_partno>eah5450silent/di/1gd3(lp)</vendor_partno> <productname>test product ta</productname> <hideproduct>n</hideproduct> <stockstatus>20</stockstatus> <lastmodified>1/5/2016 10:25:00 am</lastmodified> <lastmodby>2</lastmodby> <productweight>0.9</productweight> <productprice>100</productprice> <productmanufacturer>asus tek</productmanufacturer> <vendor_price>32.69</vendor_price> <numproductssharingstock>0</numproductssharingstock> <categoryids>107</categoryids> <producturl>http://tebkq.mvlce.servertrust.com/productdetails.asp?productcode=3710_012t</producturl...
Read more

Laravel mail error `Swift_TransportException in StreamBuffer.php line 269: Connection could not be established with host smtp.gmail.com [ #0]` -

i developing website contact-us page guest users can send me email using gmail . anytime try send mail using contact-us form, error swift_transportexception in streambuffer.php line 269: connection not established host smtp.gmail.com [ #0] this mail.php return [ 'driver' => env('mail_driver', 'smtp'), 'host' => env('mail_host', 'smtp.gmail.com'), 'port' => 587, 'from' => ['address' => '', 'name' => ''], 'encryption' => env('mail_encryption', 'tls'), 'username' => env('mail_username'), 'password' => env(mail_password), 'sendmail' => '/usr/sbin/sendmail -bs', 'pretend' => env('mail_pretend', false), ]; this .env mail_driver=smtp mail_host=smtp.gmail.com mail_port=587 mail_username=afecjaped@gmail.com mail_password=********...
Read more

c# SetCompatibleTextRenderingDefault must be called before the first -

i tried search exception couldn't find solution on case i'am using code below invoke .net application : assembly assem = assembly.load(data); methodinfo method = assem.entrypoint; var o = activator.createinstance(method.declaringtype); method.invoke(o, null); the application invoked has form , in entrypoint of application : [stathread] static void main() { application.enablevisualstyles(); application.setcompatibletextrenderingdefault(false); //exception application.run(new form1()); } setcompatibletextrenderingdefault must called before first iwin32window object created in application. edit : assembly = assembly.load(data); methodinfo method = a.gettype().getmethod("start"); var o = activator.createinstance(method.declaringtype); method.invoke(o, null); you should create new method skips initialization...
Read more