roberkules

Issue With Fusioncharts 3.2.4 Sr1 On Ie8 And Javascript Renderer

Recommended Posts

I get the error message "Invalid data." shown in charts on IE8 if there's no flash (or an outdated version). The chart works fine on IE8 if flash is installed and on Chrome, FF, Safari regardless if it uses flash or javascript.

I downloaded FusionCharts XT (3.2.4-sr1.9888) and changed the "Multi Series Column 2D Chart" demo to reproduce the issue on IE8.

 

FusionCharts_XT\Gallery\Column2D\MSCol2D1.html

 

changed from

 

chart.setXMLData( dataString );

 

to:

 

chart.setJSONData({
   "styles": {
       "definition": [
           {
               "color": "000000",
               "isHTML": "1",
               "type": "font",
               "name": "ToolTipStyle"
           }
       ],
       "application": [
           {
               "styles": "ToolTipStyle",
               "toobject": "ToolTip"
           }
       ]
   },
   "chart": {
       "baseFontColor": "979797",
       "showAlternateColorBands": "FFFFFF",
       "showalternatehgridcolor": "1",
       "plotgradientcolor": "",
       "numDivLines": "5",
       "showplotborder": "0",
       "alternateBandColor": "FFFFFF",
       "xaxisname": "",
       "bgColor": "FFFFFF",
       "anchorBgColor": "4D3B62",
       "anchorBorderThickness": "2",
       "chartBottomMargin": "5",
       "anchorRadius": "6",
       "showToolTipShadow": "1",
       "connectNullData": "1",
       "alternateVGridColor": "f1f1f1",
       "toolTipBgColor": "FFDB4A",
       "anchorBorderColor": "FFC322",
       "divLineColor": "e1e1e1",
       "palette": "0",
       "showExportDataMenuItem": "1",
       "chartTopMargin": "10",
       "numberPrefix": "$",
       "numberSuffix": "",
       "useroundedges": "0",
       "showvalues": "0",
       "caption": "",
       "toolTipBorderColor": "CBA31D",
       "showAlternateVGridColor": "1",
       "alternatehgridcolor": "fafafa",
       "showshadow": "0",
       "canvasBorderColor": "DFDFDF",
       "xAxisNamePadding": "15",
       "formatnumberscale": "0",
       "showborder": "0",
       "decimals": "0",
       "yaxisname": "",
       "canvasbgColor": "FFFFFF"
   },
   "categories": [
       {
           "category": [
               {"label": "12 am"},
               {"label": "1 am"},
               {"label": "2 am"},
               [{
                   "dashGap": "2",
                   "color": "FF0000",
                   "dashed": "1",
                   "thickness": "2",
                   "vline": "true",
                   "dashLen": "5",
                   "alpha": "60"
               }]
           ]
       }
   ],
   "dataset": [
       {
           "seriesname": "Today",
           "color": "4D3B62",
           "data": [
               {
                   "tooltext": "Total value of transaction: $50",
                   "value": 50
               }
           ],
           "anchorbordercolor": "008040"
       },
       {
           "seriesname": "21-day avg.",
           "color": "FFC322",
           "data": [
               {
                   "tooltext": "Total value of transaction: $10",
                   "value": 10
               },
               {
                   "tooltext": "Total value of transaction: $20",
                   "value": 20
               }
           ],
           "anchorbordercolor": "FF8040"
       }
   ]
});

 

this is a screenshot from IE9 (without flash) -> working

post-35788-0-51821300-1359349414_thumb.png

 

on IE8 (without flash) -> "Loading chart. Please wait"

 

any help appreciated.

MSCol2D1.html

Edited by roberkules

Share this post


Link to post
Share on other sites

Hi,

 

Nobody?

 

(For now we decided to show a notice to the user if there's no Flash and it's an IE8. But that shouldn't be the solution.)

 

Could you please confirm if you have kept all the JavaScript files, namely, "FusionCharts.HC.js", "FusionCharts.HC.Charts.js" and "jquery.min.js" from the "Charts" folder of the FusionCharts XT Download package in the same folder as "FusionCharts.js" of your application folder, while rendering the charts in JavaScript (non-Flash mode)?

 

Awaiting your reply.

Share this post


Link to post
Share on other sites

This works in Fire Fox but not in IE8:

 

<BR><div id="chartContainer">FusionCharts will load here!</div><BR><script type="text/javascript"></P><P>    var objJSON = {<BR>        "chart": {<BR>            "caption": "Monthly Sales Summary",<BR>            "subcaption": "For the year 2006",<BR>            "xaxisname": "Month",<BR>            "yaxisname": "Sales",<BR>            "numberprefix": "$"<BR>        },<BR>        "data": [<BR>           {<BR>               "label": "January",<BR>               "value": "17400"<BR>           },<BR>           {<BR>               "label": "February",<BR>               "value": "19800"<BR>           },<BR>           {<BR>               "label": "March",<BR>               "value": "21800"<BR>           },<BR>           {<BR>               "label": "April",<BR>               "value": "23800"<BR>           },<BR>           {<BR>               "label": "May",<BR>               "value": "29600"<BR>           },<BR>           {<BR>               "label": "June",<BR>               "value": "27600"<BR>           },<BR>           {<BR>               "vline": "true",<BR>               "color": "FF5904",<BR>               "thickness": "2"<BR>           },<BR>           {<BR>               "label": "July",<BR>               "value": "31800"<BR>           },<BR>           {<BR>               "label": "August",<BR>               "value": "39700"<BR>           },<BR>           {<BR>               "label": "September",<BR>               "value": "37800"<BR>           },<BR>           {<BR>               "label": "October",<BR>               "value": "21900"<BR>           },<BR>           {<BR>               "label": "November",<BR>               "value": "32900"<BR>           },<BR>           {<BR>               "label": "December",<BR>               "value": "39800"<BR>           }<BR>        ],<BR>        "trendlines": {<BR>            "line": [<BR>               {<BR>                   "startvalue": "22000",<BR>                   "color": "00cc00",<BR>                   "displayvalue": "Average"<BR>               }<BR>            ]<BR>        },<BR>        "styles": {<BR>            "definition": [<BR>               {<BR>                   "name": "CanvasAnim",<BR>                   "type": "animation",<BR>                   "param": "_xScale",<BR>                   "start": "0",<BR>                   "duration": "1"<BR>               }<BR>            ],<BR>            "application": [<BR>               {<BR>                   "toobject": "Canvas",<BR>                   "styles": "CanvasAnim"<BR>               }<BR>            ]<BR>        }<BR>    };<BR>    FusionCharts.setCurrentRenderer("javascript");<BR>    var myChart = new FusionCharts("Column3D", "myChartId", "400", "300", "0", "0");<BR>    myChart.setJSONData(objJSON);<BR>    myChart.render("chartContainer");</P><P> </P><P></script><BR>

 

 

 

 

Edited by Tim Francis

Share this post


Link to post
Share on other sites

I'm having the same problem with IE8

- is there any fix or solution??

 

 

This works in Fire Fox but not in IE8:

 

<BR><div id="chartContainer">FusionCharts will load here!</div><BR><script type="text/javascript"></P><P>    var objJSON = {<BR>        "chart": {<BR>            "caption": "Monthly Sales Summary",<BR>            "subcaption": "For the year 2006",<BR>            "xaxisname": "Month",<BR>            "yaxisname": "Sales",<BR>            "numberprefix": "{:content:}quot;<BR>        },<BR>        "data": [<BR>       	{<BR>           	"label": "January",<BR>           	"value": "17400"<BR>       	},<BR>       	{<BR>           	"label": "February",<BR>           	"value": "19800"<BR>       	},<BR>       	{<BR>           	"label": "March",<BR>           	"value": "21800"<BR>       	},<BR>       	{<BR>           	"label": "April",<BR>           	"value": "23800"<BR>       	},<BR>       	{<BR>           	"label": "May",<BR>           	"value": "29600"<BR>       	},<BR>       	{<BR>           	"label": "June",<BR>           	"value": "27600"<BR>       	},<BR>       	{<BR>           	"vline": "true",<BR>           	"color": "FF5904",<BR>           	"thickness": "2"<BR>       	},<BR>       	{<BR>           	"label": "July",<BR>           	"value": "31800"<BR>       	},<BR>       	{<BR>           	"label": "August",<BR>           	"value": "39700"<BR>       	},<BR>       	{<BR>           	"label": "September",<BR>           	"value": "37800"<BR>       	},<BR>       	{<BR>           	"label": "October",<BR>           	"value": "21900"<BR>       	},<BR>       	{<BR>           	"label": "November",<BR>           	"value": "32900"<BR>       	},<BR>       	{<BR>           	"label": "December",<BR>           	"value": "39800"<BR>       	}<BR>        ],<BR>        "trendlines": {<BR>            "line": [<BR>           	{<BR>               	"startvalue": "22000",<BR>               	"color": "00cc00",<BR>               	"displayvalue": "Average"<BR>           	}<BR>            ]<BR>        },<BR>        "styles": {<BR>            "definition": [<BR>           	{<BR>               	"name": "CanvasAnim",<BR>               	"type": "animation",<BR>               	"param": "_xScale",<BR>               	"start": "0",<BR>               	"duration": "1"<BR>           	}<BR>            ],<BR>            "application": [<BR>           	{<BR>               	"toobject": "Canvas",<BR>               	"styles": "CanvasAnim"<BR>           	}<BR>            ]<BR>        }<BR>    };<BR>    FusionCharts.setCurrentRenderer("javascript");<BR>    var myChart = new FusionCharts("Column3D", "myChartId", "400", "300", "0", "0");<BR>    myChart.setJSONData(objJSON);<BR>    myChart.render("chartContainer");</P><P> </P><P></script><BR>

 

 

 

 

Share this post


Link to post
Share on other sites

Hi,

 

I'm having the same problem with IE8

- is there any fix or solution??

 

 

Could you please try using the attached JSON data (remove .txt extension) and see if this helps?

 

Using the attached JSON data, the chart is rendered perfectly in the JavaScript version in IE 8. Please check with the attached screenshot for your reference.

 

post-8144-0-03725200-1363171212_thumb.jpg

 

Hope this helps. :)

SampleData.json.txt

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