// get values from GET
var script_tag = document.getElementById("data_graph3");
var tab = script_tag.getAttribute("t");
var d = script_tag.getAttribute("d");
var tag = script_tag.getAttribute("tag");
var YaxisText3 = "Precipitation - mm";
var desc = script_tag.getAttribute("d");
var seriesColors1 = ["#2ca02c", "#d62728", "#1f77b4"];
// Set the dimensions of the canvas / graph
var margin = { top: 30, right: 200, bottom: 70, left: 80 },
width = 900 - margin.left - margin.right,
height = 450 - margin.top - margin.bottom;
// Parse the date / time
// var parseDate = d3.timeParse("%b %Y");
var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
// Set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// Define the line
var valueline1 = d3.line()
.x(function (d) { return x(d.date); })
.y(function (d) { return y(d.value); });
// Adds the svg canvas
var alto = height+margin.top+margin.bottom;
var ancho = width+margin.left+margin.right;
var svg4 = d3.select(tag)
.append("svg")
.attr("viewBox",'0 0 '+ancho +' '+alto)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// gridlines in x axis function
function make_x_gridlines() {
return d3.axisBottom(x)
.ticks(8)
}
// gridlines in y axis function
function make_y_gridlines() {
return d3.axisLeft(y)
.ticks(5)
}
// Get the data
var url_qry = "./scripts/php/getdata3lin.php?t="+tab+"&d="+d+"";
d3.json(url_qry).then(function (data) {
data.forEach(function (d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
// round the values for axis Y min and max
var min_y = d3.min(data, function (d) { return d.value });
var miny = parseFloat(min_y).toFixed(2);
var max_y = d3.max(data, function (d) { return d.value });
// var miny = parseFloat(min_y-((max_y - min_y)/16));
var maxy = Math.round(((max_y+((max_y - min_y)/18)) + Number.EPSILON) * 100) / 100;
var dateFormat = d3.timeFormat("%B %d, %Y %H:%M")
var min_x = d3.min(data, function (d) { return d.date });
var minx = dateFormat(min_x)
var max_x = d3.max(data, function (d) { return d.date });
var maxx = dateFormat(max_x)
// Scale the range of the data
x.domain(d3.extent(data, function (d) { return d.date; }));
// y.domain([0, d3.max(data, function (d) { return d.value; })]);
y.domain([miny, maxy]);
// y.domain(d3.extent(data, function (d) { return d.value; }));
// Group the entries by port
dataNest1 = Array.from(
d3.group(data, d => d.port), ([key, value]) => ({ key, value })
);
// set the colour scale from variable seriesColors
// var color = d3.scaleOrdinal(d3.schemeCategory10);
var color = d3.scaleOrdinal().range(seriesColors1);
legendSpace = height / dataNest1.length; // spacing for the legend width
// Loop through each port / key
dataNest1.forEach(function (d, i) {
svg4.append("path")
.attr("class", "line")
// .attr("data-legend",function() { return d.color = color(d.key)})
.style("stroke", function () { // Add the colours dynamically
return d.color = color(d.key);
})
.attr("id", 'tag3' + d.key.replace(/\s+/g, '')) // assign an ID
.attr("d", valueline1(d.value));
// Add the Legend
var category = "Precipitation" ;
svg4.append("text")
// .attr("y", (legendSpace / 2) + i * legendSpace) // space legend x
// .attr("y", height + (margin.bottom / 2) + 25)
.attr("y", 306 + i * 22)
.attr("x", (margin.left) + 650) //margin.top -20
.attr("class", "legend1") // style the legend
.style("fill", function () { // Add the colours dynamically
return d.color = color(d.key);
})
.text(category)
svg4.append("line")
.attr("x1", (margin.left) + 570 )
.attr("y1", 300 + i*22)
.attr("x2", (margin.left) + 600)
.attr("y2", 300 + i*22)
.attr("class","linelegend")
.style("stroke", d.color)
});
// --------- Text top data from to ----
svg4.append("text")
.attr("y", 20)
.attr("x", (margin.left) +570) //margin.top -20
.attr("class", "txtDate")
// .style("font-size","12px") // style the legend
// .style("fill", "black")
.text("30 Days Data ");
svg4.append("text")
.attr("y", 38)
.attr("x", (margin.left) +570) //margin.top -20
.attr("class", "txtDate")
// .style("font-size","12px") // style the legend
// .style("fill", "black")
.text("Last Data: ");
svg4.append("text")
.attr("y", 54)
.attr("x", (margin.left) +570) //margin.top -20
.attr("class", "txtDatebox")
// .style("font-size","12px") // style the legend
// .style("fill", "black")
.text(maxx);
// Add the X Axis
svg4.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg4.append("text")
.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom - 30) + ")")
.style("text-anchor", "middle")
.text("Date Time");
// Add the Y Axis
var axisY = d3.axisLeft(y);
svg4.append("g")
.attr("class", "axis")
.call(axisY.tickArguments([9]));
// Add the text label for the Y axis
svg4.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 20 - margin.left)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text(YaxisText3);
// add the X gridlines
svg4.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.style("stroke-dasharray", ("3, 7"))
.call(make_x_gridlines()
.tickSize(-height)
.tickFormat("")
)
// add the Y gridlines
svg4.append("g")
.attr("class", "grid")
.style("stroke-dasharray", ("3, 7"))
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
)
// ---- lines superior right graph
svg4.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", width)
.attr("y2", 0)
.style("stroke", "gray")
svg4.append("line")
.attr("x1", width)
.attr("y1", 0)
.attr("x2", width)
.attr("y2", height)
.style("stroke", "gray")
});