Highcharts: Export multiple charts using jspdf

Question

When I try to export several Highcharts charts using jsPdf I'm not getting the graph in the proper way.

Could you please help me out in this?

JAVASCRIPT CODE

 Highcharts.chart('container', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});

Highcharts.chart('container1', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});

 Highcharts.chart('container2', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});

 Highcharts.chart('container3', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});

Highcharts.chart('container4', {

title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
},

subtitle: {
    text: 'Source: thesolarfoundation.com'
},

yAxis: {
    title: {
        text: 'Number of Employees'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

plotOptions: {
    series: {
        label: {
            connectorAllowed: false
        },
        pointStart: 2010
    }
},

series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom'
            }
        }
    }]
}

});
function exportToPdf(){
        var pdf = new jsPDF('p','pt','a4');
          var margins = {
            top: 25,
            bottom: 60,
            left: 20,
            width: 522
          };
         pdf.addHTML(document.body, margins.top, margins.left, {}, function() {
           pdf.save('test.pdf');
         });
    }

HTMl code

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src='https://cdn.rawgit.com/simonbengtsson/jsPDF/requirejs-fix-dist/dist/jspdf.debug.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.js'></script>
<script src="https://raw.githubusercontent.com/CBiX/svgToPdf.js/master/svgToPdf.js"></script>
<button onclick="exportToPdf()">
Export
</button>
<div id="container"></div>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

If it is not possible with the jsPDf is there any framework that can be used to export the highcharts?

jsFiddle link:

https://jsfiddle.net/GnanaSagar/3p21xgt9/18/

Possible duplicate of [Export Highcharts to PDF (using javascript and local server - no internet connection)](https://stackoverflow.com/questions/25630811/export-highcharts-to-pdf-using-javascript-and-local-server-no-internet-connec) — Kabulan0lak, Feb 19 '19 at 10:47

Wojciech Chmiel · Answer 1 · 2019-02-20T09:49:38.703

To download multiple charts using jspdf you can use this approach:

send AJAX to Highcharts server with options for each of the charts. The return will be an URL to the image on the server.
convert images from Highcharts server into the base64 format (https://stackoverflow.com/a/20285053/10077925).
Add charts images, logo, footer to pdf using jspdf library and save the result.

Code:

// ############### 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 = [],
    yDocPos = 0,
    k = 0,
    chart,
    imgUrl,
    i,
    j;

  for (i = 0; i < charts.length; i++) {
    chart = charts[i];
    
    ajaxCalls.push($.ajax({
      type: 'post',
      url: exportUrl,
      data: {
        options: JSON.stringify(chart.userOptions),
        type: 'image/png',
        async: true
      }
    }));
  }

  $.when.apply(null, ajaxCalls).done(function() {

    for (j = 0; j < arguments.length; j++) {
      imgUrl = exportUrl + arguments[j][0];
      promises[j] = toDataURL(imgUrl);
    }

    Promise.all(promises).then((values) => {
      values.forEach((value, index) => {
       var page = doc.internal.getCurrentPageInfo();
        if (yDocPos > pageHeight - 150) {
          doc.addPage();
          yDocPos = 25;
          k = 0;
        } else {
         yDocPos = 25 + k * 140;
        }

        doc.setFontSize(30);
        doc.text(50, yDocPos, 'jspdf title for Chart' + (index + 1));
        
        yDocPos += 15;
        doc.addImage(value, 'PNG', 20, yDocPos);
        
        k++;
      });
      doc.save('charts.pdf');
    });
  });
});

<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>

Demo:

https://jsfiddle.net/BlackLabel/uwg6c3yh/

HI Thanks for the response, what if the charts in the page were dynamic like we can have the N number of charts this solution will work — Gnana, Feb 19 '19 at 17:05
I've made a little change and now it will work with a dynamic amount of charts. Check this demo: https://jsfiddle.net/BlackLabel/uwg6c3yh/ — Wojciech Chmiel, Feb 20 '19 at 09:52

Highcharts: Export multiple charts using jspdf

1 Answers1

Linked