ijunaid8989 · December 25, 2016 13:10
diff --git a/strange.html b/strange.html
 <!DOCTYPE html>
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Visavail.js Example: Responsive Layout With Bootstrap</title>

    <!-- Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <!-- Visavail.js style -->
    <link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
    <link href='../visavail/css/visavail.css' rel='stylesheet' type='text/css'>

    <!-- font-awesome -->
    <script src="https://use.fontawesome.com/8321cacbf6.js"></script>
    <!--
    Note: This should be replaced by
        <link href='./vendors/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
    when implemented in your project.
    -->

 </head>

 <body>
 <div class="container">
    <div class="page-header">
        <h1>Visavail.js Example: Responsive Layout With Bootstrap</h1>
        <p>This example demonstrates the use of
            <a href="http://www.github.com/flrs/visavail" target="_blank">Visavail.js</a>
            for responsive contexts.
            The plugin builds upon <a href="http://www.getbootstrap.com" target="_blank">Bootstrap</a> and
            <a href="https://jquery.com/" target="_blank">jQuery</a>.
        </p>
    </div>
    <div class="alert alert-info" role="alert"><strong>Change the width of the window!</strong> You will see how the chart adjusts.</div>
 </div>

 <div style="margin: 0 auto; width: 100%;padding: 10px" id="visavail_container">
    <p id="example"><!-- Visavail.js chart will be placed here --></p>
 </div>

 <!-- Bootstrap -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

 <!-- Pagination -->
 <script src="./vendors/pagination/jquery.twbsPagination.min.js" type="text/javascript"></script>

 <!-- Visavail.js scripts -->
 <script src="../vendors/moment/moment-with-locales.min.js" type="text/javascript"></script>
 <script>
    moment.locale('en');
 </script>
 <script src="../vendors/d3/d3.min.js" charset="utf-8"></script>
 <script type="text/javascript">
    var dataset = [
                    {
                        "measure":"Staffords Waterford VH",
                        "interval_s": 7 * 24 * 60 * 60,
                        "data":[
                                 ["2016-12-18 00:25:20",1],
                                 ["2016-12-19 00:25:20",0],
                                 ["2016-12-19 00:26:18",1],
                                 ["2016-12-19 05:50:21",0],
                                 ["2016-12-19 05:51:19",1],
                                 ["2016-12-20 05:25:46",0],
                                 ["2016-12-20 05:27:03",1],
                                 ["2016-12-20 05:50:17",0],
                                 ["2016-12-20 05:51:17",1],
                                 ["2016-12-21 03:25:43",0],
                                 ["2016-12-21 03:26:42",1],
                                 ["2016-12-21 05:50:27",0],
                                 ["2016-12-21 05:51:41",1],
                                 ["2016-12-22 03:25:30",0],
                                 ["2016-12-22 03:26:41",1],
                                 ["2016-12-22 05:50:22",0],
                                 ["2016-12-22 05:51:22",1]
                            ]
                    }
                ];
 </script>
 <script src="../visavail/js/visavail.js"></script>

 <script>
    // draw Visavail.js chart
    var chart = visavailChart();

    function draw_visavail() {
        chart.width($('#visavail_container').width()-140);
        $('#example').text('');
        d3.select("#example")
                .datum(dataset)
                .call(chart);
    }

    draw_visavail();

    $(window).resize(function () { return draw_visavail(); });
 </script>

 </body>

 </html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Visavail.js Example: Responsive Layout With Bootstrap</title>

	<!-- Bootstrap -->
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

	<!-- Visavail.js style -->
	<link href='https://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
	<link href='../visavail/css/visavail.css' rel='stylesheet' type='text/css'>

	<!-- font-awesome -->
	<script src="https://use.fontawesome.com/8321cacbf6.js"></script>
	<!--
	Note: This should be replaced by
	<link href='./vendors/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
	when implemented in your project.
	-->

	</head>

	<body>
	<div class="container">
	<div class="page-header">
	<h1>Visavail.js Example: Responsive Layout With Bootstrap</h1>
	<p>This example demonstrates the use of
	<a href="http://www.github.com/flrs/visavail" target="_blank">Visavail.js</a>
	for responsive contexts.
	The plugin builds upon <a href="http://www.getbootstrap.com" target="_blank">Bootstrap</a> and
	<a href="https://jquery.com/" target="_blank">jQuery</a>.
	</p>
	</div>
	<div class="alert alert-info" role="alert"><strong>Change the width of the window!</strong> You will see how the chart adjusts.</div>
	</div>

	<div style="margin: 0 auto; width: 100%;padding: 10px" id="visavail_container">
	<p id="example"><!-- Visavail.js chart will be placed here --></p>
	</div>

	<!-- Bootstrap -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>

	<!-- Pagination -->
	<script src="./vendors/pagination/jquery.twbsPagination.min.js" type="text/javascript"></script>

	<!-- Visavail.js scripts -->
	<script src="../vendors/moment/moment-with-locales.min.js" type="text/javascript"></script>
	<script>
	moment.locale('en');
	</script>
	<script src="../vendors/d3/d3.min.js" charset="utf-8"></script>
	<script type="text/javascript">
	var dataset = [
	{
	"measure":"Staffords Waterford VH",
	"interval_s": 7 * 24 * 60 * 60,
	"data":[
	["2016-12-18 00:25:20",1],
	["2016-12-19 00:25:20",0],
	["2016-12-19 00:26:18",1],
	["2016-12-19 05:50:21",0],
	["2016-12-19 05:51:19",1],
	["2016-12-20 05:25:46",0],
	["2016-12-20 05:27:03",1],
	["2016-12-20 05:50:17",0],
	["2016-12-20 05:51:17",1],
	["2016-12-21 03:25:43",0],
	["2016-12-21 03:26:42",1],
	["2016-12-21 05:50:27",0],
	["2016-12-21 05:51:41",1],
	["2016-12-22 03:25:30",0],
	["2016-12-22 03:26:41",1],
	["2016-12-22 05:50:22",0],
	["2016-12-22 05:51:22",1]
	]
	}
	];
	</script>
	<script src="../visavail/js/visavail.js"></script>

	<script>
	// draw Visavail.js chart
	var chart = visavailChart();

	function draw_visavail() {
	chart.width($('#visavail_container').width()-140);
	$('#example').text('');
	d3.select("#example")
	.datum(dataset)
	.call(chart);
	}

	draw_visavail();

	$(window).resize(function () { return draw_visavail(); });
	</script>

	</body>

	</html>