Avatar of ambuli
ambuli
Flag for United States of America asked on

Showing HTML within an iFrame

Hi there,
I want to print a pie chart inside an iFrame.  I have the following code.  When executed,  I am getting an exception saying
"Cannot read property 'getContext' of null"

I am using Charts.js library for creating the pie chart.
Can you please help me with this one.  Thank you.


// in a function I have the following code segment
if(response.success)
{
    generateReport();
}
And I just want to display the pie chart in the iFrame.

function __pieChartExample() {
        var div = document.createElement("div");
        var canvasDiv = document.createElement("canvas");
        canvasDiv.id = "chartArea";
        div.appendChild(canvasDiv);
        var ctx = document.getElementById("chartArea").getContext("2d");

        var data = [{
            value : 300,
            color : "#F7464A",
            highlight : "#FF5A5E",
            label : "Red"
        }, {
            value : 50,
            color : "#46BFBD",
            highlight : "#5AD3D1",
            label : "Green"
        }, {
            value : 100,
            color : "#FDB45C",
            highlight : "#FFC870",
            label : "Yellow"
        }];

        var pieOptions = {
            segmentShowStroke : false,
            animateScale : true
        };
        new Chart(ctx).Doughnut(data, pieOptions);
        div.appendChild(canvasDiv);
        return div;

    }
 function __generateReport() {
        var iFrame = document.createElement("iframe");
        iFrame.id = "iFrameID";
        iFrame.style.display = "none";
        document.body.appendChild(iFrame);
        iFrame.contentWindow.document.write(pieChartExample().innerHTML);
        var result = iFrame.contentWindow.document.execCommand("save", false, null);
        if (result === false) {
            iFrame.contentWindow.focus();
            iFrame.contentWindow.print();
        }
    }

Open in new window

JavaScriptHTML

Avatar of undefined
Last Comment
ambuli

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Hans Langer

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
ambuli

ASKER
Thank you
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23