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









share|improve this question


























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









    share|improve this question
























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









      share|improve this question













      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 10 at 18:46









      carreankush

      657




      657
























          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






          share|improve this answer





















            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














             

            draft saved


            draft discarded


















            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

























            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






            share|improve this answer

























              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






              share|improve this answer























                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






                share|improve this answer












                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







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 12 at 10:40









                ppotaczek

                3,163129




                3,163129






























                     

                    draft saved


                    draft discarded



















































                     


                    draft saved


                    draft discarded














                    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





















































                    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







                    Popular posts from this blog

                    Florida Star v. B. J. F.

                    Error while running script in elastic search , gateway timeout

                    Adding quotations to stringified JSON object values