0

I rendered a chart to container in $(document).ready().

After that, I used the method mentioned here(How can i get access to a Highcharts chart through a DOM-Container), But it said that the chart is not defined. Below is my javascript code.

$(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);
}

I am using django as my web framework. Below is my html code.

{% load static %}
<head>
    <!-- load .js here -->
</head>

<body>
    <div id="container"></div>
<script>
    draw_plot({{ original_data }})
</script>
</body>

And my views.py

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 primary purpose is to change the chart data dynamically. So are there any other solutions if this problem can't be solved.

UPDATE:

  1. the error I got is "Uncaught TypeError: Cannot read property 'series' of undefined". It happens when I call draw_plot() function.
  2. By dynamically, I mean the chart is redrawn every few minutes.
Community
  • 1
  • 1
Jiaming Lin
  • 57
  • 5
  • 1) can you show the traceback of the error (where do you get the error) 2) what do you mean by dynamically (should it be autoloaded every minute or so or just changed on re-load)? – ger.s.brett Oct 01 '16 at 09:55

1 Answers1

0

I find out the reason, I make a beginner mistake.

The function draw_plot() invoked before the $(document).ready(). So I can't access the $('#container').highcharts() object.

Jiaming Lin
  • 57
  • 5