Question about using JSON data retrieved from the server

[sangeetashah]

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:

[rousan]

@sangeetashah
please, can you provide us a working code snippet that would reproduce the same at our end?