Highcharts Demo

author(s): Torstein Hønsi

by omaily

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>

<button id="btn">Export PDF</button>
<br><br>
<div>
  <div id="container1"></div>
  <div id="container2"></div>
  <div id="container3"></div>
  <div id="container4"></div>
  <div id="container5"></div>
</div>

JavaScript

// ############### CHARTS OPTIONS ###############

Highcharts.chart('container1', {
  title: {
    text: 'Chart 1'
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointStart: 2010
    }
  },
  series: [{
    name: 'Installation',
    color: 'red',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }]
});

Highcharts.chart('container2', {
	chart: {
  	type: 'column'		
  },
  title: {
    text: 'Chart 2'
  },
  series: [{
    name: 'Manufacturing',
    color: 'green',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }],
});

Highcharts.chart('container3', {
	chart: {
  	type: 'bar'		
  },
  title: {
    text: 'Chart 3'
  },
  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },
  series: [{
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }]
});

Highcharts.chart('container4', {
  chart: {
    backgroundColor: '#efefef',
    type: 'pie'
  },
  title: {
    text: 'Chart 4'
  },
  series: [{
    name: 'Project Development',
    color: 'purple',
    data: [7988, 12169, 15112, 22452, 34400, 34227]
  }]
});

Highcharts.chart('container5', {
  chart: {
    backgroundColor: '#c5c5c5',
    type: 'spline'
  },
  title: {
    text: 'Chart 5'
  },
  series: [{
    name: 'Project Development',
    color: 'purple',
    data: [7988, 12169, 15112, 22452, 34400, 34227]
  }]
});

// ############### CHARTS OPTIONS ###############


const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }));


$('#btn').click(function() {
  var charts = Highcharts.charts,
    exportUrl = 'https://export.highcharts.com/',
    doc = new jsPDF(),
    pageHeight = doc.internal.pageSize.getHeight(),
    ajaxCalls = [],
    promises = [],
   ...