sangeeta

Firefox not displaying x-axis labels

Recommended Posts

Hi,

   I am using fusioncharts v 3.11.3 with the Angular plugin. I have been trying to address this issue all day with no luck!!!

 

I have upto 10 graphs on a page and I issues AJAX requests to get the graph data in JSON format. I am using multi-series graphs and the server is sending back the categories and dataset in the response.

 

The chart seems to be rendering fine in Chrome, but the x-axis labels don't show up in firefox. The interesting thing is that the tooltip and showData flag in the category objects are honored in Firefox but no label text is rendered.

 

I think my usage is correct and the versions are all compatible because when I use the data source sample from the Angular fusion charts website - it renders with the x-axis label in firefox. So something is not exactly as expected in the data I am passing to fusion charts or the angular plugin.

 

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 class="portlet-body">
                    <fusioncharts width="100%"
                                  height="500"
                                  dataFormat="json"
                                  type="{{ds.type}}"
                                  dataSource="{{ ds }}">
                    </fusioncharts>
                </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"},{"label":"09 Jan"},{"label":"10 Jan"},{"label":"11 Jan"},{"label":"12 Jan"},{"label":"13 Jan"},{"label":"14 Jan"},{"label":"15 Jan"},{"label":"16 Jan"},{"label":"17 Jan"},{"label":"18 Jan"},{"label":"19 Jan"},{"label":"20 Jan"},{"label":"21 Jan"},{"label":"22 Jan"},{"label":"23 Jan"},{"label":"24 Jan"},{"label":"25 Jan"},{"label":"26 Jan"},{"label":"27 Jan"},{"label":"28 Jan"},{"label":"29 Jan"},{"label":"30 Jan"},{"label":"31 Jan"},{"label":"01 Feb"},{"label":"02 Feb"},{"label":"03 Feb"},{"label":"04 Feb"},{"label":"05 Feb"},{"label":"06 Feb"},{"label":"07 Feb"}]}],
 
"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"}}
 
Any help with this issue is appreciated since I've been beating my head all day trying to resolve this issue!
 

 

Share this post


Link to post
Share on other sites

Hi Sangeeta,

 

After going through your code I came to the conclusion that you want to render multiple charts using FusionCharts and by integrating external JSON file through AJAX call.

 

Please check the attached sample here with this response showcasing multiple charts(stackedcolumn2d,stackedarea2d) with your JSON data(for stackedcolumn2d)

 

The sample consists of one html view one controller(app.js) and two json files and AJAX call has been implemented with the help of $http.get() method and the chart data source has been restructured after fetching data from JSON files.

 

Please note for rendering multiple charts you need to declare multiple FusionCharts instances and the sample is rendering charts both in Google Chrome as well as in Mozilla Firefox.

 

Hope this will help.

 

Thanks

 

Soumya sankar Dutta

AjaxCallDemo.zip

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