Sign in to follow this  
whistler

Chart resize issue when loading with AngualrJS

Recommended Posts

Hi,

I'm new to the forum and the fusion charts.

 

I'm having a display issue with Fusisioncharts. I'm building a dashboard with set of charts, using ASP.Net MVC and AngluarJS. I'm using your AngularJS plugin to add charts to the dashboard.

 

On my dashboard I have few tabs and on each tab I display set of charts. 

Everything works great on the first tab, but when I switch to other tab the charts are not in correct size, but after a second they resize to the correct size. When I visit all the tabs, they stay like they should. The same thing happen, when the data of the chart change and I switch the tab, it resize again. How can I avoid this?

 

Tab 1:

jkbris.png

 

Tab 2:

2mpivs2.png

 

 

My html code:

<div ng-repeat="t in myListOfTabs" ng-show="isSet(t.Id)" class="row sortable">
        <div class="col-md-6" ng-repeat="chart in myListOfCharts2[t.Id]">
            <div class="portlet portlet-sortable light">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="icon-bar-chart font-blue-madison"> Bar Charts</i>
                    </div>
                    <div class="tools">
                        <a href="javascript:;" class="collapse" data-original-title="" title=""></a>
                        <a href="#portlet-config" data-toggle="modal" class="config" data-original-title="" title="">
                        </a>
                        <a href="javascript:;" class="reload" data-original-title="" title="">
                        </a>
                        <a href="javascript:;" class="fullscreen" data-original-title="" title="">
                        </a>
                        <a href="javascript:;" class="remove" data-original-title="" title="">
                        </a>
                    </div>
                </div>
                <div class="portlet-body">
                    <fusioncharts width="100%"
                                  height="300"
                                  type="MSCombi2D"
                                  datasource="{{chartData[chart]}}"></fusioncharts>
                </div>
            </div>
        </div>
</div>

Many thanks 

 

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