xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="plot">
<meta name="author" content="Michal Škop">
<script src="//cdn.bootcss.com/d3/3.5.6/d3.min.js"></script>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="./modernizr.svg.js"></script>
<script src="./d3.timelineplot.js"></script>
<body>
<div id="chart"></div>
<style>
.timeline-rect:hover {
fill-opacity: 1;
stroke-width: 3px;
stroke: black;
}
.timeline-axis path, .timeline-axis line {stroke:#ccc; fill:none;}
.timeline-axis text {
fill: gray;
font-weight: 600;
font-family: ubuntu;
font-size: 30px;
}
</style>
<script>
//some random data:
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
data = [];
var minmaxdate = {'min':new Date(2014,0,1),'max':new Date()}
n = 50;
for (i=1;i<=n;i++) {
data.push(randomDate(minmaxdate['min'], minmaxdate['max']));
//data.push(Math.random());
}
var $chart = $('#chart');
var graphic_data = data; //we need this (??)
var graphic_minmaxdate = minmaxdate;
function drawGraphic() {
var margin = { top: 10, right: 30, bottom: 30, left: 40 };
var width = $chart.width() - margin.left - margin.right;
var timelineplot = [{
"data": graphic_data,
"margin": margin,
"minmaxdate": graphic_minmaxdate,
"size":{"width":width,"height":70},
}];
// clear out existing graphics
$chart.empty();
var svg = d3.select("#chart")
.append("svg")
.attr("width",timelineplot[0]['size']['width'])
.attr("height",timelineplot[0]['size']['height']);
/* Initialize tooltip */
/* tip = d3.tip().attr('class', 'd3-tip').html(function(d) {
return "<span class=\'stronger\'>" + d + "</span><br>";
});*/
/* Invoke the tip in the context of your visualization */
/*svg.call(tip)*/
var tlp = d3.timelineplot()
.data(function(d) {return d.data})
.margin(function(d) {return d.margin})
.minmaxdate(function(d) {return d.minmaxdate})
var timeline = svg.selectAll(".timelineplot")
.data(timelineplot)
.enter()
.append("svg:g")
.attr("transform", "translate(" + timelineplot[0].margin.left + "," + timelineplot[0].margin.top + ")")
.call(tlp);
}
if (Modernizr.svg) { // if svg is supported, draw dynamic chart
drawGraphic();
window.onresize = drawGraphic;
}
</script>
https://cdn.bootcss.com/d3/3.5.6/d3.min.js
https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js