Black Bars - Svg Fill-Iri Invalid In Single Page Application

[solarworld]

In our application we should have bar charts with a gradient fill, but are only seeing black bars.

 

We have created a single page app with jQuery mobile. This means that all URL changes are performed by jQuery mobile, and content is loaded via AJAX. We are loading Fusion Charts initially (first "page", index.html), but are only displaying bar charts on subsequent pages (subsequent.html).

 

The problem is the Fill attribute of the rect element. It references index.html#id, but needs to reference subsequent.html#id. I have changed the URL in the Chrome Developer Tools and the bars are not longer black but have the correct gradient.

 

I assume FusionCharts determines the URL on initialisation (index.html), and not when displaying the chart (subsequent.html). Do you have any idea how to solve/work around this problem?

[Guest Sashibhusan]

Hi,

 

Welcome to FusionCharts Forum.

 

Could you please elaborate a bit more on your issue and provide and sample code along with the screen shot of your issue, to better look into your issue?

 

Awaiting your response.

[solarworld]

Thanks for your response Sashibhusan.

 

Please take a look at the issue at

 

http://m.suntrol-portal.com/en/index.html

 

Please note the file is index.html here. All three FusionCharts files are bundled into Suntrol.min.js. FusionCharts is loaded when index.html is loaded.

 

Now navigate to the charts via

 

Enter a search string like 5, click "Search"

Click the first result

Click "Output"

Click "Total results"

 

Please note the URL is now plantdatatotal.html. It has been changed by jQuery mobile, all content has been loaded via AJAX and injected into the DOM

 

You'll see black bars, they should be blue.

 

When I inspect the SVG, I find that the fill attribute of a black bar (the rect element nested within g.red-dataset-1) refers to index.html, not plantdatatotal.html.

 

You can now either:

- change the URL in the fill attribute to plantdatatotal.html

- Reload the application (now there is a real HTTP request for plantdatatotal.html, which then loads the same JS files as index.html)

 

To me it feels like a bug in FusionCharts. I assume when FusionCharts is loaded initially, it stores the URL and always uses it to reference the fill settings. When the URL in the address bar changes, the change is not reflected in FusionCharts.

 

Now I need your help: Can I set this URL in FusionCharts? I have consulted the API but have not found an appropriate method. This would be a workaround.

 

Thank you for looking into it, your help is highly appreciated.

[solarworld]

Sashibhusan: Do you have any idea what the problem is?

[solarworld]

Sashibhusan: I have taken a closer look myself, and it is indeed a FusionCharts bug.

 

In case FusionCharts renders with SVG, the attribute _url is set when the script is loaded.

 

 

d._url = /msie/i.test(navigator.userAgent) && !window.opera ? "" : window.location.href.replace(/#.*?$/, "");
 

 

 

when the URL changes, the change is not reflected in that closure.

 

I have created a workaround: I changed d._url into a function

 

 

d._url = function() {
            return /msie/i.test(navigator.userAgent) && !window.opera ? "" : window.location.href.replace(/#.*?$/, "");
}
 

 

 

and changed all occurences of d._url in that closure to d._url()

 

Where do I file this bug and append my patch?

[Guest Sumedh]

Hi,

 

Can you please let us know what FusionCharts version you have used?

[solarworld]

Hi Sumedh,

 

I have used the latest downloadable version, which happens to be 3.3.0-release.18739

[Guest Sumedh]

Hi,

 

We have tested the live URL that you have sent.

 

And chart is rendering fine in the browser, the data-plot color is not turning into black.

 

Please let us know your feedback.

[solarworld]

Hi Sumedh,

 

of course it is working, because I fixed it. :-p

 

Are you affiliated with FusionCharts? Who can I contact who is technically involved? It is definitely a bug and it should be fixed in a future version.

 

Thanks

[Guest Sumedh]

Hi,

 

It's glad to know, that you have managed to resolve your issue.

 

For this issue, you can drop in a mail at [email protected]

[bohms27]

I am having the same issue but it is only happening on the ipad. I do a search in all files for d._url but can't find it anywhere. 

 

Has this issue been fixed since this submission?

[solarworld]

bohms27: I had to work with the compressed copy of FusionCharts.HC.js, so the actual variable name might be different. I copied the contents of FusionCharts.HC.js and copied it into http://jsbeautifier.org/ for debugging. The code is around line 3450

 

 

    window.Raphael.svg && function (d) {
        var j = String, i = parseFloat, e = parseInt, l = Math, r = l.max, C = l.abs, M = l.pow, P = /[, ]+/, y = /AppleWebKit/.test(d._g.win.navigator.userAgent), S = d.eve, W = {block: "M5,0 0,2.5 5,5z", classic: "M5,0 0,2.5 5,5 3.5,3 3.5,2z", diamond: "M2.5,0 5,2.5 2.5,5 0,2.5z", open: "M6,1 1,3.5 6,6", oval: "M2.5,0A2.5,2.5,0,0,1,2.5,5 2.5,2.5,0,0,1,2.5,0z"}, aa = d._shapeRenderingAttrs = {speed: "optimizeSpeed", crisp: "crispEdges",
            precision: "geometricPrecision"}, U = {};
        d._url = function() {
            return /msie/i.test(navigator.userAgent) && !window.opera ? "" : window.location.href.replace(/#.*?$/, "");
        };
 

 

I have submitted a bug report and the bug is supposed to be fixed in a future release.

[bohms27]

Changing it into a function did not work for me. 

 

This issue was only occuring on an iPad or macbook with flash disabled on the macbook.

 

I did fix the issue however by completely replacing the 

 

c._url = /msie/i.test(navigator.userAgent) && !window.opera ? "" : window.location.href.replace(/#.*?$/, "");

 

With 

 

c._url = "" 

 

For some reason, it was putting in the referrer URL instead of the current page URL when it would go into this. If I removed the URL all together, it would color it correctly, therefore I just completely omitted this "test" to just have the url be a blank string. 

Edited May 17, 2013 by bohms27