Skip to content

Commit

Permalink
Merge pull request #3 from Packet-Clearing-House/enable-classes
Browse files Browse the repository at this point in the history 
enable classes, bump all version to 1.2, add git hub pages
  • Loading branch information
Ths2-9Y-LqJt6 authored Apr 9, 2020
2 parents b316845 + 65628dc commit ec317b3
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 16 deletions.
54 changes: 46 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@
Happy Histogram (HH) is a simple JavaScript library for generating a
client side histogram showing activity across
a year. This JavaScript
library uses no 3rd party libraries (eg D3 or jQuery) and is barely over 900 _bytes_ in size.
library uses no 3rd party libraries (eg D3 or jQuery) and is barely over 1000 _bytes_ in size.
The DOM elements used are only
HTML (floating DIVs) and not any fancy Canvas or SVG. The final histogram is very
fast to render and is 100% responsive, looking good on both mobile
and desktop browsers.

## Example

PCH's [Calendar of Internet Governance Meetings](https://pch.net/meetings). This was
the inception page for this library:
This repo includes an example page which [you can view](https://packet-clearing-house.github.io/Happy-Histogram/example/).

As well, see PCH's [Calendar of Internet Governance Meetings](https://pch.net/meetings). This was
the inception page for this library and looks like this:

[![](./example/hh.png)](https://pch.net/meetings)

Expand All @@ -40,20 +42,55 @@ So, I decided to roll my own!
<link rel="stylesheet" href="HappyHistogram.min.css" />
```
1. Define the HTML where you want to render your histogram (must be an ID): ``<div id="histogram"></div>``
1. Declare your data set as a multi-dimentsional array, with one sub-array for each year.
1. Declare your data set as a multi-dimentsional array, with one sub-array for each month.

```
var Year = [
[1,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,1,1,2,4,2,1,1,0,7,9,7,3,2,1,1],
...
[1,1,0,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
[1,0,0,0,0,0,0,0,0,0,0,1,0,1,0],
[2,0,0,0,0,0,0,0,0,0,0,1,0,1,0],
[1,0,0,0,0,0,0,0,0,0,0,1,0,1,0],
[1,0,0,0,0,0,0,0,0,0,0,1,0,1,0],
[3,0,0,0,0,0,2,0,0,0,0,1,0,1,0],
[1,0,0,0,0,0,0,0,0,0,0,1,0,1,0],
[1,0,0,0,0,0,0,0,0,0,0,1,0,1,0],
[4,0,0,0,1,0,0,0,0,0,0,1,0,1,0],
[1,0,0,0,0,0,0,0,0,0,0,1,0,1,0],
[1,0,0,0,0,0,0,0,0,0,0,1,0,1,0],
[3,0,0,0,0,2,0,0,0,0,0,1,0,1,0],
[1,0,0,0,0,1,0,0,0,0,0,0,0,1,0]
];
```

Careful! Garbage in, garbage out - HH will not validate any values, only accepts
ints (no floats!) and will not pad for missing or ``NULL`` days.
ints or floats and will not pad for missing or ``NULL`` days.
1. Call HH specifying target, data and CSS color: ``HappyHistogram('histogram', Year);`` . Your target must be an ID, not a class.

### Per Value Class

If you want to be able to have different colors for different values, you can uses classes.
Instead of passing in a value, you pass in an array. The zeroth element is the value
and the first element is the class name. To get multiple class names, pass in the first element
as a string with spaces between each class:

```
var Year = [
[[1,'foo'],[2,'bar'],[3,'bash']],
[[4,'bar'],[2,'bar'],[3,'bash']],
[[2,'bash'],[2,'bar'],[3,'bash']],
[[2,'bash'],[2,'bash'],[3,'bash']],
[[2,'foo'],[2,'foo'],[3,'foo']],
[[2,'bash'],[2,'foo'],[3,'foo']],
[[2,'foo'],[2,'bash'],[3,'foo']],
[[3,'bar'],[2,'foo'],[3,'bash']],
[[2,'foo'],[5,'bar extra-secret-class'],[3,'foo']],
[[2,'foo'],[2,'foo'],[3,'foo']],
[[4,'foo'],[3,'foo'],[3,'bar']],
[[2,'bar'],[2,'foo'],[3,'foo']],
];
```

Note that HH does some limited validation to ensure that array elements are correctly populated.

### Advanced

**Bar Color** - Pass in the CSS value when you
Expand All @@ -79,6 +116,7 @@ MIT
## Version History


- 1.2 - 04/09/2020: Enable values to be arrays so classes can passed for each value
- 1.1 - 11/16/2016: Fix gap on Safari, add more examples
- 1.0 - 10/24/2016: Initial release

2 changes: 1 addition & 1 deletion dist/HappyHistogram.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

64 changes: 61 additions & 3 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="../dist/HappyHistogram.min.js" ></script>
<script src="../src/HappyHistogram.js" ></script>
<link rel="stylesheet" href="../dist/HappyHistogram.min.css" />
</head>
<body>

<h1>Happy Histogram 1.1</h1>
<h1>Happy Histogram 1.2</h1>

<h2> Commits made per day </h2>
<div id="histogram2"></div>
<script>
Year = [
var Year = [
[10,2,2,4,3,3,0,2,3,3,3,3,2,0,1,2,2,1,2,1,0,0,2,2,2,3,3,1,2,2,2],
[0,0,0,0,0,1,1,1,1,1,1,0,0,0,3,4,4,6,3,1,2,3,4,4,3,1,0,0,1],
[0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,1,1,2,4,2,1,1,0,7,9,7,3,2,1,1],
Expand Down Expand Up @@ -89,10 +89,68 @@ <h2> Birds seen per month </h2>

<p>1 value per month, hover effect on just data bar (bottom) and different color.</p>


<h2> Metasyntactic variables used per month </h2>
<div id="histogram4"></div>
<script>
var Year = [
[[2.8,'foo'],[2,'bar'],[3,'bash']],
[[4,'bar'],[2,'bar'],[3,'bash']],
[[2,'bash'],[2,'bar'],[3,'bash']],
[[2,'bash'],[2,'bash'],[3,'bash']],
[[2,'foo'],[2,'foo'],[3,'foo']],
[[2,'bash'],[2,'foo'],[3,'foo']],
[[2,'foo'],[2,'bash'],[3,'foo']],
[[3,'bar'],[2,'foo'],[3,'bash']],
[[2,'foo'],[5,'bar extra-secret-class'],[3,'foo']],
[[2,'foo'],[2,'foo'],[3,'foo']],
[[4,'foo'],[3,'foo'],[3,'bar']],
[[1,'bar'],[2,'foo'],[3.9,'foo']],
];

HappyHistogram('histogram4', Year, 'darkcyan');
</script>

<div class="keys">
<div><div class="key bash"></div> Bash</div>
<div><div class="key foo"></div> Foo</div>
<div><div class="key bar"></div> Bar</div>
<div><div class="key extra-secret-class"></div> Highest Value (Bar)</div>
</div>

<p class="clear">3 values of both floats and ints per month, hover effect on just data bar (bottom) and different color.</p>

<style>
#histogram3 .yearHistogram .filledBottom:hover {
background-color: #ddd;
}
#histogram4 .yearHistogram .bash, .keys .bash {
background-color: blue;
}
#histogram4 .yearHistogram .foo, .keys .foo {
background-color: yellow;
}
#histogram4 .yearHistogram .extra-secret-class, .keys .extra-secret-class {
background-color: red;
}
.keys .bar {
background-color: darkcyan;
}
.keys .key {
width: 10px;
height: 10px;
}
.keys div {
float: left;
margin-right: 10px;
}
.keys {
margin: 10px;
padding: 10px;
}
.clear {
clear: both;
}
</style>

</body>
Expand Down
26 changes: 22 additions & 4 deletions src/HappyHistogram.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* Generate an entirely HTML based histogram for events across a year
* Version 1.1
* Version 1.2
* @param targetId - ID in DOM to render into
* @param monthData array of arrays - with int per day
* @param color string - CSS color
Expand All @@ -11,6 +11,7 @@ function HappyHistogram (targetId, monthData, color ) {
var bottom = 0;
var top = 100;
var width;
var extraClass;
var finalHTML = '';
var max = 0;
var i = 0;
Expand All @@ -28,7 +29,12 @@ function HappyHistogram (targetId, monthData, color ) {
// figure max
for (i = 0; i < monthData.length; i++) {
for (i2 = 0; i2 < monthData[i].length; i2++) {
if (monthData[i][i2] > max) max = monthData[i][i2];
if (Array.isArray(monthData[i][i2])){
val = monthData[i][i2][0];
} else {
val = monthData[i][i2];
}
if (val > max) max = val;
}
}

Expand All @@ -46,8 +52,20 @@ function HappyHistogram (targetId, monthData, color ) {
'<div class="chart">';

for (i2 = 0; i2 < monthData[i].length; i2++) {
// init extra class to be empty at the start of each value
extraClass = '';

// calculate day height percentages
day = monthData[i][i2];
if (Array.isArray(monthData[i][i2])){
if (monthData[i][i2][0] !== undefined) {
day = monthData[i][i2][0];
if(monthData[i][i2][1] !== undefined) {
extraClass = monthData[i][i2][1];
}
}
} else {
day = monthData[i][i2];
}
if (day < 0){
day = 0;
}
Expand All @@ -62,7 +80,7 @@ function HappyHistogram (targetId, monthData, color ) {
finalHTML +=
'<div class="bar" style="width: ' + width + '%">' +
'<div class="emptyTop" style="height: ' + top + '%">&nbsp;</div>' +
'<div class="filledBottom" style="height: ' + bottom + '%">&nbsp;</div>' +
'<div class="filledBottom ' + extraClass + '" style="height: ' + bottom + '%">&nbsp;</div>' +
'</div>';
}

Expand Down

0 comments on commit ec317b3

Please sign in to comment.