Find highcharts which are loaded in the page and then convert chart into png using jquery
Charts are loaded through the ajax
See the example code:
create four php files for rendering charts one by one those file names are page1.php, page2.php, page3.php and page4.php
page1.php
---------
<?php
sleep(12);
$id = $_GET['key'];
?>
<div id="container<?php echo $id; ?>" style="">
</div>
<script type="text/javascript">
var chart = Highcharts.chart('container<?php echo $id; ?>', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
</script>
page2.php
---------
<?php
$id = $_GET['key'];
?>
<div id="container<?php echo $id; ?>" >
</div>
<script type="text/javascript">
Highcharts.chart('container<?php echo $id; ?>', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'}]
});
</script>
page3.php
---------
<?php
$id = $_GET['key'];
?>
<div id="container<?php echo $id; ?>">
</div>
<script type="text/javascript">
$(document).ready(function () {
// Build the chart
Highcharts.chart('container<?php echo $id; ?>', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
});
</script>
page4.php
---------
<?php
$id = $_GET['key'];
?>
<div id="container<?php echo $id; ?>" >
</div>
<script type="text/javascript">
var chart = Highcharts.chart('container<?php echo $id; ?>', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
</script>
Now Create Index.html.
First Load the necessary libraries of JQuery and highcharts
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
and charts through the ajax using loop:
var ajax = [1,2,3,4,1,2,3,4,1,2,3,4];
for(var k in ajax){ // loop
//console.log();
// create div container for load charts dynamically and append it to body tag
html = '<div id="cont'+k+'"style="min-height:400px;min-width:800px;border-width: 2px; border-style: solid; border-color: red; "></div>';
$("body").append(html);
// scope function handling multiple ajax
(function(key,ajax){
// passing ajax to chart php files
$.ajax({
method: 'get',
url:'page'+ajax+'.php?key='+key+'&rand='+Math.random(),
success: function(data) {
// load ajax response
$("#cont"+key).html(data);
// image conversion method
charttoimage(key);
}
});
})(k,ajax[k]);
} });
Next charttoimage method explantion:
1) We can get highcharts objects using Highcharts.charts
2) We can get svg string from objects getSvg() method(highcharts native method)
3) we can convert svg into image using canvas element and canvas drawimage method
4) Create Image Object and render into highchart render element
5) Canvas to png binary using canvas toDataUrl methods
6) Image onload event load image.
code below:
var chartToImgArr = [];
function charttoimage(key){
// loop highchart
for(chart in Highcharts.charts){
//check and skipe already converted
if($.inArray(chart,chartToImgArr)>-1){ continue; }
chartToImgArr.push(chart);
// get chart obeject
chart = Highcharts.charts[chart];
// get SVG String
var svg = chart.getSVG({
exporting: {
sourceWidth: chart.chartWidth,
sourceHeight: chart.chartHeight
}
});
// create canvas
var canvas = document.createElement('canvas');
canvas.width = chart.chartWidth;
canvas.height = chart.chartHeight;
// create image
var image = new Image;
image.onload = function() {
// drawimage into canvas
canvas.getContext('2d').drawImage(this, 0, 0);
// convert into png
var data = canvas.toDataURL("image/png");
image.src = data;
};
// set svg into image tag
image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
$(chart.renderTo).html(image);
}
}
Index.html:
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var chartToImgArr = [];
function charttoimage(key){
for(chart in Highcharts.charts){
if($.inArray(chart,chartToImgArr)>-1){ continue; }
chartToImgArr.push(chart);
chart = Highcharts.charts[chart];
var svg = chart.getSVG({
exporting: {
sourceWidth: chart.chartWidth,
sourceHeight: chart.chartHeight
}
});
var canvas = document.createElement('canvas');
canvas.width = chart.chartWidth;
canvas.height = chart.chartHeight;
var image = new Image;
image.onload = function() {
canvas.getContext('2d').drawImage(this, 0, 0);
var data = canvas.toDataURL("image/png");
image.src = data;
};
image.src = 'data:image/svg+xml;base64,' + window.btoa(svg);
$(chart.renderTo).html(image);
}
}
var ajax = [1,2,3,4,1,2,3,4,1,2,3,4];
for(var k in ajax){
html = '<div id="cont'+k+'"style="min-height:400px;min-width:800px;border-width: 2px; border-style: solid; border-color: red; "></div>';
$("body").append(html);
(function(key,ajax){
kkey = parseInt(key)+1;
if(kkey>=4) { kkey = kkey%4; if(kkey==0) kkey = kkey+1; }
console.log("chart==="+key);
$.ajax({
method: 'get',
url:'page'+ajax+'.php?key='+key+'&rand='+Math.random(),
success: function(data) {
$("#cont"+key).html(data);
charttoimage(key);
}
});
})(k,ajax[k]);
} });
</script>
</head>
<body>
</body>
</html>
OutPut:
