xxxxxxxxxx
<html>
<head>
<title>Chandrakant Bharatkumar Thakkar</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart" style="width: 800;height: 500">
</div>
<script>
$("#chart").empty();
var mainDiv = "#chart";
var yAxis = "yaxis";
var mainDivName = mainDiv.substr(1, mainDiv.length);
d3.select(mainDiv).append("svg").attr("width", $(mainDiv).width()).attr("height", $(mainDiv).height());
var svg = d3.select(mainDiv + " svg"),
margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom;
var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var data = [{
yaxis: 1
}, {
yaxis: 2
}, {
yaxis: 3
}, {
yaxis: 4
}, {
yaxis: 5
}, {
yaxis: 6
}, {
yaxis: 7
}, {
yaxis: 8
}, {
yaxis: 9
}, {
yaxis: 10
}];
var y0 = d3.scaleBand()
.rangeRound([height, 0])
.paddingInner(0.1);
y0.domain(data.map(function(d) {
return d[yAxis];
}));
var distance = 80;
var xpoint = 0;
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + xpoint + ",0)")
.call(d3.axisLeft(y0))
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - (height / 2))
.attr("y", 10 - margin.left)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "middle")
.text("Simple Number Format");
xpoint = xpoint + distance;
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + xpoint + ",0)")
.call(d3.axisLeft(y0).tickFormat(d3.format(".2f")))
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - (height / 2))
.attr("y", 5 - margin.left)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "middle")
.text("Floating Number Format");
data.forEach(function(d) {
d.yaxis = d.yaxis * 1000;
});
y0.domain(data.map(function(d) {
return d[yAxis];
}));
xpoint = xpoint + distance;
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + xpoint + ",0)")
.call(d3.axisLeft(y0).tickFormat(d3.format(".0s")))
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - (height / 2))
.attr("y", 10 - margin.left)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "middle")
.text("SI Format");
var data = [{
yaxis: "1-jul-17"
}, {
yaxis: "2-jul-17"
}, {
yaxis: "3-jul-17"
}, {
yaxis: "4-jul-17"
}, {
yaxis: "5-jul-17"
}, {
yaxis: "6-jul-17"
}, {
yaxis: "7-jul-17"
}, {
yaxis: "8-jul-17"
}, {
yaxis: "9-jul-17"
}, {
yaxis: "10-jul-17"
}];
var parseTime = d3.timeParse("%d-%b-%y");
data.forEach(function(d) {
d.yaxis = parseTime(d.yaxis);
});
y0 = d3.scaleTime().range([height, 0]);
y0.domain(d3.extent(data, function(d) {
return d[yAxis]
}));
distance = distance + 20;
xpoint = xpoint + distance;
var ele = g.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + xpoint + ",0)")
.call(d3.axisLeft(y0).tickFormat(d3.timeFormat("%a %d")));
ele.selectAll("text")
.attr("transform", "rotate(-55)")
.attr("dx", ".5em")
.attr("dy", "-.9em")
ele.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - (height / 2))
.attr("y", 0 - margin.left)
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "middle")
.text("Day Date Format");
xpoint = xpoint + distance;
var ele = g.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + xpoint + ",0)")
.call(d3.axisLeft(y0).tickFormat(d3.timeFormat("%Y-%m-%d")));
ele.selectAll("text")
.attr("transform", "rotate(-55)")
.attr("dx", ".5em")
.attr("dy", "-.9em");
ele.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - (height / 2))
.attr("y", 0 - (margin.left + 10))
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "middle")
.text("YYYY-MM-DD Format");
xpoint = xpoint + distance;
var ele = g.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + xpoint + ",0)")
.call(d3.axisLeft(y0).tickFormat(d3.timeFormat("%y-%b-%d")));
ele.selectAll("text")
.attr("transform", "rotate(-55)")
.attr("dx", ".5em")
.attr("dy", "-.9em");
ele.append("text")
.attr("transform", "rotate(-90)")
.attr("x", 0 - (height / 2))
.attr("y", 0 - (margin.left + 10))
.attr("dy", "0.32em")
.attr("fill", "#000")
.attr("font-weight", "bold")
.attr("text-anchor", "middle")
.text("YY-MON-DD Format");
</script>
</body>
</html>
Modified http://code.jquery.com/jquery-latest.min.js to a secure url
https://code.jquery.com/jquery-latest.min.js
https://d3js.org/d3.v4.min.js