Export multiple Highchart as Zip file to my project directory - php

Question

I have successfully created total 4 different charts in one my page.
I have one button "Download Selected Chart" and on click of this button I need to create one ZIP file with selected chart PDF, Means if I select three charts then create a ZIP with three charts PDF.
Highchair provides functionality to download chart as PDF, SVG, PNG etc but I amn't able to do for multiple selected charts.
I check Highchart export server document -
http://www.highcharts.com/docs/export-module/setting-up-the-server but I don't understand how to use this.
please help me if anyone has an idea, how I can do this?

Answer 1

An example solution to this would be:
Create your charts
var options1 = {
// ...
};
$('#chart1').highcharts(options1);
Ask the Highcharts export server to generate an image of the chart
var exportUrl = 'http://export.highcharts.com/';
var d1 = $.ajax({
url: exportUrl,
// ...
});
Fetch the contents of the generated image
$.when(d1).done(function(v1) {
var p1 = new JSZip.external.Promise(function (resolve, reject) {
JSZipUtils.getBinaryContent(exportUrl + v1[0], function(err, data) {
// ...
});
});
// ...
Use JSZip to construct and save the ZIP file with the contents of the generated images
// ...
Promise.all([p1]).then(function(values) {
var zip = new JSZip();
zip.file("chart1.png", values[0], {binary:true});
zip.generateAsync({type:"blob"})
.then(function(content) {
saveAs(content, "charts.zip");
});
});
});
You can see this (very scrappy) JSFiddle demonstration of how you could get the ZIP file. The steps are as described above, but not connected to any button and instead executed immediately upon entering the site.

Answer 2

Here i post my solution that is work for me.
On Button click, get svg image using High chart export server.
// get selected checkbox
$('.selected_checkbox').each(function( index ){
var obj = {},chart;
chart = $('#each_chart').highcharts();
obj.svg = chart.getSVG();
obj.type = 'image/png';
obj.async = true;
obj.id = chart_id;
// ajax call for svg
$.ajax({
type: "POST",
url: url,// u need to save svg in your folder
data: obj,
success: function(data)
{
// redirect to php function and create zip
window.location = 'php function call';
}
)}
Ajax Function call to create SVG..
ini_set('magic_quotes_gpc', 'off');
$type = $_POST['type'];
$svg = (string) $_POST['svg'];
$filename = 'name';
$id = $_POST['id'];
if (get_magic_quotes_gpc()) {
$svg = stripslashes($svg);
}
// check for malicious attack in SVG
if(strpos($svg,"<!ENTITY") !== false || strpos($svg,"<!DOCTYPE") !== false){
exit("the posted SVG could contain code for a malicious attack");
}
$tempName = $filename.'_'.$id;
// allow no other than predefined types
if ($type == 'image/png') {
$typeString = '-m image/png';
$ext = 'png';
} elseif ($type == 'image/jpeg') {
$typeString = '-m image/jpeg';
$ext = 'jpg';
} elseif ($type == 'application/pdf') {
$typeString = '-m application/pdf';
$ext = 'pdf';
} elseif ($type == 'image/svg+xml') {
$ext = 'svg';
} else { // prevent fallthrough from global variables
$ext = 'txt';
}
$outfile = APPPATH."tempp/$tempName.$ext";
if (!file_put_contents(APPPATH."tempp/$tempName.svg", $svg)) {
die("Couldn't create temporary file.");
}}
Ajax Success function redirect code..
Here you need to read directory files and create PDF from SVG.
After add each PDF to ZIP.
This is Example solution.You have to change code as per your requirement