Advertisement
dhshin

line_chart_tooltip

Mar 25th, 2018
133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.53 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <style>
  7.     div.tooltip {
  8.       position: absolute;
  9.       text-align: center;
  10.       width: 90px;
  11.       height: 32px;
  12.       padding: 2px;
  13.       font: 12px sans-serif;
  14.       background: lightsteelblue;
  15.       border: 0px;
  16.       border-radius: 4px;
  17.       pointer-events: none;
  18.     }
  19.   </style>
  20.   <title>JS Bin</title>
  21. </head>
  22. <body>
  23.   <svg width="960" height="500"></svg>
  24.   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
  25.   <script>
  26.    
  27.     function ready(fn) {
  28.       if (document.readyState != 'loading'){
  29.         fn();
  30.       } else {
  31.         document.addEventListener('DOMContentLoaded', fn);
  32.       }
  33.     }
  34.    
  35.     ready(init);
  36.    
  37.     function init() {
  38.      
  39.       let parseDate = d3.timeParse("%b-%y");
  40.      
  41.       function parsing(d) {
  42.         d.date = parseDate(d.date);
  43.         return d;
  44.       }
  45.      
  46.       data = data.map(parsing);
  47.      
  48.       let svg = d3.select("svg");
  49.       let margin = {top: 20, right: 20, bottom: 20, left: 40};
  50.       let width = +svg.attr("width") - margin.left - margin.right;
  51.       let height = +svg.attr("height") - margin.top - margin.bottom;
  52.      
  53.       let chart = svg
  54.       .append('g')
  55.         .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
  56.      
  57.       let x = d3
  58.       .scaleTime()
  59.       .domain(d3.extent(data, d => d.date))
  60.       .range([0, width]);
  61.      
  62.       let y = d3
  63.       .scaleLinear()
  64.       .domain([0, d3.max(data, d => d.price)])
  65.       .range([height, 0]);
  66.      
  67.       let xAxis = d3.axisBottom(x);
  68.       let yAxis = d3.axisLeft(y);
  69.      
  70.       chart
  71.         .append('g')
  72.           .attr('transform', 'translate(0, ' + height + ')')
  73.           .call(xAxis);
  74.      
  75.       chart
  76.         .append('g')
  77.           .call(yAxis);
  78.      
  79.       let priceLine = d3.line()
  80.       .x(d => x(d.date))
  81.       .y(d => y(d.price));
  82.      
  83.       let costLine = d3.line()
  84.       .x(d => x(d.date))
  85.       .y(d => y(d.cost))
  86.       .curve(d3.curveMonotoneX);
  87.      
  88.       chart
  89.       .append('path')
  90.         .data([data])
  91.         .attr('fill', 'none')
  92.         .attr('stroke', 'darkred')
  93.         .attr('stroke-width', 2)
  94.         .attr('d', priceLine);
  95.      
  96.       chart
  97.       .append('path')
  98.         .datum(data)
  99.         .attr('fill', 'none')
  100.         .attr('stroke', 'steelblue')
  101.         .attr('stroke-width', 2)
  102.         .attr('d', costLine);
  103.      
  104.       chart
  105.       .selectAll('dot')
  106.       .data(data)
  107.       .enter()
  108.       .append('circle')
  109.         .attr('r', 2)
  110.         .attr('cx', d => x(d.date))
  111.         .attr('cy', d => y(d.price))
  112.         .attr('class', 'pricedots')
  113.         .style('fill', 'darkred');
  114.      
  115.       let div = d3
  116.       .select('body')
  117.       .append('div')
  118.       .attr('class', 'tooltip')
  119.       .style('opacity', 0);
  120.      
  121.       let formatTime = d3.timeFormat('%b-%Y');
  122.      
  123.       chart
  124.       .selectAll('.pricedots')
  125.       .on('mouseover', d => {
  126.         div
  127.           .transition()
  128.           .duration(200)
  129.           .style('opacity', 0.9);
  130.         div
  131.          .html('date: ' + formatTime(d.date) + '<br/>' +
  132.                'price: ' + d.price)
  133.          .style('left', (d3.event.pageX + 5) + 'px')
  134.          .style('top', (d3.event.pageY - 35) + 'px');
  135.       })
  136.       .on('mouseout', d => {
  137.         div
  138.           .transition()
  139.           .duration(500)
  140.           .style("opacity", 0);
  141.       });
  142.  
  143.     }
  144.        
  145.   </script>
  146. </body>
  147. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement