I am trying to change the chart content with the following script:
function switchType() {
var e = document.getElementById("typeSelect");
var selected_value = e.options[e.selectedIndex].value;
console.log(selected_value)
anychart.onDocumentReady(function () {
var ents = {{ entities_dict|safe }}
var dropdown = document.getElementById("typeSelect");
var val = dropdown.value;
/*
var data = [
{value: 'GeopoliticalEntity',
children: [
{% for i in entities_dict.get('GeopoliticalEntity') %}
{value: "{{ i }}"},
{% endfor %}
]}
];
*/
var data = [
];
data.push({value: val,
children: [
{value: "country"},
{value: "europe"},
{value: "German"},
]})
//let result = data.map(a => a.children);
// create a chart and set the data
var chart = anychart.wordtree(data, "as-tree");
// set the chart title
chart.title("Word Tree: Data (Tree)");
// set the container id
chart.container("word_tree");
// initiate drawing the chart
chart.draw();
});
}
This is my HTML
<div class="container">
<div class="jumbotron">
{% for k in survey %}
<h2 class="display-4">Keyword Analysis</h2>
<h2 class="display-5">Most frequent keywords</h2>
<div id="word_cloud" style="width: 1000px; height: 500px; margin-bottom:5px;"></div><br>
<h2 class="display-5">Keyword frequency and their relevance score</h2>
<div id="bubble_chart" style="width: 1000px; height: 500px;"></div><br>
<h2 class="display-5">Entities found in responses</h2>
<select id="typeSelect" onchange="switchType()">
{% for key in entities_dict.keys() %}
{% if loop.first %}
<option selected="selected" value="{{ key }}">{{ key }}</option>
{% else %}
<option selected="selected" value="{{ key }}">{{ key }}</option>
{% endif %}
{% endfor %}
</select>
<div id="word_tree" style="width: 1000px; height: 500px;"></div>
{% endfor %}
</div>
</div>
The result is that it creates the chart, then creates another one below, and another one on each select change.
Is there any way to overwrite the requested div instead of appending another one to the HTML page?
This piece of code I found on this thread solved it for me: How to overwrite html element from javascript?
if (element) {
// Get its parent
parent = element.parentNode;
// Create the new element
newElement = document.createElement('div');
// Set its ID and content
newElement.id = "word_tree";
// Insert the new one in front of the old one (this temporarily
// creates an invalid DOM tree [two elements with the same ID],
// but that's harmless because we're about to fix that).
parent.insertBefore(newElement, element);
// Remove the original
parent.removeChild(element);
}