Embedding angular Gauge in an Iframe doesn't work properly

[Axel]

Hello,

I rendered a gauge in an div-container. This file I placed in an Iframe. That works, but not everywhere.

//<![CDATA[
window.onload=function() {
FusionCharts.ready(function () {
    var cSatScoreChart = new FusionCharts({
        type: 'angulargauge',
        renderAt: 'chart-container1',
        width: '450',
        height: '250',
        dataFormat: 'json',
        dataSource: {
    "chart": {
                "caption": " ",
                "lowerLimit": "0",
                "upperLimit": "7",
                "lowerLimitDisplay": "sehr unzufrieden",
                "upperLimitDisplay": "sehr zufrieden",
                "showValue": "0",
                "pivotRadius": "9",
                "pivotFillColor": "#CCCCCC",
                "pivotFillType": "linear",
                "valueBelowPivot": "1",
                "gaugeFillMix": "{dark-30},{light-60},{dark-10}",
                "gaugeFillRatio": "15",
                "theme": "fint"
    },
    "colorRange": {
        "color": [
                    {
                        "minValue": "0",
                        "maxValue": "3",
                        "code": "#e44a00"
                    },
                    {
                        "minValue": "3",
                        "maxValue": "5",
                        "code": "#f8bd19"
                    },
                    {
                        "minValue": "5",
                        "maxValue": "7",
                        "code": "#6baa01"
                    }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "6.4"
            }
        ]
    }
}
    }).render('chart-container1');
  });

}//]]> 

<div style="border: 0px solid #333; margin: 10px auto; position: absolute; top: 10px; width: 590px;"><div id="chart-container1" style="display: inline-block;">fusionChart will render here </div><div style="width: 100px; margin: -90px 0px 0px 0px; display: inline-block; position: relative; top: -120px; border: 0px solid #FF0000; font-size: 39px; font-weight: bold; text-align: center;">6.4</div></div>
 

The file alone works without problems. But if I show the content of this file in an iframe, some browsers don't show the chart, only the text 'fusionChart  will render here'.
Embedded in an iframe doesn't work in some browsers, because frames need obviously special scripts in fusionCharts.

 

 

I was looking for a solution and found this script:

http://jsfiddle.net/fusioncharts/hvggzdsw/

But I don't know to adapt this for a gauge example, especially customize the links for the iframe.
 

How can I change the script to write the gauge into the iframe by fusionCharts?
 

 

 

 

 

 

[Gagan Sikri]

Hi

 

You have to define scope for FusionCharts JavaScript files in HTML files you are including iFrame in. Please refer to attached sample for the same.

iFrame.zip