Plotting data from json file with different date format - json

Question

I am using graph1.json file which is as given. The createdOn date in stored as date time value. The graph is plotted but at wrong values of createdOn. How to parse the date for plotting the graph.
{
"Vitals": [
{
"createdOn": "2015-08-01 23:35:15.652",
"read": "1",
"ews": 3,
"vitalVal": 78
},
{
"createdOn": "2015-08-01 22:35:15.652",
"read": "1",
"ews": 2,
"vitalVal": 82
},
{
"createdOn": "2015-08-01 21:35:15.652",
"read": "1",
"ews": 2,
"vitalVal": 80
},
{
"createdOn": "2015-08-01 21:25:15.652",
"read": "1",
"ews": 4,
"vitalVal": 101
},
{
"createdOn": "2015-08-01 21:15:15.652",
"read": "1",
"ews": 0,
"vitalVal": 100
},
{
"createdOn": "2015-08-01 21:05:15.652",
"read": "1",
"ews": 1,
"vitalVal": 85
},
{
"createdOn": "2015-08-01 20:59:15.652",
"read": "1",
"ews": 0,
"vitalVal": 91
},
{
"createdOn": "2015-07-27 12:58:15.652",
"read": "1",
"ews": 0,
"vitalVal": 96
},
{
"createdOn": "2015-07-27 12:57:15.652",
"read": "1",
"ews": 0,
"vitalVal": 94
}
],
"unit": "mg"
}
My controller is
.controller('ChartCtrl', ['$scope','$http', function ($scope,$http) {
}])
.directive('linearChart', ['$http',function ($http) {
return {
restrict: 'EA',
link: function (scope, elem, attrs) {
var req = {
method: 'GET',
url: 'js/modules/myvitals/graph1.json',
headers: {
'Content-Type': "application/json"
},
data: {
"userName":'userName'
,"password":'password'
}
};
$http(req).then(function(response){
//console.log(response.data);
scope.data = response.data.SPO2;
var data = scope.data;
var margin = {
top: 40,
right: 20,
bottom: 30,
left: 50
},
width = 365 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
console.log("Date parsed:"+parseDate);
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5).tickFormat(d3.time.format("%d"));
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line1
var valueline1 = d3.svg.line()
.x(function (d) {
return x(new Date(d.createdOn));
// return x(d.date);
})
.y(function (d) {
return y(d.vitalVal);
});
// Adds the svg canvas
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// Scale the range of the data
x.domain(d3.extent(data, function (d) {
return new Date(d.createdOn);
}));
y.domain([0, d3.max(data, function (d) {
return d.vitalVal;
})]);
// Add the valueline1 path.
svg.append("path")
.attr("class", "line")
//.attr("id", "valueline1") //add id to path for hide/show
.attr("d", valueline1(data));
//text label for y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.attr("class", "ylabel")
.text("Measurement (bpm)");
// text label for the x axis
svg.append("text")
.attr("x", width/2 )
.attr("y", height +30)
.style("text-anchor", "middle")
.attr("class", "xlabel")
.text("Date");
// Add the scatterplot for line1
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 4.5)
// .attr("class", "valueline1") //add class to each dot
.style("fill", function (d) {
if (d.ews == 0) return "green";
if (d.ews == 1) return "yellow";
if (d.ews == 2) return "orange";
if (d.ews == 3) return "red";
})
.attr("cx", function (d) {
return x(new Date(d.createdOn));
//return x(parseDate(d.createdOn));
})
.attr("cy", function (d) {
return y(d.vitalVal);
}) .on("mouseover", function () {
return d3.select("#mytooltip").style("visibility", "visible"); //making the tooltip visible
})
.on("mousemove", function (d) {
// console.log()
d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 12) + "px").style("left", (d3.mouse(this)[0] + 10) + "px");
d3.select("#mytooltip").select("#txvalue").text(function () {
return d.createdOn; //setting the date values to tooltip
});
d3.select("#mytooltip").select("#tyvalue").text(function () {
return d.vitalVal; //setting the date values to tooltip
});
return;
})
.on("mouseout", function () {
return d3.select("#mytooltip").style("visibility", "hidden"); //hidding the tooltip
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
// console.log(resposneData);
}, function(error){
console.log(error);
});
}
};
}])
And I am rendering svg in html file
<div ng-controller="ChartCtrl">
<svg linear-chart></svg>
<div class="mytool" id="mytooltip">
<div id="tyvalue"></div>
<div id="txvalue"></div>
</div>
</div>

Answer 1

You can do somthing like this in you tool tip
d3.select("#mytooltip").select("#ttdate").text(function () {
var timeFormat = d3.time.format('%I:%M %p');//to show time in 10.00 AM, 12.30 PM
return timeFormat(new Date(d.date)); //setting the time values to tooltip
});
d3.select("#mytooltip").select("#ttclose").text(function () {
return d.close; //setting the date values to tooltip
});
This is very good tutorial for d3 date formats http://bl.ocks.org/zanarmstrong/ca0adb7e426c12c06a95
Hope this helps!