Link to home
Start Free TrialLog in
Avatar of ambuli
ambuliFlag 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

ASKER CERTIFIED SOLUTION
Avatar of Hans Langer
Hans Langer

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ambuli

ASKER

Thank you