Angular fusion charts not loading

[shashanks]

Hi I am using angular js and trying to load fusioncharts. Back-end is returning xml, as it is a legacy system. It works on there with the newest chart version. I am trying to query that api and set charts in the angular js site. 

 

This is my html: 

<div fc-chart 

  fc-data-format="xmlurl"

 fc-width="600" 

 fc-height="400"

 fc-type="column2d"

 fc-datasource="{{ctrl.xmlData}}"

> </div>

 

this is in my controller: 

self.xmlData = $http({

 url: "http://legacySite.com",

 method: 'GET',

 transformResponse: [function (data) {

     console.log(data);

     return data;

 }]

});

 

With the console.log, i can see that the xml is returning exactly the same as it does on the legacy site. I do get an error in the console that says GET http://localhost:3000/%7B%7D 404 (Not Found). My local dev server is running on port 3000. I am using latest fusioncharts, and angular-fusioncharts wrapper. I was able to load charts from static data and examples, but the xml url is not loading. The chart shows 'error in loading data'.

 

Thanks

Edited March 4, 2015 by shashanks

[shashanks]

I changed fc-data-format to xml, rather than xmlurl, and now the chart just shows 'invalid data'.

 

Anyway, what is the best way, in angular to set the chart data based on an api call?
 

Thanks

Edited March 4, 2015 by shashanks

[Moonmi Sonowal]

Hi,

 

We are looking into the issue of dataScource as "JsonUrl". Meanwhile please continue with the  fc-data-format to xml method.

 

Regarding "invalid data" message, this message shows when the JSON/XML is malformed.

 

Please make sure that the JSON/XML is formatted according to FusionCharts data format for the rendered chart.

Please refer the data format for column2d chart from the documentation : http://docs.fusioncharts.com/tutorial-attr-column2d.html

 

Hope this would resolve your issue.

 

Regarding any update of "JSONUrl" in AngularJS we will keep you posted. 

 

Thanks.

[shashanks]

thanks, I'm not trying to return JSON, my backend is in XML. So i don't need the jsonurl, unless that means returning xml. And the reason I mentioned the legacy system is because these charts, the exact xml i'm returning, renders a chart.

[Moonmi Sonowal]

Hi,

 

With regards to dataSource as JSON/XML url we are looking into both "JSONUrl" and "XMLUrl" and will keep you posted about any updates.

 

Until then your patience and support is appreciated.

 

Thanks. 

[shashanks]

Do you think this will be resolved in the next week? It is important, thanks

[shashanks]

Hello?

[Moonmi Sonowal]

Hi,

 

Since, I think its a bit urgent for you could you please download the working sample from the drop box link below :

https://www.dropbox.com/s/kex2jed5qwezd1u/angular_test_old.rar?dl=0

 

Please note that the file uses our older version of Angular JS files. So we request you to copy the required angular JS files in the sample and use them for the time being.

 

Apologies for the delayed response.

 

Thanks.

 

[Moonmi Sonowal]

Hi,

 

The issue has been fixed internally.

 

You can now download the plugin from our extensions page from the link:  http://www.fusioncharts.com/angularjs-charts/ 

 

Please download the demo sample from the drop box link : https://www.dropbox.com/s/q29xvww4n9cp7tv/angular_New_Test.rar?dl=0

 

Hope this helps. Drop us a mail if you require any further assistance.

 

Thanks.

[shashanks]

thanks, but the plugin link goes to a 404 page

[Moonmi Sonowal]

Hi,

 

Could you please check the plugin link below?

 

http://www.fusioncharts.com/angularjs-charts/

 

Hope this helps.

[shashanks]

Thanks,

 

How do i get my chart to be transparent? This is my json: 

{

"caption": self.fin.value,

'bgAlpha': '0',

'legendBgAlpha': '0',

'canvasbgAlpha': '0',

'legendBorderAlpha': '0',

'palettecolors': '#5bc0de,#1aaf5d,#f2c500',

'useplotgradientcolor': '0',

'showcanvasborder': '0',

'showColumnShadow': '0',

'showBorder':'0',

'plotborderalpha': '10',

'containerBackgroundOpacity': '0'

}

[Moonmi Sonowal]

Hi,

 

As of now this feature is not added to AngularJS plugin. However, we are looking into its feasibility and keep you posted about the updates.

 

Thanks.