Author: John Au-Yeung

Sometimes, we want to listen to click events on a bar chart with Chart.js.

In this article, we’ll look at how to listen to click events on a chart with Chart.js.

How to listen to click events on a chart with Chart.js?

To listen to click events on a bar chart with Chart.js, we set the options.onClick property to an event handler function.

For instance, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

<canvas id='myChart' style='width: 300px; height: 300px'></canvas>

to add the canvas for the chart.

Then we write:

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Monday', 'Tuesday', 'Wednesday'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      borderWidth: 1,
      borderColor: 'green'
    }]
  },
  options: {
    onClick(e) {
      console.log(e)
    }
  }
});

to set the options.onClick property to the click event listener.

Now when we click on an item in the chart, we should see the click event object logged.

Conclusion

To listen to click events on a bar chart with Chart.js, we set the options.onClick property to an event handler function.

Sometimes, we want to count unique elements in array without sorting with JavaScript.

In this article, we’ll look at how to count unique elements in array without sorting with JavaScript.

How to count unique elements in array without sorting with JavaScript?

To count unique elements in array without sorting with JavaScript, we can convert the array to a set and then get its size with the size property.

For instance, we write:

const countUnique = (iterable) => {
  return new Set(iterable).size;
}

console.log(countUnique([5, 6, 5, 6]));

We create the countUniquer function that takes an iterable object.

In the function, we convert iterable to a set with the Set constructor.

And then we get the size of the set with the size property.

Therefore, the console log should log 2.

Conclusion

To count unique elements in array without sorting with JavaScript, we can convert the array to a set and then get its size with the size property.

Sometimes, we want to set a new ID for a element with jQuery.

In this article, we’ll look at how to set a new ID for a element with jQuery.

How to set a new ID for a element with jQuery?

To set a new ID for a element with jQuery, we can call the attr method.

For instance, we write:

<div>
  hello world
</div>

to add a div.

Then we write:

$('div').attr('id', 'foo')

to select the div with $.

Then we call attr with the attribute name and value respectively.

Therefore, the div should now have the id attribute set to foo.

Conclusion

To set a new ID for a element with jQuery, we can call the attr method.

Sometimes, we want to create a table with JavaScript.

In this article, we’ll look at how to create a table with JavaScript.

How create a table with JavaScript?

To create a table with JavaScript, we can use the document.createElement and document.createTexNode methods.

For instance, we write:

const table = document.createElement('table');
for (let i = 1; i < 5; i++) {
  const tr = document.createElement('tr');

  const td1 = document.createElement('td');
  const td2 = document.createElement('td');

  const text1 = document.createTextNode('Text1');
  const text2 = document.createTextNode('Text2');

  td1.appendChild(text1);
  td2.appendChild(text2);
  tr.appendChild(td1);
  tr.appendChild(td2);

  table.appendChild(tr);
}
document.body.appendChild(table);

We call document.createElement to create the table element.

Then we add a for loop to create the tr element and the td elements inside the tr.

We create the tr and tds with document.createElement.

Next, we create the text nodes for the td elements with document.createTextNode.

Then we call appendChild to append the text nodes to the tds and append the tds to the trs.

Finally, we call table.appendChild to append the tr to the table element.

And we call document.body.appendChild with table to append the table to the body element.

Conclusion

To create a table with JavaScript, we can use the document.createElement and document.createTexNode methods.