Black background showing in PDF

[dineshhh86]

Hi ,

I am using flot to draw a chart in canvas container , I try to export chart to PDF , But black background is showing around the chart in PDF file. and My PDF file is showing a result as given below, How can I remove this black background ?

i am using
plottime = $.plot($('#graph-bars-timetofill'), [
{
data: finaldata,
color: '#5bc0de',
backgroundColor: '#FFFFFF',
bars: {
show: true
}
}
], {
series: {

                    bars: {
                        show: true
                    },
                    valueLabels: {
                        show: true
                    }
                },
                bars: {
                    align: "center",
                    barWidth: 0.5
                },
                legend: {
                    labelBoxBorderColor: "none",
                    backgroundColor: '#FFFFFF',
                    backgroundOpacity:1,
                    position: "right"
                },
                //canvas: true,
                grid: {
                    color: '#646464',
                    borderColor: '#cdcdcd',
                    backgroundColor:'#FFFFFF',
                    borderWidth: 2,
                    hoverable: true,
                    clickable: true
                },
                xaxis: {
                    // mode: "categories",
                    color: '#FFFFCC',
                    axisLabel: 'Source',
                    tickColor: '#FFFFFF',
                    ticks: $.parseJSON(tickstimetofill),
                    tickLength: 0
                },
                yaxis: {
                    min: 0
                },
                valueLabels: {
                    show: true
                }
            });

can you please help on this issue
Thanks,
Dinesh Patel

[alb3rto269]

Hey, what pdf tool are you using?

[dineshhh86]

Hi,I used jsPDF library for PDF.

[alb3rto269]

Thanks..

[kbtz]

It's much probably something to do with the jsPDF library. Change the default fill color in the library settings or something like that.

[alb3rto269]

what i did is to convert the flot canvas to image using 'toDataUrl' and
insert the result as an image in the PDF using 'addImage'.

If I need to print more content than just the PDF, my solution was to use
'html2canvas' passing the DOM element to print.

Both cases worked pretty well for me.

[alb3rto269]

parallax/jsPDF#247

[mariadelmarq]

I had the same problem and used this solution:

http://stackoverflow.com/questions/25253015/flot-renders-png-image-with-a-different-background-color-than-it-does-in-browser. The problem is that jpeg turns transparency into black.

I'm sure it's not the best way, but it works. Did anybody else figure out a better solution? @dineshhh86 ?

EDIT:

Actually that turned out to screw the axis labels when I added them to the pdf. My solution was then to change to PNG, but now opening the pdf in a new tab using doc.output('dataurlnewwindow') no longer works in chrome, works fine in Mozilla... I solved that by switching to doc.save('testImage.pdf'); to download the pdf, but would much rather have it open in a new window if at all possible. See fiddle here: http://jsfiddle.net/8tLt9yof/10/ (works in Mozilla Firefox).