viral069

Fusion Chart not loaded Property if we user <base href=""> property

Recommended Posts

Dear All,

 

I have one JSP Page which include simple Heat Chart, I found one problem that if we use <base ..> html tag that chart not getting render properly.

 

JSP Code:

<!DOCTYPE html>


<%@ page isThreadSafe="false"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<html>
<head>
 <base href="<%=basePath%>" />


<title>Buzzor</title>
<script type="text/javascript" src="js/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript">

FusionCharts.ready(function () {
    var salesHMChart = new FusionCharts({
        type: 'heatmap',
        renderAt: 'chart-container',
        width: '550',
        height: '270',
        dataFormat: 'json',
        dataSource:  {
            "chart": {
                "caption": "Top Smartphone Ratings",
                "subcaption": "By Features",
                "xAxisName":"Features",
                "yAxisName":"Model",
                "showplotborder": "1",
                "xAxisLabelsOnTop": "1",
                "plottooltext":"<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;' >$rowLabel :</div>{br}Rating : <b>$dataValue</b>{br}$columnLabel : <b>$tllabel1</b>{br}<b>$trLabel</b>",
                "theme" : "carbon"
            },
            "rows": {
                "row": [
                    {
                        "id": "SGS5",
                        "label": "Samsung Galaxy S5"
                    },
                    {
                        "id": "HTC1M8",
                        "label": "HTC One (M8)"
                    },
                    {
                        "id": "IPHONES5",
                        "label": "Apple iPhone 5S"
                    },
                    {
                        "id": "LUMIA",
                        "label": "Nokia Lumia 1520"
                    }
                ]
            },
            "columns": {
                "column": [
                    {
                        "id": "processor",
                        "label": "Processor"
                    },
                    {
                        "id": "screen",
                        "label": "Screen Size"
                    },
                    {
                        "id": "price",
                        "label": "Price"
                    },
                    {
                        "id": "backup",
                        "label": "Battery Backup"
                    }
					,
                    {
                        "id": "cam",
                        "label": "Camera"
                    }
                ]
            },
            "dataset": [
                {
                    "data": [
                        {
                            "rowid": "SGS5",
                            "columnid": "processor",
                            "value": "8.7",
                            "tllabel1": "Quad Core 2.5 GHz",
                            "trlabel": "OS : Android 4.4 Kitkat"
                        },
                        {
                            "rowid": "SGS5",
                            "columnid": "screen",
                            "value": "8.5",
                            "tllabel1": "5.1 inch",
                            "trlabel": "AMOLED screen"
                        },
                        {
                            "rowid": "SGS5",
                            "columnid": "price",
                            "value": "9.3",
                            "tllabel1": "$600"
                        },
                        {
                            "rowid": "SGS5",
                            "columnid": "backup",
                            "value": "9.7",
                            "tllabel1": "29 Hrs",
                            "trlabel": "Battery : 2800 MAH"
                        },
						{
                            "rowid": "SGS5",
                            "columnid": "cam",
                            "value": "8",
                            "tllabel1": "16 MP",
                            "trlabel": "Front Camera : 2.1 MP"
                        },
                        {
                            "rowid": "HTC1M8",
                            "columnid": "processor",
                            "value": "9.2",
                            "tllabel1": "Quad Core 2.3 GHz",
                            "trlabel": "OS : Android 4.4 Kitkat"
                        },
                        {
                            "rowid": "HTC1M8",
                            "columnid": "screen",
                            "value": "8.3",
                            "tllabel1": "5 inch",
                            "trlabel": "LCD screen"
                        },
                        {
                            "rowid": "HTC1M8",
                            "columnid": "price",
                            "value": "7.3",
                            "tllabel1": "$600"
                        },
                        {
                            "rowid": "HTC1M8",
                            "columnid": "backup",
                            "value": "8.8",
                            "tllabel1": "20 Hrs",
                            "trlabel": "Battery : 2600 MAH"
                        },
						{
                            "rowid": "HTC1M8",
                            "columnid": "cam",
                            "value": "8.7",
                            "tllabel1": "4 MP",
                            "trlabel": "Front Camera : 5 MP"
                        },
                        {
                            "rowid": "IPHONES5",
                            "columnid": "processor",
                            "value": "9.1",
                            "tllabel1": "Dual Core",
                            "trlabel": "OS : iOS 7"
                        },
                        {
                            "rowid": "IPHONES5",
                            "columnid": "screen",
                            "value": "8.6",
                            "tllabel1": "4 inch",
                            "trlabel": "Retina LCD screen"
                        },
                        {
                            "rowid": "IPHONES5",
                            "columnid": "price",
                            "value": "7.2",
                            "tllabel1": "$649"
                        },
                        {
                            "rowid": "IPHONES5",
                            "columnid": "backup",
                            "value": "8.4",
                            "tllabel1": "10 Hrs",
                            "trlabel": "Battery : 1560 MAH"
                        },
						{
                            "rowid": "IPHONES5",
                            "columnid": "cam",
                            "value": "9.5",
                            "tllabel1": "8 MP",
                            "trlabel": "Front Camera : 1.2 MP"
                        },
                        {
                            "rowid": "LUMIA",
                            "columnid": "processor",
                            "value": "8.8",
                            "tllabel1": "Quad Core 2.2 GHz",
                            "trlabel": "OS: Windows Phone 8"
                        },
                        {
                            "rowid": "LUMIA",
                            "columnid": "screen",
                            "value": "9.1",
                            "tllabel1": "6 inch",
                            "trlabel": "LCD screen"
                        },
                        {
                            "rowid": "LUMIA",
                            "columnid": "price",
                            "value": "9.7",
                            "tllabel1": "$470"
                        },
                        {
                            "rowid": "LUMIA",
                            "columnid": "backup",
                            "value": "9.2",
                            "tllabel1": "27 Hrs",
                            "trlabel": "Battery : 3400 MAH"
                        },
                        {
                            "rowid": "LUMIA",
                            "columnid": "cam",
                            "value": "8.1",
                            "tllabel1": "20MP",
                            "trlabel": "Front Camera : 1.2 MP"
                        }
                    ]
                }
            ],
            "colorrange": {
                "gradient": "0",
                "minvalue": "0",
                "code": "E24B1A",
                "startlabel": "Poor",
                "endlabel": "Good",
                "color": [
                    {
                        "code": "E24B1A",
                        "minvalue": "1",
                        "maxvalue": "5",
                        "label": "Bad"
                    },
                    {
                        "code": "F6BC33",
                        "minvalue": "5",
                        "maxvalue": "8.5",
                        "label": "Average"
                    },
                    {
                        "code": "6DA81E",
                        "minvalue": "8.5",
                        "maxvalue": "10",
                        "label": "Good"
                    }
                ]
            }
        }
    });
    salesHMChart.render('chart-container');
});
</script>
</head>



<body>
      <div id='chart-container'>FusionCharts XT will load here!</div>
</body>
</html>

Please guide me why its create a problem if i use base tag of html. if i remove base tag that its working fine.

 

I need to know that it the alternative solution for resolving this problem.

 

I have also attached sample output of chart

 

Thanks in Advance

 

 

post-62941-0-17764100-1408361863_thumb.png

Share this post


Link to post
Share on other sites

Hey,

 

Welcome to FusionCharts Forum Post.

 

The base tag seems to altering the native methods of JS primitives like Objects and Functions. This is the reason behind the issue.

Also, usage of base tag along with most of the JavaScript libraries [not only FusionCharts library] can result in various compatibility issues.

Hope this helps.

Share this post


Link to post
Share on other sites

First of all Thanks for reply.

 

Is there any why to getting right result? because base tag will replace relative URL for my application. removing base tag will creates a problem for my application.

 

Please suggest me how will you implement such a way that both will running fine.

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