Description
Hi,
I am using the fusion charts angular plugin and retrieving data from the server using AJAX. Are there any examples on how to do this for multiple graphs. I have used static data and it works but having some issues with the dynamic data.
I have a datasource array in my scope that stores the chart data retrieved from the server and then in the html I use ng-repeat to iterate through this array and pass the data to the fusioncharts directive.
For chrome it seems like the data is being displayed - but on firefox the x-axis labels don't show up. They show up when I use a static datasource but not when I use the data in the dataSource array. The concerning this is that it's only the x-axis labels - the dataset and attributes of the chart seem to be picked up, even the tooltip text from the categories array get picker up for the labels...just not the x-axis labels. Either firefox doesn't like something or doesn't seem to be applying the x-axis labels using data-binding. Is there a way to manually redraw the table from the controller??
Maybe my usage is not correct - I cannot directly specify the json url in the html because I have multiple graphs that are configurable in terms of the data retrieved....
Here is some of my code:
Here's the code in the HTML file:
<div class="col-xs-12 col-sm-6" ng-repeat="ds in dataSource">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-green">
<span class="caption-subject bold graph-name">{{ds.name}}</span>
</div>
</div>
<div class="portlet-body">
<fusioncharts width="100%"
height="500"
dataFormat="json"
type="{{ds.type}}"
dataSource="{{ ds }}">
</fusioncharts>
</div>
</div>
</div>
....
Javascript code:
$scope.dataSource[idx].chart = response.chart.chart;
$scope.dataSource[idx].chart["labelDisplay"] = "rotate";
$scope.dataSource[idx].chart["slantLabels"] = "1";
$scope.dataSource[idx].categories = response.chart.categories;
$scope.dataSource[idx].dataset = response.chart.dataset;
JSON from Server:
{"chart":
{"chart":{"bgAlpha":"0,0","showBorder":"0","animation":"0","showValues":"0","rotateNames":"1","baseFont":"Verdana","baseFontSize":"9","baseFontColor":"474747","divlinecolor":"cccccc","showAlternateHGridColor":"1","alternateHGridColor":"f0f8ff","hoverCapBgColor":"ffffcc","hoverCapBorderColor":"cccccc","numVDivLines":"9","formatNumberScale":"0","vDivlinecolor":"cccccc","showAlternateVGridColor":"1","alternateVGridColor":"e0e8ff"},
"categories":[{"category":[{"label":"08 Jan","showLabel":1,"toolText":"Sun, 08 Jan 2017"},{"label":"09 Jan","showLabel":0,"toolText":"Mon, 09 Jan 2017"},{"label":"10 Jan","showLabel":0,"toolText":"Tue, 10 Jan 2017"},{"label":"11 Jan","showLabel":1,"toolText":"Wed, 11 Jan 2017"},{"label":"12 Jan","showLabel":0,"toolText":"Thu, 12 Jan 2017"},{"label":"13 Jan","showLabel":0,"toolText":"Fri, 13 Jan 2017"},{"label":"14 Jan","showLabel":1,"toolText":"Sat, 14 Jan 2017"},{"label":"15 Jan","showLabel":0,"toolText":"Sun, 15 Jan 2017"},{"label":"16 Jan","showLabel":0,"toolText":"Mon, 16 Jan 2017"},{"label":"17 Jan","showLabel":1,"toolText":"Tue, 17 Jan 2017"},{"label":"18 Jan","showLabel":0,"toolText":"Wed, 18 Jan 2017"},{"label":"19 Jan","showLabel":0,"toolText":"Thu, 19 Jan 2017"},{"label":"20 Jan","showLabel":1,"toolText":"Fri, 20 Jan 2017"},{"label":"21 Jan","showLabel":0,"toolText":"Sat, 21 Jan 2017"},{"label":"22 Jan","showLabel":0,"toolText":"Sun, 22 Jan 2017"},{"label":"23 Jan","showLabel":1,"toolText":"Mon, 23 Jan 2017"},{"label":"24 Jan","showLabel":0,"toolText":"Tue, 24 Jan 2017"},{"label":"25 Jan","showLabel":0,"toolText":"Wed, 25 Jan 2017"},{"label":"26 Jan","showLabel":1,"toolText":"Thu, 26 Jan 2017"},{"label":"27 Jan","showLabel":0,"toolText":"Fri, 27 Jan 2017"},{"label":"28 Jan","showLabel":0,"toolText":"Sat, 28 Jan 2017"},{"label":"29 Jan","showLabel":1,"toolText":"Sun, 29 Jan 2017"},{"label":"30 Jan","showLabel":0,"toolText":"Mon, 30 Jan 2017"},{"label":"31 Jan","showLabel":0,"toolText":"Tue, 31 Jan 2017"},{"label":"01 Feb","showLabel":1,"toolText":"Wed, 01 Feb 2017"},{"label":"02 Feb","showLabel":0,"toolText":"Thu, 02 Feb 2017"},{"label":"03 Feb","showLabel":0,"toolText":"Fri, 03 Feb 2017"},{"label":"04 Feb","showLabel":1,"toolText":"Sat, 04 Feb 2017"},{"label":"05 Feb","showLabel":0,"toolText":"Sun, 05 Feb 2017"},{"label":"06 Feb","showLabel":0,"toolText":"Mon, 06 Feb 2017"},{"label":"07 Feb","showLabel":1,"toolText":"Tue, 07 Feb 2017"}]}],
"dataset":[{"seriesName":"Success (Total)","color":"E8141B","data":[{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"}]},{"seriesName":"Failed (Total)","color":"006FBE","data":[{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"3"},{"value":"0"},{"value":"0"},{"value":"0"},{"value":"3"}]}]},
"chartType":"StackedColumn2D"
}
Chrome screenshot:
Firefox screenshot:
