'how to add flot graph into jspdf and error canvas.toDataURL

I have some code with flot graph like this image1 and i wanna put that graph into export pdf with jspdf in html code, flot graph generated like this

<div id="myGraph" style="height: 300px; padding: 0px; position: relative;"><canvas class="flot-base" width="806" height="269" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 896.25px; height: 300px;"></canvas><canvas class="flot-overlay" width="806" height="269" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 896.25px; height: 300px;"></canvas><div class="flot-svg" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; pointer-events: none;"><svg style="width: 100%; height: 100%;"><g class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; inset: 0px;"><text x="448.625" y="279" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">0</text><text x="88.10659637451171" y="294" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">-800</text><text x="174.6315963745117" y="294" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">-600</text><text x="261.1565963745117" y="294" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">-400</text><text x="347.6815963745117" y="294" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">-200</text><text x="523.2142356872558" y="294" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">200</text><text x="609.7392356872558" y="294" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">400</text><text x="696.2642356872558" y="294" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">600</text><text x="782.7892356872559" y="294" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">800</text><text x="-2.3940982818603516" y="294" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">-1000</text><text x="865.3385410308838" y="294" class="flot-tick-label tickLabel" style="position: absolute; text-align: center;">1000</text></g><g class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; inset: 0px;"><text x="1" y="264" class="flot-tick-label tickLabel" style="position: absolute; text-align: right;">0</text><text x="1" y="221.33333333333334" class="flot-tick-label tickLabel" style="position: absolute; text-align: right;">50</text><text x="1" y="8" class="flot-tick-label tickLabel" style="position: absolute; text-align: right;">300</text><text x="1" y="178.66666666666669" class="flot-tick-label tickLabel" style="position: absolute; text-align: right;">100</text><text x="1" y="136" class="flot-tick-label tickLabel" style="position: absolute; text-align: right;">150</text><text x="1" y="93.33333333333334" class="flot-tick-label tickLabel" style="position: absolute; text-align: right;">200</text><text x="1" y="50.66666666666667" class="flot-tick-label tickLabel" style="position: absolute; text-align: right;">250</text></g></svg></div></div>

and this is my jquery code, but i always get an error "canvas.toDataURL is not a function". How can i get my canvas into data url? cause in my flot canvas there is no id.

var canvas = $('#myGraph').find('canvas');
var dataURL = canvas.toDataURL('image/jpeg');
doc.addImage(dataURL, 'JPEG', 15, 40, 180, 180);

Thankyou

jqueryimagechartsjspdfflot


Solution 1:[1]

Try this one:

 html2canvas(document.getElementById(divName)).then(canvas => {
                            window.jsPDF = window.jspdf.jsPDF;

                            var w = document.getElementById(divName).offsetWidth;
                            var h = document.getElementById(divName).offsetHeight;

                            var img = canvas.toDataURL("img/jpeg", 1);

                            var doc = new jsPDF('L', 'pt', [w, h]);
                            doc.addImage(img, 'JPEG', 10, 10, w, h);
                            doc.save('chart.pdf');

                        }).catch(function(e){
                            console.log(e.message);
                        });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Samirovic

Related Questions