demo/demo.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Diagrammatica</title>
<link href="../bower_components/jquery-ui/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../dist/diagrammatica.css" rel="stylesheet">
<link href="demo.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron text-center">
<h1><a href="http://ethanhann.github.io/Diagrammatica/">Diagrammatica</a></h1>
</div>
<div class="container">
<h2>Demo</h2>
<p>There is also a demo for <a href="angular-demo.html">AngularJS directives</a>.</p>
<div class="section-header">
<h2>Heat Map Chart</h2>
</div>
<div class="row">
<div class="col-lg-6">
<div class="btn-toolbar">
<button id="heat-map-chart1-reload" class="btn btn-default btn-sm"><span class="fa fa-refresh"></span></button>
</div>
<div id="heat-map-chart1"></div>
<div class="slider-control">
<div id="heat-map-slider"></div>
<div class="row">
<div class="col-lg-4">
<span id="heat-map-slider-from" class="pull-left"></span>
</div>
<div class="col-lg-4 text-center">
<span id="heat-map-slider-time-span">asd</span>
</div>
<div class="col-lg-4">
<span id="heat-map-slider-to" class="pull-right"></span>
</div>
</div>
</div>
</div>
</div>
<div class="section-header">
<h2>Line Chart</h2>
</div>
<div class="btn-toolbar">
<button id="line-chart1-reload" class="btn btn-default btn-sm"><span class="fa fa-refresh"></span></button>
</div>
<div id="line-chart1"></div>
<div class="section-header">
<h2>Pie Chart</h2>
</div>
<div class="btn-toolbar">
<button id="pie-chart1-reload" class="btn btn-default btn-sm"><span class="fa fa-refresh"></span></button>
</div>
<div id="pie-chart1"></div>
<div class="section-header">
<h2>Bar Chart</h2>
</div>
<div class="btn-toolbar">
<button id="bar-chart1-reload" class="btn btn-default btn-sm"><span class="fa fa-refresh"></span></button>
</div>
<div id="bar-chart1"></div>
<div class="section-header">
<h2>Column Chart</h2>
</div>
<div class="btn-toolbar">
<button id="column-chart1-reload" class="btn btn-default btn-sm"><span class="fa fa-refresh"></span></button>
</div>
<div id="column-chart1"></div>
</div>
<div class="footer text-center">
<p>
Created by <a href="https://github.com/ethanhann">Ethan Hann</a>
</p>
</div>
<!--Scripts-->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="../bower_components/check-types/src/check-types.min.js"></script>
<script src="../dist/diagrammatica.js"></script>
<script src="../demo/demo.js"></script>
</body>
</html>