Print chart using print() method and button - Javascript highcharts

Javascript examples for highcharts:Print

  1. HOME
  2. Javascript
  3. highcharts
  4. Print

Description

Print chart using print() method and button

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
      <style id="compiled-css" type="text/css">

@media screen/*from www .  j a va 2 s  .c  om*/
{
   .no-Print{
      display: normal;
   }
   .cont
   {
      width: 50%;
      height: 100%;
   }
}
@media print
{
   .no-Print{
      display: none;
   }
   .cont
   {
      width: 5%;
      height: 5%;
      overflow: hidden;
      border: 1px solid red;
   }
}


      </style> 
      <script type="text/javascript">
function PrintMe()
 {
  //   console.log("hi");
   this.print();
 }
$(function () {
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'scatter',
                animation: false
            },
            xAxis: {
                min: 0,
                max: 20
            },
            series: [{
                data: []
            }]
        }, function (chart) {
            for (var i = 0; i <= 3; i++) {
                var point1 = {
                    x: i,
                    y: i
                };
                chart.series[0].addPoint(point1, false);
            }
            chart.xAxis[0].isDirty = true;
            chart.redraw(false);
        });
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script>  
      <button onclick="javascript:PrintMe();" class="no-Print">Print</button> 
      <div id="container" class="cont"></div>   
   </body>
</html>

Related Tutorials