diff --git a/docs/HistogramView.js b/docs/HistogramView.js index ecfc835da0a..b5aed0d8a7b 100644 --- a/docs/HistogramView.js +++ b/docs/HistogramView.js @@ -3,13 +3,15 @@ class HistogramView { constructor() { } - show(batchcode, div) { + show(batchcode, uiContainer) { fetch(`data/histograms/${batchcode}.json`) .then(response => response.json()) .then(json => { const data = json.histograms[3].histogram; + const canvas = document.createElement("canvas"); + uiContainer.appendChild(canvas); new Chart( - div.querySelector('#symptomByBatchcodeHisto'), + canvas, { type: 'bar', data: { diff --git a/docs/batchCodeTable.js b/docs/batchCodeTable.js index 2acfe0c0c54..32703ee92d5 100644 --- a/docs/batchCodeTable.js +++ b/docs/batchCodeTable.js @@ -16,13 +16,6 @@ class BatchCodeTableInitializer { this.#countrySelect.addEventListener('change', event => this.#displayCountry(event.target.value)); this.#displayCountry('Global') const histogramView = new HistogramView(); - function createDiv() { - const div = document.createElement("div"); - const canvas = document.createElement("canvas"); - canvas.setAttribute("id", "symptomByBatchcodeHisto"); - div.appendChild(canvas); - return div; - } const thisClassInstance = this; $(`#${this.#batchCodeTableElement[0].id} tbody`).on( 'click', @@ -34,10 +27,10 @@ class BatchCodeTableInitializer { row.child.hide(); tr.removeClass('shown'); } else { - const div = createDiv(); - row.child(div).show(); + const uiContainer = document.createElement("div"); + row.child(uiContainer).show(); tr.addClass('shown'); - histogramView.show('FD6840', div); + histogramView.show('FD6840', uiContainer); } }); }