<!DOCTYPE html>
<html ng-app="chart">
<head>
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="chart.service.js"></script>
<script src="chart.js"></script>
</head>
<body>
<chart></chart>
</body>
</html>
angular.module('chart', [
'ng-fusioncharts',
'chartServices'
])
.controller('chartController', function($scope, chartService) {
var vm = this;
vm.toggleShowLabels = function toggleShowLabels() {
vm.newChart.dataSource.chart.showLabels = !vm.newChart.dataSource.chart.showLabels;
}
function renderChart() {
vm.newChart = chartService.setUpFusionCharts();
};
renderChart();
})
.directive('chart', function() {
return {
restrict: 'E',
replace: true,
scope: {},
controller: 'chartController',
controllerAs: 'chartCtrl',
templateUrl: './chart.html'
};
});
.chart-container {
width: 350px;
height: 350px;
margin: 25px auto;
text-align: center;
border: 2px solid black;
border-radius: 2px;
}
<div class="chart-container">
<div fusioncharts
width="{{:: chartCtrl.newChart.width}}"
height="{{:: chartCtrl.newChart.height}}"
type="{{chartCtrl.newChart.type}}"
datasource="{{chartCtrl.newChart.dataSource}}"
ng-if="chartCtrl.newChart.dataSource"
></div>
<button ng-click="chartCtrl.toggleShowLabels()">toggle showLabels</button>
</div>
angular.module('chartServices', [])
.factory('chartService', chartFactory);
function chartFactory() {
return {
setUpFusionCharts: setUpFusionCharts
};
function setUpFusionCharts() {
return {
type: 'bar2d',
renderAt: 'chart-container',
width: '98%',
height:'98%',
dataFormat: 'json',
dataSource: {
chart: {
animationDuration: 0.5,
baseFont: "Roboto",
baseFontColor: "000000",
bgcolor: "ffffff",
canvasBorderThickness: 0,
canvasPadding: 5,
divLineColor: "757575",
inthousandseparator: ",",
manageLabelOverflow: 1,
maxLabelWidthPercent: 25,
paletteColors: "#db0a5b,#FF2D00,#ff8366,#ff6d00,#f7ca18,#199451,#87d37c,#7196ff,#00cfff,#663399,#730046,#FF7BAC",
plotBorderColor: "ffffff",
rotateValues: "1",
showAlternateHGridColor: "0",
showAlternateVGridColor: "0",
showBorder: 0,
showLabels: 1,
showLegend: "1",
showValues: true,
showYAxisValues: "1",
showshadow: 0,
toolTipBgColor: "ffffff",
toolTipBorderColor: "ffffff",
use3dlighting: 0,
useEllipsesWhenOverflow: 1,
usePlotGradientColor: "0",
xAxisName: "Pay Rule",
yAxisName: "Daily Hours"
},
data: [
{
"label":"Full Time",
"value":"150.00",
"displayvalue":"150:00",
"toolText":"Full Time, 150:00",
"drillDownValue":"Full Time"
},
{
"label":"Manufacturing Intern",
"value":"144.00",
"displayvalue":"144:00",
"toolText":"Manufacturing Intern, 144:00",
"drillDownValue":"Manufacturing Intern"
},
{
"label":"Manufacturing Bi-Weekly PFS",
"value":"16.00",
"displayvalue":"16:00",
"toolText":"Manufacturing Bi-Weekly PFS, 16:00",
"drillDownValue":"Manufacturing Bi-Weekly PFS"
},
{
"label":"Manufacturing Weekly",
"value":"8.00",
"displayvalue":"8:00",
"toolText":"Manufacturing Weekly, 8:00",
"drillDownValue":"Manufacturing Weekly"
},
{
"label":"Manufacturing Bi-Weekly",
"value":"8.00",
"displayvalue":"8:00",
"toolText":"Manufacturing Bi-Weekly, 8:00",
"drillDownValue":"Manufacturing Bi-Weekly"
},
{
"label":"Manufacturing Bi-Weekly PartTime",
"value":"16.00",
"displayvalue":"16:00",
"toolText":"Manufacturing Bi-Weekly PartTime, 16:00",
"drillDownValue":"Manufacturing Bi-Weekly PartTime"
},
{
"label":"US FLSA Weekly",
"value":"32.00",
"displayvalue":"32:00",
"toolText":"US FLSA Weekly, 32:00",
"drillDownValue":"US FLSA Weekly"
},
{
"label":"Manufacturing Bi-Weekly Project",
"value":"8.00",
"displayvalue":"8:00",
"toolText":"Manufacturing Bi-Weekly Project, 8:00",
"drillDownValue":"Manufacturing Bi-Weekly Project"
},
{
"label":"Manufacturing Clerk",
"value":"32.00",
"displayvalue":"32:00",
"toolText":"Manufacturing Clerk, 32:00",
"drillDownValue":"Manufacturing Clerk"
}
]
}
};
}
}