title tbd

desc tbd

HTML

<script src="http://dygraphs.com/dygraph.js"></script>
<script src="http://dygraphs.com/src/extras/smooth-plotter.js"></script>
<div id="div_g" style="width:600px; height:300px;"></div>
<p>When you zoom and pan, the region remains highlighted.</p>

JavaScript

$(document).ready(function() {
 
 smoothPlotter.smoothing = 0.38;
 
 function barChartPlotter(e) {
            const ctx = e.drawingContext;
            const points = e.points;
            const y_bottom = e.dygraph.toDomYCoord(0);

            ctx.fillStyle = 'pink';

            // Find the minimum separation between x-values.
            // This determines the bar width.
            let min_sep = Infinity;
            let i = 0;
            for (i = 1; i < points.length; i++) {
                let sep = points[i].canvasx - points[i - 1].canvasx;
                if (sep !== 0 && sep < min_sep) min_sep = sep;
            }
            const tmpWidth = Math.floor(2.0 / 10 * min_sep);
            const MAX_WIDTH = 50;
            const MIN_WIDTH = 5;
            // nunca menor que 5 y nunca mayor que 70
            const bar_width = (tmpWidth >= MIN_WIDTH) ? ((tmpWidth > MAX_WIDTH) ? MAX_WIDTH : tmpWidth) : MIN_WIDTH;
            console.log(bar_width);
            i = 0;
            // Do the actual plotting.
            for (i = 0; i < points.length; i++) {
                const p = points[i];
                const center_x = p.canvasx;

                ctx.fillRect(center_x - bar_width / 2, p.canvasy,
                    bar_width, y_bottom - p.canvasy);

                ctx.strokeRect(center_x - bar_width / 2, p.canvasy,
                    bar_width, y_bottom - p.canvasy);
            }
        }
 
 	var data = [
  [
    1561240800000,
    0,
    null
  ],
  [
    1561240800000,
    0,
    null
  ],
  [
    1561240800000,
    null,
    6.66
  ],
  [
    1561240802000,
    null,
    6.66
  ],
  [
    1561241402000,
    null,
    6.64
  ],
  [
    1561243802000,
    null,
    6.66
  ],
  [
    1561244400000,
    0,
    null
  ],
  [
    1561246202000,
    null,
    6.66
  ],
  [
    1561248000000,
    0,
    null
  ],
  [
    1561248602000,
    null,
    6.58
  ],
  [
    1561249802000,
    null,
    6.65
  ],
  [
    1561251002000,
    null,
    6.65
  ],
 ...