JSFiddle - React, Tailwind, and code Playground
CSS
svg {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
JavaScript
var data =
[
{
line: '1',
coords: [
{"mytime": "2015-12-01T11:10:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:15:00.000Z", "value": 67},
{"mytime": "2015-12-01T11:20:00.000Z", "value": 70},
{"mytime": "2015-12-01T11:25:00.000Z", "value": 64},
{"mytime": "2015-12-01T11:30:00.000Z", "value": 72},
{"mytime": "2015-12-01T11:35:00.000Z", "value": 75},
{"mytime": "2015-12-01T11:40:00.000Z", "value": 71},
{"mytime": "2015-12-01T11:45:00.000Z", "value": 80},
{"mytime": "2015-12-01T11:45:00.000Z", "value": 80}
]
},
{
line: '2',
coords: [
{"mytime": "2015-12-02T11:45:00.000Z", "value": 80},
{"mytime": "2015-12-02T12:45:00.000Z", "value": 80},
{"mytime": "2015-12-02T12:55:00.000Z", "value": 30},
{"mytime": "2015-12-02T14:45:00.000Z", "value": 90}
]
}
];
var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S.%LZ").parse;
data.forEach(function(d) {
d.coords.forEach(function (coord) { coord.mytime = parseDate(coord.mytime); })
});
//var margin = { top: 30, right: 30, bottom: 40, left:50 },
var margin = { top: 30, right: 30, bottom: 40, left:50 },
height = 200,
width = 800;
var color = "green";
var xaxis_param = "mytime";
var yaxis_param = "value"
var params1 = {margin:margin,height:height,width:width, color: color, xaxis_param:xaxis_param, yaxis_param :yaxis_param};
draw_graph(data,params1);
function draw_graph(data,params){
//Get the margin
var xaxis_param = params.xaxis_param;
var yaxis_param = params.yaxis_param;
var color_code = params.color;
var margin = params.margin;
var height = params.height - margin.top - margin.bottom,
width = params.width - margin.left - margin.right;
console.log("1")
var x_extent = d3.extent(data[0].coords, function(d){
return d[xaxis_param]});
console.log("2")
x_extent[1] = new Date(2015, 11, 3);
...