-
Notifications
You must be signed in to change notification settings - Fork 19
Expand file tree
/
Copy pathHorizontalBar.html
More file actions
142 lines (122 loc) · 6.3 KB
/
HorizontalBar.html
File metadata and controls
142 lines (122 loc) · 6.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html ng-app="appMain">
<head>
<title>scrolling bar mockup</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">
<style>
html,body{margin:0;padding:10px;}
div.bar{ border:1px solid #300; }
div.barDays{ width:2px; background-color:#600; }
div.barHours{ width:4px; background-color:#900; }
div.barMins{ width: 6px; background-color:#A00; }
div.barSecs{ width:8px; background-color:#F00; }
div.color1{ background-color:#F00; }
div.color2{ background-color:#A00; }
div.color3{ background-color:#900; }
div.color4{ background-color:#600; }
</style>
</head>
<body ng-controller='controllerMain'>
<h2> Experimenting with bar charts </h2>
Bar charts (aka histograms) are one of the most common charts in use. I've seen a lot of things added to them.
<ul>
<li> added series with clors that designate the series </li>
<li> bar stacks for divisions of the total</li>
<li> threshold lines or backgrounds that designate something significant if a bar is above or below it</li>
<li> bar decorations that represent its data or how it's changed</li>
</ul>
What I haven't seen much of is :
<ul>
<li>working with the width of the bar</li>
<li>having different horizontal sections</li>
<li>color brightness or other variations that have meaning beyond distinct data set</li>
<li>selective movement</li>
</ul>
The improvements Im setting out to make are:
<ul>
<li>adjust for streaming data where needed</li>
<li>show most relevant data most prominently</li>
<li>show historical comparison data but not in a way that takes up the same amount of room</li>
<li>accomplish the abive with an economy of space</li>
</ul>
My 1st exploration into this is to layout different timescales on the same chart, but give them variable widths and colors based on relevance
the seconds adjust every second and each other time scale section adjusts as that timeframe passes. By putting them all ont he same line they are much easier to compare. Because values for a day are going to be much larger than values for a second everything is normalized to average per second. In general this works well. It's easy to both compare and distinguish the different time scales.
<h2> fixed width bars based on age/relevance, showing 7 days, 24 hours, 60 minutes, 60 seconds </h2>
<div layout="row" layout-align="begin end">
<div ng-repeat="intVal in arrDays" class="bar barDays" ng-style="{'height':intVal+'px'}"></div>
<div ng-repeat="intVal in arrHours" class="bar barHours" ng-style="{'height':intVal+'px'}"></div>
<div ng-repeat="intVal in arrMinutes" class="bar barMins" ng-style="{'height':intVal+'px'}"></div>
<div ng-repeat="intVal in arrSeconds" class="bar barSecs" ng-style="{'height':intVal+'px'}"></div>
</div>
What I don't like about the above is that the width of the chart is based on the number of elements which will be largely based on how much history there is. While this might be accurate from some peoples reading of the chart it would not look very good when it comes to layout and alignments. In some cases it will overflow when there is not enough space, in other cases it would look choppy whene there isnt much data. Overall the variable widths of several metrics would look offputting.
So in the next version there are distinct percentages of the overall width given to each timescale. however many records there are within that timescale will fill that space. This will definitely allow for better alignment overall. the tradeoff is that the bar widths will no longer reflect the age/relevance. I think it still works with the diminishing brightness and smaler sections given.
</br>
<h2> fixed width sections, sections are smaller for older records</h2>
<div layout="row" layout-align="begin">
<div layout="column" layout-align="end" flex="10">
<div layout="row" layout-align="begin end" flex>
<div ng-repeat="intVal in arrDays" class="bar color4" ng-style="{'height':intVal+'px'}" title="{{intVal}}" flex></div>
</div>
<div> Days </div>
</div>
<div layout="column" layout-align="end" flex="15">
<div layout="row" layout-align="begin end" flex>
<div ng-repeat="intVal in arrHours" class="bar color3" ng-style="{'height':intVal+'px'}" title="{{intVal}}" flex></div>
</div>
<div> Hours </div>
</div>
<div layout="column" layout-align="end" flex="25">
<div layout="row" layout-align="begin end" flex>
<div ng-repeat="intVal in arrMinutes" class="bar color2" ng-style="{'height':intVal+'px'}" title="{{intVal}}" flex></div>
</div>
<div> Minutes </div>
</div>
<div layout="column" layout-align="end" flex="60">
<div layout="row" layout-align="begin end" flex>
<div ng-repeat="intVal in arrSeconds" class="bar color1" ng-style="{'height':intVal+'px'}" title="{{intVal}}" flex></div>
</div>
<div> Seconds </div>
</div>
</div>
The other decorations can always be added to this concept. As appropriate and helpful.
<br/></br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script>
<script>
var app = angular.module('appMain', ['ngMaterial']).config(function($mdThemingProvider) { $mdThemingProvider.theme('default').dark(); });
app.controller('controllerMain', function($scope) {
$scope.arrDays=[]; $scope.arrHours=[]; $scope.arrMinutes=[]; $scope.arrSeconds=[];
var i=0;
for(i=0;i<60;i++){
var intVal=Math.random() * (100 - 1) + 1;
$scope.arrMinutes.push(intVal);
var intVal=Math.random() * (100 - 1) + 1;
$scope.arrSeconds.push(intVal);
if(i<24){
var intVal=Math.random() * (100 - 1) + 1;
$scope.arrHours.push(intVal);
}
if(i<7){
var intVal=Math.random() * (100 - 1) + 1;
$scope.arrDays.push(intVal);
}
}
//repeating stuff
var objRenderInterval = setInterval(function(){
intVal=Math.random() * (100 - 1) + 1;
$scope.arrSeconds.push(intVal);
$scope.arrSeconds.shift();
if(i%60===0){
var intVal=Math.random() * (100 - 1) + 1;
$scope.arrMinutes.push(intVal);
$scope.arrMinutes.shift();
}
i++;
$scope.$evalAsync();
},1000);
});
</script>
</body>
</html>