My app features multiple charts using the highcharts plugin and directive, as well as tables utilizing ng-grid. An issue arises when transitioning from the homepage to a page with a chart or table directly; the elements do not adhere to their designated frame widths and expand to 1900px (refer to this image: https://i.sstatic.net/1NKhG.png). Upon refreshing the page once, everything fits within its frame properly. What could be causing this peculiar behavior?
Provided below is some code from one of the problematic pages:
<div class="col-md-7" id="chart">
<div class="panel panel-default">
<div class="panel-heading" ng-init="isCollapsed = false">
<div class="panel-title">
Top 8 Drugs by 2013 Revenue
<button class="pull-right btn btn-xs" ng-click="isCollapsed = !isCollapsed"><span
class="text-center"
ng-class="{'fa fa-plus': isCollapsed, 'fa fa-minus': !isCollapsed}"></span></button>
</div>
</div>
<div class="panel-body" collapse="isCollapsed" ng-if="Revenues[0].evaluate_productRevenue2013 > 0">
<div class="col-xs-12" ng-cloak>
<highchart id="company-chart-overview-1" config="chartConfig"></highchart>
</div>
<div class="row-fluid col-xs-offset-5">
<div class='my-legend'>
<div class='legend-title'>RxScore Safety Indicator </div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#008000;'></span>Low</li>
<li><span style='background:#FFFF00;'></span></li>
<li><span style='background:#E69628;'></span></li>
<li><span style='background:#FF0004;'></span>High</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
The configuration for Highcharts is as follows:
exports.getOverviewChart = function (RevenueSlices) { var companyName;
var Series = [
{name: 'Revenue ($MM USD)', data: [], type: 'column'}
];
var cCategories = [];
var colors = ['green', 'yellow', '#CD7D0F', 'red'];
var thresholds = [47.17, 55.81, 61.83, 82.83];
var cleanSlices = _.reject(RevenueSlices, function (sl) {
return sl.BrandName === "Unknown";
});
cleanSlices = _.filter(cleanSlices, function (cs) {
return Math.abs(cs.evaluate_productRevenue2013) > 0;
});
angular.forEach(cleanSlices, function (o) {
var s = Math.abs(o.metric_rxscore);
var color;
if (s >= thresholds[2]) {
color = colors[3];
} else if (s >= thresholds[1]) {
color = colors[2];
} else if (s >= thresholds[0]) {
color = colors[1];
} else if (s >= 1) {
color = colors[0];
} else {
color = 'lightgrey';
}
companyName = o.parent;
cCategories.push(o.BrandName);
Series[0].data.push({name: o.BrandName, color: color, y: Math.abs(o.evaluate_productRevenue2013)});
});
var overviewChart = {
options: {
chart: {
type: 'StockChart'
}, legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
stacking: ''
}
}
},
size: {
// width: 573,
height: 380
},
xAxis: {
title: {
text: 'Drug'
},
categories: cCategories
},
yAxis: {
title: {
text: '2013 Revenue'
},
labels: {
format: '{value} $MM USD'
}
}, credits: {
enabled: false
},
series: Series,
title: {
style: { 'display': 'none' }
}
};
return overviewChart;
};
Options for ng-grid:
var tmp = companyChartService.getOverviewChart(Revenues.slice(0, 8));
$scope.colDefs = companyGridService.getColDefs();
$scope.ToolTipper = tooltipService.getTooltip;
$scope.colDefs = companyGridService.getColDefs();
$scope.myData = Revenues;
$scope.gridOptions = {
data: 'myData',
enableSorting: true,
enableColumnResize: true,
showGroupPanel: true,
enableCellGrouping: true,
showColumnMenu: true,
enablePinning: true,
showFilter: true,
jqueryUITheme: true,
//cellClass: 'drugName',
columnDefs: 'colDefs'
//rowClass: 'drugName'
};