D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
ssmaroju
Full window
Github gist
Single Line Chart with Time converted to another Time Zone using Moment.JS Raw
<!DOCTYPE html> <meta charset="utf-8"> <style> /* set the CSS */ body { font: 12px Arial;} path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; } div.tooltip { position: absolute; text-align: center; width: 150px; height: 28px; padding: 2px; font: 12px sans-serif; background: lightsteelblue; border: 0px; border-radius: 8px; /* pointer-events: none; This line needs to be removed */ } </style> <body> <!-- load the d3.js library --> <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script type="text/javascript" src="moment-timezone.js"></script> <script> // Set the dimensions of the canvas / graph var margin = {top: 30, right: 20, bottom: 30, left: 50}, width = 600 - margin.left - margin.right, height = 270 - margin.top - margin.bottom; // Parse the date / time var parseDate = d3.time.format("%Y-%m-%d %X").parse; //27-May-12 16:00:00. This is used for D3JS parsing var formatTime = d3.time.format("%Y-%m-%d %X");// Format tooltip date / time // 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); var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(5); // Define the line var valueline = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.close); }); // Define 'div' for tooltips var div = d3.select("body") .append("div") // declare the tooltip div .attr("class", "tooltip") .style("opacity", 0); // Adds the svg canvas var svg = d3.select("body") .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 + ")"); // Get the data d3.csv("datatips.csv", function(error, data) { data.forEach(function(d) { d.date = parseDate(moment.tz(moment.utc(d.date).clone(), "America/Chicago").format("YYYY-MM-DD HH:mm:ss"));// Converting UTC time to US/Chicago time and formatting for D3 parseDate d.close = +d.close; }); // 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.close; })]); // Add the valueline path. svg.append("path") .attr("class", "line") .attr("d", valueline(data)); // draw the scatterplot svg.selectAll("dot") .data(data) .enter().append("circle") .attr("r", 5) .attr("cx", function(d) { return x(d.date); }) .attr("cy", function(d) { return y(d.close); }) // Tooltip stuff after this .on("mouseover", function(d) { div.transition() .duration(500) .style("opacity", 0); div.transition() .duration(200) .style("opacity", .9); div .html( '<a href= "'+d.link+'" target="_blank">' + //with a link formatTime(d.date) + "</a>" + "<br/>" + d.close) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }); // 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); }); </script> </body>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js