Highcharts using Django-Chartit. Chart lines not displayed without window resize, or Inspect Element

Question

I'm just starting out with Python/Django, and am trying to use the Chartit library to create some charts.

I've followed the instructions here, to setup a project with a simple line and a column chart. I can see the values when I hover over the charts.

But the lines or the columns themselves do not display, as seen in the screenshot below.

Following is the code I have in place for these charts.

MODEL:

class MonthlyWeatherByCity(models.Model):
    def __str__(self):
        return str(self.month) + "(H: " + str(self.houston_temp) + ", B: " + 
str(self.boston_temp) + ")"

    month = models.IntegerField()
    boston_temp = models.DecimalField(max_digits=5, decimal_places=1)
    houston_temp = models.DecimalField(max_digits=5, decimal_places=1)

VIEW:

def weather_chart_view(request):
    #Step 1: Create a DataPool with the data we want to retrieve.
    weatherdata = \
        DataPool(
           series=
            [{'options': {
               'source': MonthlyWeatherByCity.objects.all()},
              'terms': [
                'month',
                'houston_temp',
                'boston_temp']}
             ])

    #Step 2: Create the Chart object
    lcht = Chart(
            datasource = weatherdata,
            series_options =
              [{'options':{
                  'type': 'line',
                  'stacking': False},
                'terms':{
                  'month': [
                    'boston_temp',
                    'houston_temp']
                  }}],
            chart_options =
              {'title': {
                   'text': 'Weather Data of Boston and Houston'},
                'xAxis': {
                    'title': {
                       'text': 'Month'}},
                'yAxis': {
                  'title': {
                      'text': 'Temperature'}}
              })

    pcht = Chart(
            datasource = weatherdata,
            series_options =
              [{'options':{
                  'type': 'pie',
                  'stacking': False},
                'terms':{
                  'month': [
                    'boston_temp',
                    'houston_temp']
                  }}],
            chart_options =
              {'title': {
                   'text': 'Weather Data of Boston and Houston'},
                'xAxis': {
                    'title': {
                       'text': 'Month'}},
                'yAxis': {
                  'title': {
                      'text': 'Temperature'}}
              })    
    #Step 3: Send the chart object to the template.
    return render_to_response('polls/template.html', {'weatherCharts': [lcht, pcht]})

TEMPLATE:

<head>
    <meta charset="UTF-8">
    <title>Results: Question {{ question.id }}</title>

    <script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type ="text/javascript" src ="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/static/js/highcharts.js"></script>

    {% load chartit %}
    {{ weatherCharts|load_charts:"lcht, pcht" }}
</head>
<body>
<div id='lcht'> Chart will be rendered here </div>
<div id='pcht'> Chart will be rendered here </div>
</body>
</html>

No idea what I'm doing wrong, and it would be great if someone can point me in the right direction.

P.S. I'm not very experienced with web development, still learning :)

Update 1

Debugging shows me the data being loaded (See following image), and everything seems to be in order. Still at a loss as to why the lines aren't displayed.

Update 2

This link led me to pin-point the issue. Maybe it's a bug with Highcharts. Can anybody suggest a way to resolve it with django?

Adding

<script>
    $(window).resize();
</script>

or

<script>
    document.getElementById('lcht').style.width = "100%";
</script>

or

<script> 
    $('#lcht').resize(); 
</script>

does not resolve the problem.

I don't think, that it is a bug in Higcharts. What version of Highcharts has been used? Can you reproduce error with simple JavaScript example? Is it necessary for you to use another layer of abstraction on top of Highcharts library? What benefits does it give you? — stpoa, Apr 18 '17 at 10:57
Highcharts JS v2.1.7 (2011-10-19) I did not try it with a simple JS example, but there are threads around with the same problem. The wrapper enables me to use it from within Django templates and not write JavaScript. — PhoenixDev, Apr 18 '17 at 12:27
It is very old, not supported version of Highcharts, can you update it to 4.XX / 5.XX ? — stpoa, Apr 18 '17 at 12:30
Nice! That makes it work without the hack! Thanks a lot. No idea how i got the older version, I'm pretty sure i downloaded from the Highcharts website. Could you post it as an answer that I can accept? — PhoenixDev, Apr 18 '17 at 12:35

score 2 · Accepted Answer · answered Apr 18 '17 at 13:23

2

Update your Highcharts library version to newest one.

Current releases: http://code.highcharts.com/

answered Apr 18 '17 at 13:23

stpoa

5,223
2
14
26

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

The "not so delicate" solution here, is what finally solved it for me.

I added the following to my template:

<script>
    setTimeout(function() {$(window).resize();}, 0);
</script>

edited May 23 '17 at 12:17

Community

1
1

answered Apr 18 '17 at 09:12

PhoenixDev

746
2
9
22

Highcharts using Django-Chartit. Chart lines not displayed without window resize, or Inspect Element

2 Answers2