Built with blockbuilder.org
forked from anonymous's block: fresh block
Built with blockbuilder.org
forked from anonymous's block: fresh block
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<link rel="stylesheet" type="text/css" href="styles.css"> | |
</head> | |
<body> | |
<div id="option"> | |
<input type="button" name="updateButton" value="Update" onclick="updateData()" /> | |
</div> | |
<section class="row-1"> | |
<article id="chart--01"></article> | |
</section> | |
<script> | |
var dataset = [ | |
{datetime: "2013-01-01T11:56:00+00:00", amount: 200, pageViews: 412, enabled: true}, | |
{datetime: "2013-03-10T12:34:00+00:00", amount: 50, pageViews: 412, enabled: true}, | |
{datetime: "2013-05-21T13:00:00+00:00", amount: 1250, pageViews: 412, enabled: true}, | |
{datetime: "2013-06-23T17:00:00+00:00", amount: 300, pageViews: 3500, enabled: true}, | |
{datetime: "2013-10-25T19:00:00+00:00", amount: 600.456, pageViews: 412, enabled: true}, | |
{datetime: "2013-12-29T21:15:00+00:00", amount: 550, pageViews: 412, enabled: true}, | |
{datetime: "2013-12-30T23:11:00+00:00", amount: 233, pageViews: 412, enabled: true}, | |
]; | |
var dataset2 = [ | |
{datetime: "2012-01-21T11:56:00+00:00", amount: 0, pageViews: 200, enabled: true}, | |
{datetime: "2013-03-17T12:34:00+00:00", amount: 150, pageViews: 200, enabled: true}, | |
{datetime: "2013-06-21T13:56:00+00:00", amount: 50, pageViews: 800, enabled: true}, | |
{datetime: "2015-10-01T17:00:00+00:00", amount: 1300, pageViews: 3500, enabled: true}, | |
{datetime: "2015-10-05T19:56:00+00:00", amount: 400.456, pageViews: 1500, enabled: true}, | |
{datetime: "2015-11-29T21:56:00+00:00", amount: 10, pageViews: 700, enabled: true}, | |
{datetime: "2015-12-30T23:11:00+00:00", amount: 233, pageViews: 4000, enabled: true}, | |
]; | |
var margin = {top: 35, right: 40, bottom: 50, left: 50}; | |
svgWidth = 320, | |
svgHeight = 200, | |
contentWidth = svgWidth - margin.left - margin.right, | |
contentHeight = svgHeight - margin.top - margin.bottom; | |
svg = d3.select("#chart--01") | |
.append("svg") | |
.attr("class", "chart sample-chart") | |
.attr("width", svgWidth) | |
.attr("height", svgHeight) | |
.append('g') | |
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); // Centering | |
var parseDate = d3.time.format.utc("%Y-%m-%dT%H:%M:%S+00:00").parse; | |
dataset.forEach(function (d) { | |
d.datetime = parseDate(d.datetime); | |
d.amount = +d.amount; | |
d.pageViews = +d.pageViews; | |
}); | |
var xScale = d3.time.scale.utc().range([0, contentWidth]), | |
yScale = d3.scale.linear().range([contentHeight, 0]), | |
yScale1 = d3.scale.linear().range([contentHeight, 0]), | |
xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5), | |
yAxisLeft = d3.svg.axis().scale(yScale).orient("left" ).ticks(5).tickFormat(d3.format("s")), | |
yAxisRight = d3.svg.axis().scale(yScale1).orient("right").ticks(5).tickFormat(d3.format("s")); | |
function xGrid() { return d3.svg.axis().scale(xScale).orient("bottom").ticks(5); } | |
function yGrid() { return d3.svg.axis().scale(yScale).orient("left" ).ticks(5); } | |
var valueline = d3.svg.line() | |
.interpolate("cardinal") | |
.x(function (d) { return xScale(d.datetime); }) | |
.y(function (d) { return yScale(d.amount); }); | |
var valueline2 =d3.svg.line() | |
.interpolate("cardinal") | |
.x(function (d) { return xScale(d.datetime); }) | |
.y(function (d) { return yScale1(d.pageViews);}); | |
var div = d3.select("body").append("div") | |
.attr("class", "tooltip") | |
.style("opacity", 0); | |
var year = d3.time.format("%Y"), | |
dayOfMonth = d3.time.format("%d %b"), | |
time = d3.time.format("%H:%M"); | |
// AutoUpdate | |
var inter = setInterval(function() { updateData(); }, 4000); | |
xScale.domain(d3.extent(dataset, function (d) { return d.datetime; })); | |
yScale.domain([0, d3.max(dataset, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
yScale1.domain([0, d3.max(dataset, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
xScale.nice(d3.time.month); | |
svg.append("path") | |
.attr("class", "line") | |
.attr("d", valueline(dataset)); | |
svg.append("path") | |
.attr("class", "line line2") | |
.attr("id", "line2") | |
.attr("d", valueline2(dataset)); | |
svg.selectAll("dot") | |
.data(dataset) | |
.enter() | |
.append("circle") | |
.attr("class", "scatter-dots") | |
.attr("r", 3.5) | |
.attr("cx", function(d) { return xScale(d.datetime); }) | |
.attr("cy", function(d) { return yScale(d.amount); }) | |
.on("mouseover", function(d) { | |
div.transition() | |
.duration(100) | |
.style("opacity", 0.95); | |
div.html("<span>" + dayOfMonth(d.datetime) + "</span> - " + | |
"<span>" + time(d.datetime) + "</span><br/>" + | |
"<span>" + d.amount + "</span>") | |
.style("left", (d3.event.pageX + 5 ) + "px") | |
.style("top", (d3.event.pageY - 40) + "px"); | |
}) | |
.on("mouseout", function(d) { | |
div.transition() | |
.duration(500) | |
.style("opacity", 0); | |
}); | |
svg.append("g") | |
.attr("class", "axis x") | |
.attr("transform", "translate(0, " + contentHeight + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "axis y left") | |
.call(yAxisLeft); | |
svg.append("g") | |
.attr("class", "axis y right y1") | |
.attr("transform", "translate(" + contentWidth + " ,0)") | |
.call(yAxisRight); | |
svg.append("g") | |
.attr("class", "grid") | |
.attr("transform", "translate(0," + contentHeight + ")") | |
.call(xGrid() | |
.tickSize(-contentHeight, 0, 0) | |
.tickFormat("") | |
); | |
svg.append("g") | |
.attr("class", "grid") | |
.call(yGrid() | |
.tickSize(-contentWidth, 0, 0) | |
.tickFormat("") | |
); | |
// ******* UPDATING DATA ******* // | |
function updateData() { | |
dataset2.forEach(function (d) { | |
d.datetime = parseDate(d.datetime); | |
d.amount = +d.amount; | |
d.pageViews = +d.pageViews; | |
}); | |
xScale.domain (d3.extent(dataset2 , function (d) { return d.datetime; })); | |
yScale.domain ([0, d3.max(dataset2, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
yScale1.domain([0, d3.max(dataset2, function (d) { return Math.max(d.amount, d.pageViews); })]); | |
var svg = d3.select("body").transition(); | |
svg.select(".line") | |
.duration(750) | |
.attr("d", valueline(dataset2)); | |
svg.select(".line2") | |
.duration(750) | |
.attr("d", valueline2(dataset2)); | |
svg.select(".axis.x") | |
.duration(750) | |
.call(xAxis); | |
svg.select(".axis.y.left") | |
.duration(750) | |
.call(yAxisLeft); | |
svg.select(".axis.y.right") | |
.duration(750) | |
.call(yAxisRight); | |
svg.select("dot") | |
.data(dataset2); | |
} | |
</script> | |
</body> |
* { | |
box-sizing: border-box; | |
} | |
body { | |
width:100%; | |
height:100%; | |
background: silver; | |
margin: 0 auto; | |
} | |
#chart--01 { | |
width :100%; | |
height :220px; | |
margin : 10px auto; | |
padding : 2% 0; | |
text-align: center; | |
} | |
svg.chart { | |
border: 1px solid blue; | |
background-color: azure; | |
} | |
.line { | |
stroke : steelblue; | |
stroke-width : 1; | |
fill : none; | |
} | |
.line2 { | |
stroke :red; | |
} | |
.line2-name { | |
fill: red; | |
font-size: 10px; | |
} | |
.area { | |
fill: lightblue; | |
stroke-width: 0; | |
} | |
.area2 { | |
fill: rgba(214,34,12,.6); | |
} | |
.scatter-dots { | |
fill: white; | |
stroke: steelblue; | |
stroke-width: 1; | |
} | |
.scatter-dots:hover, | |
.scatter-dots:active { | |
fill: steelblue; | |
} | |
.axis path, | |
.axis line { | |
fill : none; | |
stroke : grey; | |
stroke-width: 1; | |
shape-rendering: crispEdges; | |
} | |
.axis.y path { | |
stroke-width: 0; | |
} | |
.axis .tick text { | |
fill: black; | |
font-size: 11px; | |
} | |
.grid .tick { | |
stroke: grey; | |
stroke-opacity: 1; | |
shape-rendering: crispEdges; | |
stroke-dasharray: 3,3; | |
} | |
.grid path { | |
stroke-width: 0; | |
} | |
.axis-title { | |
font-size: 12px; | |
font-style: italic; | |
} | |
.tooltip { | |
position : absolute; | |
text-align: center; | |
width : auto; | |
min-width : 90px; | |
height : auto; | |
padding : 2px; | |
font : 12px sans-serif; | |
background: Turquoise; | |
border : 0px; | |
pointer-events: none; | |
-webkit-box-shadow : 2px 2px 5px 0px rgba(0,0,0,0.35); | |
-moz-box-shadow : 2px 2px 5px 0px rgba(0,0,0,0.35); | |
box-shadow : 2px 2px 5px 0px rgba(0,0,0,0.35); | |
} |