The angular-cal-heatmap-directive from shekhargulati

angular-cal-heatmap-directive's Introduction

#Cal Heatmap AngularJS Directive#

This is an AngularJS directive for cal-heatmap http://kamisama.github.io/cal-heatmap/

##How to use it##

Use bower to install the library

$ bower install angular-cal-heatmap-directive

Create an index.html as shown below.

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF8">
	<title>Angular Cal Heatmap directive</title>
	<link rel="stylesheet" type="text/css" href="bower_components/cal-heatmap/cal-heatmap.css">
</head>
<body ng-app="myapp">

<cal-heatmap></cal-heatmap>

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/d3/d3.js"></script>
<script type="text/javascript" src="bower_components/cal-heatmap/cal-heatmap.js"></script>
<script type="text/javascript" src="bower_components/angular-cal-heatmap-directive/dist/1.3.0/calHeatmap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>

</html>

The app.js is the application Angualar app. Add the dependency to the calHeatmap directive in the app.js as shown below.

angular.module('myapp',['calHeatmap']);

This will generate a default Cal Heatmap as shown below.

To add your own configuration, you can use config attribute as shown below.

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF8">
	<title>Angular Cal Heatmap directive</title>
	<link rel="stylesheet" type="text/css" href="bower_components/cal-heatmap/cal-heatmap.css">
</head>
<body ng-app="myapp">

<cal-heatmap config="{domain:'year',range:1,cellSize:15}"></cal-heatmap>

<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/d3/d3.js"></script>
<script type="text/javascript" src="bower_components/cal-heatmap/cal-heatmap.js"></script>
<script type="text/javascript" src="bower_components/angular-cal-heatmap-directive/dist/1.3.0/calHeatmap.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>

</html>

This will produce the heatmap as shown below.

This directive supports most of the options supported by cal-heatmap library http://kamisama.github.io/cal-heatmap/#options

angular-cal-heatmap-directive's People

Contributors

Stargazers

Watchers

angular-cal-heatmap-directive's Issues

update bower package

Please update this package in bower with last merge.

Missing license file in repository

Right now the repository is missing a license for the source code. That makes consumption a bit dicey as it's not clear which license would be in effect for the source code. Unless I missed it somewhere?