how to set value from datepicker in d3.js
Question
<head>
<meta charset="UTF-8">
<meta content="utf-8" http-equiv="encoding">
<title>D3</title>
<link rel="stylesheet" type="text/css" href="mystyle1.css" />
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<div id="chart"></div>
<script>
//for datepicker
function processData(f1, f2){
var v1= document.getElementById(f1).value.toString();
var v2= document.getElementById(f2).value.toString();
alert (v1+"\n"+v2);
return v1, v2;
valPicker1=v1; //passed values that were attained above in valpickr1 and pickr2
valPicker2=v2;
}
var myData = [100, 125, 320, 440];
var height = 300;
var width = 500;
var tooltip = d3.select('body').append('div')
.style('position', 'absolute')
.style('background', '#f4f4f4')
.style('padding', '5 15px')
.style('border', '1px #333 solid')
.style('border-radius', '5px')
.style('opacity', 'o')
var yScale = d3.scale.linear()
.domain([0, d3.max(myData)])
.range([0, height]);
var xScale = d3.scale.ordinal()
.domain(d3.range(0, myData.length))
.rangeBands([0, width])
var colors = d3.scale.linear()
.domain([0, myData.length])
.range(['#90ee90', '#30c230'])
d3.select('#chart').append('svg')
.attr('width', width)
.attr('height', height)
.style('background', '#f4f4f4')
.selectAll('rect')
.data(myData)
.enter().append('rect')
.style('fill', function (d, i) {
return colors(i);
})
.attr('width', xScale.rangeBand())
.attr('height', function (d) {
return yScale(d);
})
.attr('x', function (d, i) {
return xScale(i);
})
.attr('y', function (d) {
return height - yScale(d);
})
.on('mouseover', function (d) {
tooltip.transition()
.style('opacity', 1)
tooltip.html(d)
.style('left', (d3.event.pageX) + 'px')
.style('top', (d3.event.pagey) + 'px')
d3.select(this).style('opacity', 0.5)
})
.on('mouseout', function (d) {
tooltip.transition()
.style('opacity', 0)
d3.select(this).style('opacity', 1)
})
var vScale = d3.scale.linear()
.domain([0, d3.max(myData)])
.range([height, 0]);
var hScale = d3.scale.ordinal()
.domain(d3.range(0, myData.length))
.rangeBands([0, width])
//vaxis
var vAxis = d3.svg.axis()
.scale(vScale)
.orient('left')
//v guide
var vGuide = d3.select('svg')
.append('g')
vAxis(vGuide)
vGuide.attr('transform', 'translate(35,10)')
vGuide.selectAll('path')
.style('fill', 'none')
.style('stroke', '#000')
vGuide.selectAll('line')
.style('stroke', '#000')
//Haxis
var hAxis = d3.svg.axis()
.scale(hScale)
.orient('bottom')
//H guide
var hGuide = d3.select('svg')
.append('g')
hAxis(hGuide)
hGuide.attr('transform', 'translate(35,' + (height - 25) + ')')
hGuide.selectAll('path')
.style('fill', 'none')
.style('stroke', '#000')
hGuide.selectAll('line')
.style('stroke', '#000')
</script>
<div align ="center">
From : <input type="date" name="field1" id="field1" />
To : <input type="date" name="field2" id="field2" /><br /><br />
<input type="button" onclick="processData('field1','field2')" value="Submit" />
</div>
</body>
<html>
I want to get values from my 2 datepickers which are on my web page so user can select values at runtime from those 2datepicekrs ie to: and from : only two values of date that should be displayed on x axis but I don't know how should I bind those values form date pickers to my x-axis . Please help.
1 answers
solution1
0 2016-04-04 04:17:29
You would have to set the domain as array of dates you want to display for your x-axis. and you can re-render the chart when you select dates.
Check the below code if it helps -
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta content="utf-8" http-equiv="encoding"> <title>D3</title> <!-- <link rel="stylesheet" type="text/css" href="mystyle1.css" /> --> <style> body { color: #000; } .axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: steelblue; } .bar:hover { fill: brown; } </style> <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> </head> <script src="http://d3js.org/d3.v3.min.js"></script> <body> <div id="chart"></div> <div align ="center"> From : <input type="date" name="field1" id="field1" /> To : <input type="date" name="field2" id="field2" /><br /><br /> <input type="button" onclick="render(true)" value="Submit" /> </div> <script> var myData = [ { value: 100, date: '2016-01-01'}, { value: 125, date: '2016-02-02'}, { value: 320, date: '2016-03-03'}, { value: 440, date: '2016-04-04'} ]; var parseDate = d3.time.format("%Y-%m-%d").parse; var margin = { top: 20, right: 0, bottom: 80, left: 40 }; var width = 500 - margin.left - margin.right; var height = 300 - margin.top - margin.bottom; var xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1); var yScale = d3.scale.linear().range([height, 0]); var hAxis = d3.svg.axis().scale(xScale).orient('bottom').tickFormat(d3.time.format("%Y-%m-%d")); var vAxis = d3.svg.axis().scale(yScale).orient('left'); var tooltip = d3.select('body').append('div') .style('position', 'absolute') .style('background', '#f4f4f4') .style('padding', '5 15px') .style('border', '1px #333 solid') .style('border-radius', '5px') .style('opacity', 'o'); myData.forEach(function(d) { d.date = parseDate(d.date); d.value = +d.value; }); function getDates() { return [document.getElementById('field1').value, document.getElementById('field2').value]; } function render(filterByDates) { d3.select('svg').remove(); if(filterByDates) { var date1 = parseDate(document.getElementById('field1').value); var date2 = parseDate(document.getElementById('field2').value); myData = myData.filter(function(d) { return d.date >= date1 && d.date <= date2; }); } xScale.domain(myData.map(function(d) { return d.date; })); yScale.domain([0, d3.max(myData, function (d) { return d.value; })]); var svg = d3.select('#chart').append('svg') .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg .append('g') .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(hAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", "-.55em") .attr("transform", "rotate(-90)" ); svg .append('g') .attr("class", "y axis") // .attr('transform', 'translate(35,' + (height - 25) + ')') .call(vAxis) svg .selectAll(".bar") .data(myData) .enter().append("rect") .attr("class", "bar") .style("fill", "steelblue") .attr("x", function(d) { return xScale(d.date); }) .attr("width", xScale.rangeBand()) .attr("y", function(d) { return yScale(d.value); }) .attr("height", function(d) { return height - yScale(d.value); }) .on('mouseover', function (d) { tooltip.transition() .style('opacity', 1) tooltip.html(d.value) .style('left', (d3.event.pageX) + 'px') .style('top', (d3.event.pagey) + 'px') d3.select(this).style('opacity', 0.5) }) .on('mouseout', function (d) { tooltip.transition() .style('opacity', 0) d3.select(this).style('opacity', 1) }); } render(false); </script> </body> <html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to set default option d3.js
d3.js Slider: how to get value?
How to modify a value by selection in d3.js?
How to merge data from D3.js Topojson to defined set to set class
How to set the last option from a drop-down list as selected using D3.js
How to set minimal step for y-axis in d3.js?
How to set unequal intervals on Y axis in D3.js?
How to set margin or padding in canvas object in D3.js
How to set the zoom factor in D3.js v.4.x?
how can I set a height and width for this map in d3.js
Related Tags