topic Re: Trying to get date from datepicker on xaxis using d3.js in Integration, Extension & APIs

Trying to get date from datepicker on xaxis using d3.js

Sat, 02 Apr 2016 19:45:44 GMT

Hi, I am having two datepickers on my web page and when user select from: and to: dates from both datepickers respectively it should come on x axis and so far i have done this(attached file). please help.

Re: Trying to get date from datepicker on xaxis using d3.js

Sun, 03 Apr 2016 15:48:35 GMT

This is my code..forgot to upload before

<!doctype html>

<html>

<head>

</head>

<body>

//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>

From : <input type="date" name="field1" id="field1" />

To : <input type="date" name="field2" id="field2" /><br /><br />

</div>

</body>

<html>

Re: Trying to get date from datepicker on xaxis using d3.js

Mon, 04 Apr 2016 06:09:52 GMT

Hi,

Just to name a few points:

- Why are you calling d3.js two times?

- You've hard coded your data to four elements? Should that also be dynamic? Lets say you choose 12 day period, the values should also be for the 12 days.
- On you process() you have to redraw the chart data and axis and rescale.

Here are a couple of code snippets to get you started::::

var v1= document.getElementById(f1).value.toString();

var v2= document.getElementById(f2).value.toString();

var diff= daydiff(parseDate(v1), parseDate(v2))

var date1 = new Date(parseDate(document.getElementById(f1).value));

var date2 = new Date(parseDate(document.getElementById(f2).value));

var day;

var DateRange = [];

console.log(date1.getDate())

//Generate the dates array for x-axis

for(var i=0; i < diff; ++i){

day = date1.getDate()

newDate = new Date(date1.setDate(++day));

console.log(newDate)

DateRange.push(newDate)

console.log(DateRange)

}

//parse the input values

function parseDate(str) {

var mdy = str.split('-')

return new Date(mdy[0], mdy[1] -1, mdy[2]);

}

//Get the date difference count

function daydiff(first, second) {

return Math.round((second-first)/(1000*60*60*24));

}

console.log(daydiff(parseDate(v1), parseDate(v2)))

//Random data generator to mock the data for all days chosen

var myData = function(){

var arr = [];

for(var i = 0; i <= DateRange.length; ++i ){

arr.push(Math.floor((Math.random() * 10) * 10));

}

return arr

};

Re: Trying to get date from datepicker on xaxis using d3.js

Mon, 04 Apr 2016 19:23:23 GMT

Hi, Now i managed to change dates dynamically but that is for 4 hardcoded values so please now tell me where should I refer to my json url and my json file has epoch date values so i have tries to get information to how to convert from epoch to readable format but don't know how should i use in my code..please suggest I will be very thankful to you.

<!doctype html>

<html>

<head>

<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>

</head>

<body>

From : <input type="date" name="field1" id="field1" />

To : <input type="date" name="field2" id="field2" /><br /><br />

</div>

// converting date to readable format

var myDate = new Date( your epoch date );

document.write(myDate.toGMTString()+"<br>"+myDate.toLocaleString());

/* 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>

Re: Trying to get date from datepicker on xaxis using d3.js

Tue, 05 Apr 2016 05:44:20 GMT

Hi,

You can use d3 built in methods:

var data; // Set up the global data object

// D3 json takes your json path as the first argument and as a second argument use a function to do whatever you want // with the returned data

d3.json("path/to/yourjsonfile.json", function(error, json) {

if (error) return console.warn(error);

data = json;

//Do something with data

});

Also concerning the time format, use d3 built-in time formatting methods Time Formatting · mbostock/d3 Wiki · GitHub

Re: Trying to get date from datepicker on xaxis using d3.js

Tue, 05 Apr 2016 07:12:09 GMT

Hi, Now i have made changes like this

var data;

d3.json("http://localhost:8080/myfile", function(error, json) {

if (error) return console.warn(error);

data = json;

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');

data.forEach(function(d) {

d.date = parseDate(d.date);

d.value = +d.value;

});

But I am getting error now t.slice is not a function..please tell

and is it correct way i refer to my json as this is the url.

Re: Trying to get date from datepicker on xaxis using d3.js

Tue, 05 Apr 2016 16:33:34 GMT

Please look where the error is happening? Have checked what the reply is giving you? Are your properties really named date and value in your data? Post what the reply is giving you.

Re: Trying to get date from datepicker on xaxis using d3.js

Tue, 05 Apr 2016 17:40:48 GMT

I get unexpected token illegal at this line d3.json(“data.json”, function (data)

and my json file is like this

[{

"name": "obs",

"date": "1458834026000"

}, {

"name": "hid",

"date": "1458774000000"

}, {

"name": "qwe",

"date": "1425744000000"

}, {

"name": "rty",

"date": "1458774000000"

}]

Re: Trying to get date from datepicker on xaxis using d3.js

Tue, 05 Apr 2016 18:25:53 GMT

I presume your data.json is in the root of your folder meaning the same place where this code is? correct? Please check your syntax.

Also this iteration won't work as your object keys are named name & date instead of value & date::

data.forEach(function(d) {

d.date = parseDate(d.date);

d.value = +d.value;

});

Should be ::

data.forEach(function(d) {

d.date = parseDate(d.date);

d.value = +d.name;

});

Re: Trying to get date from datepicker on xaxis using d3.js

Tue, 05 Apr 2016 18:33:47 GMT

Yeah both are at same place html file and json file even then same error at this line "unexpected token"

d3.json(“data.json”, function (data) {

Re: Trying to get date from datepicker on xaxis using d3.js

Tue, 05 Apr 2016 19:16:45 GMT

the callback takes two arguments while your only giving it the first which is actually the possible returned error::

d3.json("path/to/file.json", function(error, json) {

if (error) return console.warn(error);

data = json;

visualizeit();

});

Re: Trying to get date from datepicker on xaxis using d3.js

Tue, 05 Apr 2016 19:51:23 GMT

So which other argument should I pass..please tell

Re: Trying to get date from datepicker on xaxis using d3.js

Tue, 05 Apr 2016 20:12:15 GMT

see the example

instead of ::

d3.json(“data.json”, function (data) {

return something

})

==>

d3.json("data.json", function(error, json) {

if (error) return console.warn('This is an error message:', error );

data = json;

console.log(data);

//Do whatever you like with the data

});

Re: Trying to get date from datepicker on xaxis using d3.js

Wed, 06 Apr 2016 11:38:02 GMT

Thanks for ur suggestions..

Re: Trying to get date from datepicker on xaxis using d3.js

Wed, 06 Apr 2016 20:05:05 GMT

Please set the answer helpful of correct so it won't hang in the discussion board