Sign in to follow this  
Axel

Embedding angular Gauge in an Iframe doesn't work properly

Recommended Posts

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?
 

 



 

 
 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this