Currently, I have some table data that utilizes Angular UI Bootstrap and Bootstrap classes. My goal is to display a bar graph in a separate tab which reflects the data shown in the table tab. However, when using a progress bar for this purpose, it does not indicate the expected value with a marker. You can view the desired bar design here. Is there a way to incorporate a distinct marker (such as a triangle or vertical line) to differentiate the values?
var app = angular.module('app', ['ui.bootstrap']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.data =
[{"transactionName":"Store Document GDR","actualVolume":251.0,"expectedVolume":500.0,"actualResponseTime":96.0,"expectedRT1":150.0,"expectedRT2":200.0},{"transactionName":"Submit Staging Doc","actualVolume":36.0,"expectedVolume":50.0,"actualResponseTime":86.0,"expectedRT1":200.0,"expectedRT2":250.0},{"transactionName":"Get Documents","actualVolume":7.0,"expectedVolume":50.0,"actualResponseTime":1293.0,"expectedRT1":1300.0,"expectedRT2":1500.0}];
}]);<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller='MainCtrl'>
<div class="panel-body">
<uib-tabset>
<uib-tab>
<uib-tab-heading><b> Table </b></uib-tab-heading>
<div class="col-md-12">
<table class="table table-bordered table-striped text-center" style="font-size:130%;font-weight: bold;" >
<thead>
<tr bgcolor="#00008b" ; style="color: #bce8f1">
<th class ="text-center" rowspan="2" style="vertical-align:middle">Transaction Name</th>
<th class ="text-center" colspan="2">Volume</th>
</tr>
<tr>
<td class ="text-center"><b>Actual</b></td>
<td class ="text-center"><b>Expected</b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in data">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td>{{"0 - "}}{{record.expectedVolume}}</td>
</tr>
</tbody>
</table>
</div>
</uib-tab>
<uib-tab>
<uib-tab-heading><b> Graph </b></uib-tab-heading>
<div class="col-md-12">
<table class="table table-bordered table-striped text-center" style="font-size:130%;font-weight: bold;" >
<thead>
<tr bgcolor="#00008b" ; style="color: #bce8f1">
<th class ="text-center" style="vertical-align:middle">Transaction Name</th>
<th class ="text-center">Graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in data">
<td>{{record.transactionName}}</td>
<td>
</tr>
</tbody>
</table>
</div>
</uib-tab>
</uib-tabset>
</div>
</body>
</html>