Sign in to follow this  
shashanks

Angular fusion charts not loading

Recommended Posts

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({
 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 by shashanks

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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'
}

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
Sign in to follow this