Initially, I created a chart and rendered it to a container using $(document).ready().
However, when I attempted to access the chart through a DOM container as mentioned in this Stack Overflow post, I encountered an error stating that the chart is not defined. Below you can find the javascript code I utilized.
$(document).ready(function () {
$('#container').highcharts({
// ignore some option here
series: [{
data: []
}]
});
});
function draw_plot(original_data) {
var chart = $("#container").highcharts();
// chart is not defined
chart.series[0].setData(original_data, false);
}
In my project, I am using Django as my web framework. Here's the snippet of HTML code from my project.
{% load static %}
<head>
<!-- load .js here -->
</head>
<body>
<div id="container"></div>
<script>
draw_plot({{ original_data }})
</script>
</body>
The views.py file in my project contains the following code.
def index(request):
template = loader.get_template('plot_example/example.html')
x, y = synthesize_data()
original_data = np.column_stack((x, y)).tolist()
context = {
'original_data': original_data,
}
return HttpResponse(template.render(context, request))
My main goal is to dynamically change the data of the chart. Do let me know if there are any alternative solutions to resolve this issue.
UPDATE:
- The specific error message I received was "Uncaught TypeError: Cannot read property 'series' of undefined". This occurred when I invoked the draw_plot() function.
- By dynamically, I mean that the chart needs to be updated or redrawn every few minutes.