Google Charts Exporting as Image with Background

Question

I have some great charts producing using the following code Chart Code, and am able to stream the 'exported' image to the browser with no issue using Export Code.

My Question now is, how can I change the background color of the exported image to be completed black instead of transparent? Yes, I need the chart backgrounds to stay transparent, just not the rendered dataUrl.

Chart Code:

<script type="text/javascript">

    google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var $dUrl = "/assets/php/charts/chart.data.php?which=<?php echo (isset($which)) ? $which : 4; ?>&d=<?php echo (isset($d)) ? $d : null; ?>&dl=<?php echo (isset($dl)) ? $dl : null; ?>";
        jQuery.ajax({
            method: 'post',
            url: $dUrl,
            cache: false,
            async: true,
            dataType: "json",
            data:{'_t':Math.floor(+new Date() / 1000)},
            beforeSend: function(){
                jQuery('#<?php echo $where; ?>').html('<div id="frmLoadingImageWrapper"><img src="/assets/images/ajax-loader.gif" alt="loading..." height="11" width="16" /></div>');
            },
            success: function(d, status, xhr){
                var data = new google.visualization.DataTable(d);
                var options = {
                    'colors': ['red', 'blue', 'yellow'],
                    'width': '97%', 
                    'height': 280, 
                    'backgroundColor': 'none',
                    'hAxis': {'textStyle': {color: 'white', fontName: 'Calibri', 
                        fontSize: '12'}},
                    'vAxis': {'textStyle': {color: 'white', fontName: 'Calibri', 
                        fontSize: '12'}},
                    'legendTextStyle': {color: 'white', fontName: 'Calibri', 
                        fontSize: '12'}
                };
                setTimeout(function(){
                    var chart = new google.visualization.ColumnChart(document.getElementById(<?php echo '"' . $where . '"'; ?>));
                    chart.draw(data, options);
                }, 1);

            },
            error: function(xhr, status, msg){
                console.log(status + ':' + msg + ':::WHICH->' + <?php echo '"' . $where . '"'; ?>);
            }   
        });

    }
</script>

Export Code:

// Save Charts as Images
function getImgData(chartContainer) {
    var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
    var svg = chartArea.innerHTML;
    var doc = chartContainer.ownerDocument;
    var canvas = doc.createElement('canvas');
    canvas.setAttribute('width', chartArea.offsetWidth);
    canvas.setAttribute('height', chartArea.offsetHeight);
    canvas.setAttribute(
        'style',
        'position: absolute; ' +
        'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
        'left: ' + (-chartArea.offsetWidth * 2) + 'px;' + 
        'background:#000 !important;'); // <- does not change the background color
    doc.body.appendChild(canvas);
    canvg(canvas, svg);
    var imgData = canvas.toDataURL("image/png");
    canvas.parentNode.removeChild(canvas);
    return imgData;
}
function saveAsImg(chartContainer) {
    var imgData = getImgData(document.getElementById(chartContainer));
    window.open(imgData, '');
//  window.location = imgData;//.replace("image/png", "image/octet-stream");
}

Answer 1

Without knowing how the canvg library does its thing, the only course of action I can suggest is that you redraw the chart with a black background, convert it to an image, and then redraw the chart with the transparent background. It's not a particularly elegant solution, but it should work.