Clever Geek Handbook

FusionCharts not displaying correctly if <base> tag is included in HTML header

I am using AngularJS

and FusionCharts

together in my web app. The upcoming AngularJS v1.3.0 release will require the tag <base>

in the HTML header to allow all relative links, no matter where the app is hosted in the site directory.

When including the tag <base>

with the latest version of FusionCharts (currently v3.4.0), 3D charts are not displayed as expected. For example, a 3D pie chart appears with rotating and clickable slices, and tooltips and color at the inner edges of the slices. However, the entire outer color is black.enter image description here

Excluding the tag <base>

makes the chart look and behave normally.

Does anyone know how to solve this? Unfortunately I don't have the source code, otherwise I hacked it myself.

Here's a link to a non-working jsFiddle: http://jsfiddle.net/aaronaudic/59Bmf/207

DECISION:

I originally got the right solution for @pankaj, because his solution to just add the following line on page load seems to fix the problem:

document.getElementsByTagName("base")[0].setAttribute("href", window.location.pathname+window.location.search);

However, this only works if the charts are on the home page (when the user goes directly to the charts page); when navigating to the page using something like ui-router

i was still seeing black.

Correct answer from @Shamasis . Adding the following to page load will fix the problem in the entire area:

eve.on('raphael.new', function () {
    this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, '');
});

His original caveat mentioned that the export functions can be difficult from the Cloud, and it can be (I am not exporting from the cloud). However, exporting locally, which can be observed in this jsFiddle, works great: http://jsfiddle.net/aaronaudic/Gs6sN/14

My base tag, at the top of the page, is simply:

<base href="/">
+4


source share


4 answers


The problem isn't mostly with FusionCharts - it's a common problem SVG

. In SVG

when the gradient color is applied to the element, it is actually "refers" to another element of the gradient on the page. This is somewhat similar to how links can link to hashtags using <a id="hash" />

on a page.

Now when you set page <base>

to page the links come with haywire. Gradients now refer to the element with the URL specified in the tag base

.

One way to fix this is to access the internal graphics renderer and set the url to the absolute location of the page. The way to do this is to access the object RedRaphael

in the kernel FusionCharts

and set a variable for it _url

.



The following code should do it for you.

eve.on('raphael.new', function () {
    this.raphael._url = this.raphael._g.win.location.href.replace(/#.*?$/, '');
});

The only caveat is that specifying an absolute URL as links to gradient elements does not work in some older browsers (I'm not exactly sure if it could be Safari 5 or FF 3.0). This can also have some negative impact when exporting FusionCharts as an image - relative URLs will be invalid when SVG is rasterized on FusionCharts cloud export servers.

+4


source


TL; DR: Install FusionCharts.options.SVGDefinitionURL='absolute';

in your JavaScript to fix this issue.

Detailed:

There is a FusionChart solution for this.



The problem you are talking about is with SVG, using relative references to things like gradients, incorrectly resolving due to the presence of the tag.

This issue is documented at https://github.com/angular/angular.js/issues/8934 . One possible solution would be to set $locationProvider.html5Mode({ enabled: true, requireBase: false });

and use absolute paths.

While this solves the problem, there is a FusionCharts solution by setting FusionCharts.options.SVGDefinitionURL='absolute';

in your JavaScript. ( http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-properties.html#FusionCharts.options-attributes-SVGDefinitionURL )

+2


source


I'm fixing this issue on Angular 7 and FusionCharts here, FusionCharts.options.SVGDefinitionURL='absolute'

didn't help much. Safari fixed this, but only on the first route with pie charts. Any further navigation will break again and now Chrome also doesn't work after navigation.

I looked at Raphael's workaround, but couldn't find a way to get the link eve

, so I decided to try removing baseHref

, which appears to be the "cause" of the problem.

Here's what I did:

  1. Removed base

    from index.html (left comments there so everyone knows why) and also put the icon as an absolute resource.
    <!-- Configuring deployUrl and APP_BASE_HREF in the main module, 
         see [[this stackoverflow link]] -->
    <!--<base href="/">-->
    ...
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
  1. deployUrl

    on angular.json

    (see this question )

I am using multiple projects layout here, so it was added along the way for me projects.my-project.architect.build.options.deployUrl

, should be easier in the default project.

    "deployUrl": "/",
  1. Configured my application module to inject the configuration for the router ( docs )
import { APP_BASE_HREF } from '@angular/common'
...

@NgModule({
    ...
    providers: [
        { provide: APP_BASE_HREF, useValue: '/' },
        ...
    ],
    ...
})

Everything looks good now, all browsers are working, it looks like Angular router is working fine.

+2


source


You can just set the absolute url in the base tag

document.getElementsByTagName("base")[0].setAttribute("href", window.location.pathname+window.location.search);

Here is the jsfiddle: http://jsfiddle.net/59Bmf/208/

In angular, you can bind url using property in controller.

$scope.absurl=$location.absUrl()

And use it inside the view

<base href="{{absurl}}">
0


source






More articles:


All Articles