CODEWITHSUNDEEP
pythonjquerydjangohighcharts
Blake Russell
Blake Russell

Reputation: 61

Django Chartit graph not displaying. Jquery issue?

There are about another 4-5 other posts with the same issue I have but either a.) the solution does not work for me or b.) there are no suggested solutions. I'm hoping someone can help me out with this. Using Chartit and looks like I am passing my object's data properly and I've got my template hitting all the necessary JavaScripts finally and now I am getting this issue from the console:

VM49842 chartloader.js:3 Uncaught ReferenceError: $ is not defined at VM49842 chartloader.js:3  

highcharts.js:10 Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13
    at Object.a.error (highcharts.js:10)
    at a.Chart.getContainer (highcharts.js:250)
    at a.Chart.firstRender (highcharts.js:265)
    at a.Chart.<anonymous> (highcharts.js:241)
    at a.fireEvent (highcharts.js:30)
    at a.Chart.init (highcharts.js:240)
    at a.Chart.getArgs (highcharts.js:239)
    at new a.Chart (highcharts.js:239)
    at Object.<anonymous> (VM49842 chartloader.js:5)
    at Function.each (jquery.1.7.2.min.js:2)

Here is the line in reference to chartloader.js line 3:

$(document).ready(function()

I've read that it could possibly be interfering with other scripts but I've got no other javascript on my Django project besides what's included in the admin portal.

Settings.py has 'chartit' in installed apps and because I've also heard that scripts could be loading slower than expected from https I've installed them all locally in my static directory and I've run 'python manage.py collectstatic' to install/move them to the proper static directory.

If it's possibly my model's information I can share that if necessary but if I view source it seems to be passing the correct information successfully.

Template - history_graph.html 

{% load static %}
{% load chartit %}
{{ graph_display|load_charts:'container' }}

<script type ="text/javascript" src ="/static/js/jquery.1.7.2.min.js"></script>
<script type ="text/javascript" src="/static/js/highcharts.js"></script>

<div class='container'>{{ graph_display|load_charts:'container' }}</div>

Upvotes: 0

Views: 120

Answers (1)

Blake Russell
Blake Russell

Reputation: 61

The script references needed to be placed in front of the chartit load variable (not the highcharts script reference as previously answered in other questions). Here is the working arrangement:

{% load static %}
<script type ="text/javascript" src ="/static/js/jquery.1.7.2.min.js"> </script>
<script type ="text/javascript" src="/static/js/highcharts.js"></script>
{% load chartit %}
{{ graph_display|load_charts:'container' }}

This cleared the error for chartloader/jquery error where jquery was loading after chartit. IMO this isn't clearly stated and/or stated at all in the documentation. I was still receiving an error for highcharts though until I noticed that:

<div class='container'>

should instead be:

<div id='container'>

Upvotes: 2

Related Questions