solarworld

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

Recommended Posts

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by bohms27

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