How to change font size of chart title in downloaded pdf with jspdf
up vote
1
down vote
favorite
I am using jspdf here.I am using Highchart plugin also
When you click submit1 button charts will generate,and when you press download button those chart will be downloaded as pdf.
Everything is working but I need to just reduce the font size of the chart title in downloaded pdf. http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview
Here is my live demo in plunker. also here I have the html and javascript code
HTML
<div><img id="logo" style="width:30%" src="https://www.gstatic.com/webp/gallery3/3.png"/>dddddddd</div>
<input type="button" id="download" value="download" /> click to console
<div><button id="button1" class="button1">submit1</button></div>
<p id="bottom-content">footer</p>
SCRIPT
$(document).ready(function() {
var index = 0;
var id = ;
$('#button1').on('click', function() {
$('body').append($("<div id='chart" + index + "'></div>"));
Highcharts.chart('chart' + index, {
title: {
text: 'Chart-'+index+''
},
series: [{
data: [1, 2, 3]
}]
});
var temp = "chart" + index + "";
console.log(temp);
id.push(temp);
index++;
});
$('#download').on('click', function() {
console.log(id);
var doc = new jsPDF('portrait', 'pt', 'a4', true);
var elementHandler = {
'#ignorePDF': function(element, renderer) {
return true;
}
};
var source = document.getElementById("logo");
doc.fromHTML(source, 15, 15, {
'width': 200,
'elementHandlers': elementHandler
});
var DOMURL = window.URL || window.webkitURL || window;
var elements = id;
// console.log(xx);
for (let i in elements) {
let svg = document.querySelectorAll('svg');
let canvas = document.createElement('canvas');
let canvasIE = document.createElement('canvas');
let context = canvas.getContext('2d');
let data1 = (new XMLSerializer()).serializeToString(svg[i]);
canvg(canvas, data1);
let svgBlob = new Blob([data1], {
type: 'image/svg+xml;charset=utf-8'
});
let url = DOMURL.createObjectURL(svgBlob);
let img = new Image();
img.src = url;
img.onload = function() {
context.canvas.width = $("#"+elements[i]).find('svg').width();
context.canvas.height = $("#"+elements[i]).find('svg').height();
context.drawImage(img, 0, 0);
// freeing up the memory as image is drawn to canvas
DOMURL.revokeObjectURL(url);
var dataUrl;
if (isIEBrowser()) { // Check of IE browser
var svg = $(elements[i]).highcharts().container.innerHTML;
canvg(canvasIE, svg[i]);
dataUrl = canvasIE.toDataURL('image/JPEG');
} else {
dataUrl = canvas.toDataURL('image/jpeg');
}
doc.addImage(dataUrl, 'JPEG', 20, 150, 560, 350);
let bottomContent = document.getElementById("bottom-content");
doc.fromHTML(bottomContent, 15, 700, {
'width': 560,
'elementHandlers': elementHandler
});
let logo = document.getElementById("logo");
doc.fromHTML(logo, 15, 200, {
'width': 560,
'elementHandlers': elementHandler
});
doc.addPage();
};
}
setTimeout(function() {
doc.save('TestChart"'+index+'".pdf');
}, 1000);
});
});
function isIEBrowser() {
var ieBrowser;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11./)) // Internet Explorer
{
ieBrowser = true;
} else //Other browser
{
console.log('Other Browser');
ieBrowser = false;
}
return ieBrowser;
};
javascript html highcharts jspdf
add a comment |
up vote
1
down vote
favorite
I am using jspdf here.I am using Highchart plugin also
When you click submit1 button charts will generate,and when you press download button those chart will be downloaded as pdf.
Everything is working but I need to just reduce the font size of the chart title in downloaded pdf. http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview
Here is my live demo in plunker. also here I have the html and javascript code
HTML
<div><img id="logo" style="width:30%" src="https://www.gstatic.com/webp/gallery3/3.png"/>dddddddd</div>
<input type="button" id="download" value="download" /> click to console
<div><button id="button1" class="button1">submit1</button></div>
<p id="bottom-content">footer</p>
SCRIPT
$(document).ready(function() {
var index = 0;
var id = ;
$('#button1').on('click', function() {
$('body').append($("<div id='chart" + index + "'></div>"));
Highcharts.chart('chart' + index, {
title: {
text: 'Chart-'+index+''
},
series: [{
data: [1, 2, 3]
}]
});
var temp = "chart" + index + "";
console.log(temp);
id.push(temp);
index++;
});
$('#download').on('click', function() {
console.log(id);
var doc = new jsPDF('portrait', 'pt', 'a4', true);
var elementHandler = {
'#ignorePDF': function(element, renderer) {
return true;
}
};
var source = document.getElementById("logo");
doc.fromHTML(source, 15, 15, {
'width': 200,
'elementHandlers': elementHandler
});
var DOMURL = window.URL || window.webkitURL || window;
var elements = id;
// console.log(xx);
for (let i in elements) {
let svg = document.querySelectorAll('svg');
let canvas = document.createElement('canvas');
let canvasIE = document.createElement('canvas');
let context = canvas.getContext('2d');
let data1 = (new XMLSerializer()).serializeToString(svg[i]);
canvg(canvas, data1);
let svgBlob = new Blob([data1], {
type: 'image/svg+xml;charset=utf-8'
});
let url = DOMURL.createObjectURL(svgBlob);
let img = new Image();
img.src = url;
img.onload = function() {
context.canvas.width = $("#"+elements[i]).find('svg').width();
context.canvas.height = $("#"+elements[i]).find('svg').height();
context.drawImage(img, 0, 0);
// freeing up the memory as image is drawn to canvas
DOMURL.revokeObjectURL(url);
var dataUrl;
if (isIEBrowser()) { // Check of IE browser
var svg = $(elements[i]).highcharts().container.innerHTML;
canvg(canvasIE, svg[i]);
dataUrl = canvasIE.toDataURL('image/JPEG');
} else {
dataUrl = canvas.toDataURL('image/jpeg');
}
doc.addImage(dataUrl, 'JPEG', 20, 150, 560, 350);
let bottomContent = document.getElementById("bottom-content");
doc.fromHTML(bottomContent, 15, 700, {
'width': 560,
'elementHandlers': elementHandler
});
let logo = document.getElementById("logo");
doc.fromHTML(logo, 15, 200, {
'width': 560,
'elementHandlers': elementHandler
});
doc.addPage();
};
}
setTimeout(function() {
doc.save('TestChart"'+index+'".pdf');
}, 1000);
});
});
function isIEBrowser() {
var ieBrowser;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11./)) // Internet Explorer
{
ieBrowser = true;
} else //Other browser
{
console.log('Other Browser');
ieBrowser = false;
}
return ieBrowser;
};
javascript html highcharts jspdf
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I am using jspdf here.I am using Highchart plugin also
When you click submit1 button charts will generate,and when you press download button those chart will be downloaded as pdf.
Everything is working but I need to just reduce the font size of the chart title in downloaded pdf. http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview
Here is my live demo in plunker. also here I have the html and javascript code
HTML
<div><img id="logo" style="width:30%" src="https://www.gstatic.com/webp/gallery3/3.png"/>dddddddd</div>
<input type="button" id="download" value="download" /> click to console
<div><button id="button1" class="button1">submit1</button></div>
<p id="bottom-content">footer</p>
SCRIPT
$(document).ready(function() {
var index = 0;
var id = ;
$('#button1').on('click', function() {
$('body').append($("<div id='chart" + index + "'></div>"));
Highcharts.chart('chart' + index, {
title: {
text: 'Chart-'+index+''
},
series: [{
data: [1, 2, 3]
}]
});
var temp = "chart" + index + "";
console.log(temp);
id.push(temp);
index++;
});
$('#download').on('click', function() {
console.log(id);
var doc = new jsPDF('portrait', 'pt', 'a4', true);
var elementHandler = {
'#ignorePDF': function(element, renderer) {
return true;
}
};
var source = document.getElementById("logo");
doc.fromHTML(source, 15, 15, {
'width': 200,
'elementHandlers': elementHandler
});
var DOMURL = window.URL || window.webkitURL || window;
var elements = id;
// console.log(xx);
for (let i in elements) {
let svg = document.querySelectorAll('svg');
let canvas = document.createElement('canvas');
let canvasIE = document.createElement('canvas');
let context = canvas.getContext('2d');
let data1 = (new XMLSerializer()).serializeToString(svg[i]);
canvg(canvas, data1);
let svgBlob = new Blob([data1], {
type: 'image/svg+xml;charset=utf-8'
});
let url = DOMURL.createObjectURL(svgBlob);
let img = new Image();
img.src = url;
img.onload = function() {
context.canvas.width = $("#"+elements[i]).find('svg').width();
context.canvas.height = $("#"+elements[i]).find('svg').height();
context.drawImage(img, 0, 0);
// freeing up the memory as image is drawn to canvas
DOMURL.revokeObjectURL(url);
var dataUrl;
if (isIEBrowser()) { // Check of IE browser
var svg = $(elements[i]).highcharts().container.innerHTML;
canvg(canvasIE, svg[i]);
dataUrl = canvasIE.toDataURL('image/JPEG');
} else {
dataUrl = canvas.toDataURL('image/jpeg');
}
doc.addImage(dataUrl, 'JPEG', 20, 150, 560, 350);
let bottomContent = document.getElementById("bottom-content");
doc.fromHTML(bottomContent, 15, 700, {
'width': 560,
'elementHandlers': elementHandler
});
let logo = document.getElementById("logo");
doc.fromHTML(logo, 15, 200, {
'width': 560,
'elementHandlers': elementHandler
});
doc.addPage();
};
}
setTimeout(function() {
doc.save('TestChart"'+index+'".pdf');
}, 1000);
});
});
function isIEBrowser() {
var ieBrowser;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11./)) // Internet Explorer
{
ieBrowser = true;
} else //Other browser
{
console.log('Other Browser');
ieBrowser = false;
}
return ieBrowser;
};
javascript html highcharts jspdf
I am using jspdf here.I am using Highchart plugin also
When you click submit1 button charts will generate,and when you press download button those chart will be downloaded as pdf.
Everything is working but I need to just reduce the font size of the chart title in downloaded pdf. http://plnkr.co/edit/Z3hJcC8pgzZxXPLWpfBw?p=preview
Here is my live demo in plunker. also here I have the html and javascript code
HTML
<div><img id="logo" style="width:30%" src="https://www.gstatic.com/webp/gallery3/3.png"/>dddddddd</div>
<input type="button" id="download" value="download" /> click to console
<div><button id="button1" class="button1">submit1</button></div>
<p id="bottom-content">footer</p>
SCRIPT
$(document).ready(function() {
var index = 0;
var id = ;
$('#button1').on('click', function() {
$('body').append($("<div id='chart" + index + "'></div>"));
Highcharts.chart('chart' + index, {
title: {
text: 'Chart-'+index+''
},
series: [{
data: [1, 2, 3]
}]
});
var temp = "chart" + index + "";
console.log(temp);
id.push(temp);
index++;
});
$('#download').on('click', function() {
console.log(id);
var doc = new jsPDF('portrait', 'pt', 'a4', true);
var elementHandler = {
'#ignorePDF': function(element, renderer) {
return true;
}
};
var source = document.getElementById("logo");
doc.fromHTML(source, 15, 15, {
'width': 200,
'elementHandlers': elementHandler
});
var DOMURL = window.URL || window.webkitURL || window;
var elements = id;
// console.log(xx);
for (let i in elements) {
let svg = document.querySelectorAll('svg');
let canvas = document.createElement('canvas');
let canvasIE = document.createElement('canvas');
let context = canvas.getContext('2d');
let data1 = (new XMLSerializer()).serializeToString(svg[i]);
canvg(canvas, data1);
let svgBlob = new Blob([data1], {
type: 'image/svg+xml;charset=utf-8'
});
let url = DOMURL.createObjectURL(svgBlob);
let img = new Image();
img.src = url;
img.onload = function() {
context.canvas.width = $("#"+elements[i]).find('svg').width();
context.canvas.height = $("#"+elements[i]).find('svg').height();
context.drawImage(img, 0, 0);
// freeing up the memory as image is drawn to canvas
DOMURL.revokeObjectURL(url);
var dataUrl;
if (isIEBrowser()) { // Check of IE browser
var svg = $(elements[i]).highcharts().container.innerHTML;
canvg(canvasIE, svg[i]);
dataUrl = canvasIE.toDataURL('image/JPEG');
} else {
dataUrl = canvas.toDataURL('image/jpeg');
}
doc.addImage(dataUrl, 'JPEG', 20, 150, 560, 350);
let bottomContent = document.getElementById("bottom-content");
doc.fromHTML(bottomContent, 15, 700, {
'width': 560,
'elementHandlers': elementHandler
});
let logo = document.getElementById("logo");
doc.fromHTML(logo, 15, 200, {
'width': 560,
'elementHandlers': elementHandler
});
doc.addPage();
};
}
setTimeout(function() {
doc.save('TestChart"'+index+'".pdf');
}, 1000);
});
});
function isIEBrowser() {
var ieBrowser;
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11./)) // Internet Explorer
{
ieBrowser = true;
} else //Other browser
{
console.log('Other Browser');
ieBrowser = false;
}
return ieBrowser;
};
javascript html highcharts jspdf
javascript html highcharts jspdf
asked Nov 10 at 18:46
carreankush
657
657
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
You can change the font-size
title style, after click on download
button, in setTitle
method:
var charts = Highcharts.charts;
charts.forEach(function(chart){
chart.setTitle({
style: {
fontSize: '32px'
}
});
});
Live demo: http://plnkr.co/edit/DpFULmbOa8vjk1VEZ5nD?p=preview
API: https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
You can change the font-size
title style, after click on download
button, in setTitle
method:
var charts = Highcharts.charts;
charts.forEach(function(chart){
chart.setTitle({
style: {
fontSize: '32px'
}
});
});
Live demo: http://plnkr.co/edit/DpFULmbOa8vjk1VEZ5nD?p=preview
API: https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle
add a comment |
up vote
0
down vote
accepted
You can change the font-size
title style, after click on download
button, in setTitle
method:
var charts = Highcharts.charts;
charts.forEach(function(chart){
chart.setTitle({
style: {
fontSize: '32px'
}
});
});
Live demo: http://plnkr.co/edit/DpFULmbOa8vjk1VEZ5nD?p=preview
API: https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
You can change the font-size
title style, after click on download
button, in setTitle
method:
var charts = Highcharts.charts;
charts.forEach(function(chart){
chart.setTitle({
style: {
fontSize: '32px'
}
});
});
Live demo: http://plnkr.co/edit/DpFULmbOa8vjk1VEZ5nD?p=preview
API: https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle
You can change the font-size
title style, after click on download
button, in setTitle
method:
var charts = Highcharts.charts;
charts.forEach(function(chart){
chart.setTitle({
style: {
fontSize: '32px'
}
});
});
Live demo: http://plnkr.co/edit/DpFULmbOa8vjk1VEZ5nD?p=preview
API: https://api.highcharts.com/class-reference/Highcharts.Chart#setTitle
answered Nov 12 at 10:40
ppotaczek
3,163129
3,163129
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53242269%2fhow-to-change-font-size-of-chart-title-in-downloaded-pdf-with-jspdf%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown