How do I selecting a date range (like onClick but drag/select)

I'd like to rewrite vizwit using Chart.js, and I'm having a hard time figuring out how to get the date/time chart interaction to work. If you try selecting a date range on this demo, you'll see that it filters the other charts. How do I get Chart.js to let me select a range like that on its time scale chart? It seems like by default it only lets me click on a specific date point.

Thanks for your time.

Answers


Building on @jordanwillis's and your answers, you can easily achieve anything you want, by placing another canvas on top on your chart. Just add pointer-events:none to it's style to make sure it doesn't intefere with the chart's events. No need to use the annotations plugin. For example (in this example canvas is the original chart canvas and overlay is your new canvas placed on top):

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var canvas = document.getElementById('chartJSContainer');
var ctx = canvas.getContext('2d');
var chart = new Chart(ctx, options);
var overlay = document.getElementById('overlay');
var startIndex = 0;
overlay.width = canvas.width;
overlay.height = canvas.height;
var selectionContext = overlay.getContext('2d');
var selectionRect = {
  w: 0,
  startX: 0,
  startY: 0
};
var drag = false;
canvas.addEventListener('pointerdown', evt => {
  const points = chart.getElementsAtEventForMode(evt, 'index', {
    intersect: false
  });
  startIndex = points[0]._index;
  const rect = canvas.getBoundingClientRect();
  selectionRect.startX = evt.clientX - rect.left;
  selectionRect.startY = chart.chartArea.top;
  drag = true;
  // save points[0]._index for filtering
});
canvas.addEventListener('pointermove', evt => {

  const rect = canvas.getBoundingClientRect();
  if (drag) {
    const rect = canvas.getBoundingClientRect();
    selectionRect.w = (evt.clientX - rect.left) - selectionRect.startX;
    selectionContext.globalAlpha = 0.5;
    selectionContext.clearRect(0, 0, canvas.width, canvas.height);
    selectionContext.fillRect(selectionRect.startX,
      selectionRect.startY,
      selectionRect.w,
      chart.chartArea.bottom - chart.chartArea.top);
  } else {
    selectionContext.clearRect(0, 0, canvas.width, canvas.height);
    var x = evt.clientX - rect.left;
    if (x > chart.chartArea.left) {
      selectionContext.fillRect(x,
        chart.chartArea.top,
        1,
        chart.chartArea.bottom - chart.chartArea.top);
    }
  }
});
canvas.addEventListener('pointerup', evt => {

  const points = chart.getElementsAtEventForMode(evt, 'index', {
    intersect: false
  });
  drag = false;
  console.log('implement filter between ' + options.data.labels[startIndex] + ' and ' + options.data.labels[points[0]._index]);  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>

<body>
  <canvas id="overlay" width="600" height="400" style="position:absolute;pointer-events:none;"></canvas>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Unfortunately, nothing like this is built into chart.js. You would have to implement your own event hooks and handlers that would render a highlighted section on a chart and then use the .getElementsAtEvent(e) prototype method to figure out what data has been highlighted. Even these hooks that are built in may not be enough to implement what you are wanting.

Event hook options are:

  • Add event handlers on the canvas element itself (see example below)

    canvas.onclick = function(evt){
        var activePoints = myLineChart.getElementsAtEvent(evt);
        // => activePoints is an array of points on the canvas that are at the same position as the click event.
    };
    
  • Add event handler on the chart.js chart object using the onClick config option (explained here).

  • Extend some of the core charts event hooks and add your own. (see here for some guidance).

Assuming this approach works, then you could then filter your original chart data array accordingly (in the underlying chart.js object) and call the .update() prototype method to paint a new chart.


Update a few months later based on @jordanwillis' answer: I've got the beginnings of range selection.

canvas.onpointerdown = function (evt) {
  clearAnnotations()
  const points = chart.getElementsAtEventForMode(evt, 'index', { intersect: false })
  const label = chart.data.labels[points[0]._index]
  addAnnotation(label)
}

canvas.onpointerup = function (evt) {
  const points = chart.getElementsAtEventForMode(evt, 'index', { intersect: false })
  const label = chart.data.labels[points[0]._index]
  addAnnotation(label)
}

function clearAnnotations () {
  if (chart.options.annotation) {
    chart.options.annotation.annotations = []
  }
}

function addAnnotation (label) {
  const annotation = {
    scaleID: 'x-axis-0',
    type: 'line',
    mode: 'vertical',
    value: label,
    borderColor: 'red'
  }
  chart.options.annotation = chart.options.annotation || {}
  chart.options.annotation.annotations = chart.options.annotation.annotations || []
  chart.options.annotation.annotations.push(annotation)
  chart.update()
}

Still need to figure out how to show a visual hover indicator as in the demo linked in the question, but it's a start.


Need Your Help

ASP.NET Core MVC: setting expiration of identity cookie

asp.net-mvc asp.net-identity asp.net-core asp.net-core-mvc

In my ASP.NET Core MVC app the lifetime of the authentication cookie is set to 'Session', so it lasts until I close the browser.

How can I check if a string is null or empty in PowerShell?

.net string powershell null

Is there a built-in IsNullOrEmpty-like function in order to check if a string is null or empty, in PowerShell?