viral069 Report post Posted August 18, 2014 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 Share this post Link to post Share on other sites
Swarnam Report post Posted August 19, 2014 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
viral069 Report post Posted August 19, 2014 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
Swarnam Report post Posted August 19, 2014 Hi, Can you drop a mail to "[email protected]" by quoting the forum post? Share this post Link to post Share on other sites
