(function (d3, saveAs, jsPDF) {
var data = [
{"y":0.5074666906113496,"x":"2017-03-20T23:00:00.000Z"},
{"y":0.9527321029510436,"x":"2017-03-21T00:00:00.000Z"},
{"y":0.7600950959703447,"x":"2017-03-21T01:00:00.000Z"},
{"y":0.20580227686108898,"x":"2017-03-21T02:00:00.000Z"},
{"y":0.5733164708745364,"x":"2017-03-21T03:00:00.000Z"},
{"y":0.7564259320114604,"x":"2017-03-21T04:00:00.000Z"},
{"y":0.6267454112244419,"x":"2017-03-21T05:00:00.000Z"},
{"y":0.11944023054210295,"x":"2017-03-21T06:00:00.000Z"},
{"y":0.9297418072540851,"x":"2017-03-21T07:00:00.000Z"},
{"y":0.8884353531688012,"x":"2017-03-21T08:00:00.000Z"},
{"y":0.5619578787536637,"x":"2017-03-21T09:00:00.000Z"},
{"y":0.23583955393871814,"x":"2017-03-21T10:00:00.000Z"},
{"y":0.2680568515809374,"x":"2017-03-21T11:00:00.000Z"},
{"y":0.9129909442537631,"x":"2017-03-21T12:00:00.000Z"},
{"y":0.80968968597973014,"x":"2017-03-21T13:00:00.000Z"},
{"y":0.6812223330198619,"x":"2017-03-21T14:00:00.000Z"},
{"y":0.8875838775047455,"x":"2017-03-21T15:00:00.000Z"},
{"y":0.5664612526995818,"x":"2017-03-21T16:00:00.000Z"},
{"y":0.4302245708963415,"x":"2017-03-21T17:00:00.000Z"},
{"y":0.942675240989681,"x":"2017-03-21T18:00:00.000Z"}
];
var margin = {top: 20, right: 20, bottom: 30, left: 50};
var width = 550 - margin.left - margin.right;
var height = 350 - margin.top - margin.bottom;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var svg = addSvg();
var exportButtonToPng = document.getElementById('download-png');
var exportButtonToPdf = document.getElementById('download-pdf');
addDomains();
addValueLine();
addAxes();
addMouseAction();
exportButtonToPng.addEventListener('click', exportToPng);
exportButtonToPdf.addEventListener('click', exportToPdf);
function addSvg() {
return d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("style", "font: 12px Verdana;")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
}
function addValueLine() {
var valueline = d3.svg.line()
.x(function(d) { return x(new Date(d.x)); })
.y(function(d) { return y(d.y); });
svg.append("path")
.attr("style", "stroke: steelblue; stroke-width: 2; fill: none;")
.attr("class", "line")
.attr("d", valueline(data));
}
function addDomains() {
x.domain(d3.extent(data, function(d) { return new Date(d.x); }));
y.domain([0, d3.max(data, function(d) { return d.y; })]);
}
function addAxes() {
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.selectAll('.domain')
.attr('style', 'stroke-width: 1; fill: none; stroke: black;');
svg.selectAll('.tick').selectAll('line')
.attr('style', 'stroke-width: 1; fill: none; stroke: black;')
}
function addMouseAction() {
var focusLine = addFocusLine();
var point = addPoint();
var bisectDate = d3.bisector(function (d) {
return new Date(d.x);
}).left;
svg.append('rect')
.attr('class', 'overlay')
.attr('transform', 'translate(' + (-15) + ',0)')
.attr('width', width + 30)
.attr('height', height)
.attr('style', 'fill: none; pointer-events: all')
.on('mouseout', function () {
point.style('display', 'none');
focusLine.style('display', 'none');
})
.on('mousemove', function () {
var mouse = d3.mouse(this);
var mouseX = mouse[0];
var mouseY = mouse[1];
var mousePos = mouseX - 15;
var mouseAsDates = [x.invert(mousePos), x.invert(mouseY)];
var index = bisectDate(data, mouseAsDates[0], 0);
var d0 = data[index - 1];
var d1 = data[index];
if (!d0 || !d1) {
return;
}
point.style('display', 'block');
focusLine.style('display', 'block');
focusLine.attr('transform', 'translate(' + mousePos + ',' + 0 + ')');
var firstPoint = {w: x(new Date(d0.x)), h: y(d0.y)};
var secondPoint = {w: x(new Date(d1.x)), h: y(d1.y)};
var yPos = getPositionByThales(mousePos, firstPoint, secondPoint);
point.attr('transform', 'translate(' + mousePos + ',' + yPos + ')');
});
}
function addFocusLine() {
return svg.append('line')
.attr('y0', 0)
.attr('y1', height)
.attr('x0', 0)
.attr('x1', 0)
.style('stroke-width', 1)
.style('stroke', 'rgba(0,0,0,0.6)')
.style('fill', 'none');
}
function addPoint() {
return svg.append('g')
.append('circle')
.style('display', 'none')
.attr('r', 4)
.attr('fill', 'red');
}
function getPositionByThales(currentWidth, previousPoint, currentPoint) {
var firstHeight = previousPoint.h - currentPoint.h;
var widthBetweenCursorAndNextPoint = currentPoint.w - currentWidth;
var widthBetweenPoints = currentPoint.w - previousPoint.w;
var secondHeight = (firstHeight * widthBetweenCursorAndNextPoint) / widthBetweenPoints;
return secondHeight + currentPoint.h;
}
function exportToPng() {
var baseSVG = document.getElementById('chart').getElementsByTagName('svg')[0];
var canvas = prepareCanvas(baseSVG, 1);
var imageData = prepareImageData(baseSVG);
var drawingFn = isIE11() ? drawOnCanvasForIE11 : drawOnCanvas;
drawingFn(canvas, imageData, function () {
if (canvas.msToBlob) {
download(canvas.msToBlob());
} else {
canvas.toBlob(download);
}
});
}
function prepareCanvas(baseSVG, scale) {
var svgDimensions = baseSVG.getBoundingClientRect();
var canvas = document.createElement('canvas');
canvas.width = svgDimensions.width * scale;
canvas.height = svgDimensions.height * scale;
return canvas;
}
function prepareImageData(baseSVG) {
var xml = new XMLSerializer().serializeToString(baseSVG);
var svg64 = btoa(unescape(encodeURIComponent(xml)));
var b64Start = 'data:image/svg+xml;base64,';
return b64Start + svg64;
}
function drawOnCanvas(canvas, imageData, exportProcessFn) {
var img = new Image();
var ctx = canvas.getContext('2d');
img.src = imageData;
img.onload = function () {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
exportProcessFn()
};
}
function drawOnCanvasForIE11(canvas, baseSVG, exportProcessFn) {
canvg(canvas, (new XMLSerializer()).serializeToString(baseSVG), {
ignoreDimensions: true,
ignoreClear: true,
ignoreMouse: true,
ignoreAnimation: true,
scaleWidth: canvas.width,
scaleHeight: canvas.height
});
exportProcessFn();
}
function download(blob) {
saveAs(blob, + 'chart.png');
}
function isIE11() {
return navigator.userAgent.includes('MSIE') || navigator.userAgent.includes('Trident/');
}
function exportToPdf() {
var baseSVG = document.getElementById('chart').getElementsByTagName('svg')[0];
var canvas = prepareCanvas(baseSVG, 4);
addBackgroundToCanvas(canvas);
var imageData = prepareImageData(baseSVG);
var drawingFn = isIE11() ? drawOnCanvasForIE11 : drawOnCanvas;
drawingFn(canvas, imageData, function () {
exportPdf(canvas);
});
}
function addBackgroundToCanvas(canvas) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'black';
}
function exportPdf(canvas) {
var imgDimensions;
var doc = new jsPDF({
orientation: 'landscape',
unit: 'mm',
format: 'a4'
});
imgDimensions = getImageDimensions(canvas);
doc.addImage(
canvas.toDataURL('image/jpeg'),
'JPEG',
imgDimensions.x,
imgDimensions.y,
imgDimensions.width,
imgDimensions.height,
'',
'FAST'
);
doc.setDisplayMode('original');
doc.save('chart.pdf');
}
function getImageDimensions(canvas) {
var xMargin = 4;
var yMargin = 4;
var pixelToMillimeter = 0.264583333;
var a4SheetWidthMillimeters = 297 - xMargin * 2;
var width = canvas.width * pixelToMillimeter;
var height = canvas.height * pixelToMillimeter;
if (width > a4SheetWidthMillimeters) {
height = a4SheetWidthMillimeters / width * height;
width = a4SheetWidthMillimeters;
}
return {x: xMargin, y: yMargin, width: width, height: height};
}
})(window.d3, window.saveAs, window.jsPDF);
<div id="chart"></div>
<button id="download-png">Export to PNG</button>
<button id="download-pdf">Export to PDF</button>