CODEWITHSUNDEEP
django
prithu
prithu

Reputation: 103

Displaying graphs using Django Chartit

graphs.html 


{% extends "base.html" %}
<script type = "text/javascript" src = "{{ STATIC_URL }}js/highcharts.js"></script>
<script type = "text/javascript" src = "{{ STATIC_URL }}js/jquery-1.9.1.min.js">                                                                                                                                                 </script>
<body >
{% block menu %}
{{block.super}}
{% endblock menu %}

{% block content %}
 {{weatherchart}}


<!-- code to include the highcharts and jQuery libraries goes here -->
<!-- load_charts filter takes a comma-separated list of id's where -->
<!-- the charts need to be rendered to                             -->
{% load chartit %}
{{ weatherchart|load_charts:"container" }
 <div id='container'>  </div>
  {% endblock content %}
</body>



views.py


def plot_graph(request):
month_number=[]
months=KEBReading.objects.filter().values("datetime_reading")
print months
for obj in months:
    month_number=obj["datetime_reading"].day
    print month_number
#Step 1: Create a DataPool with the data we want to retrieve.
weatherdata = \
    DataPool(
       series=
        [{'options': {
           'source': KEBReading.objects.filter().values("id","truepower_consumed","voltage_reading")},
          'terms': [
            'id',
            'truepower_consumed','voltage_reading'
           ]}])





#Step 2: Create the Chart object
cht = Chart(
        datasource = weatherdata,
        series_options =
          [{'options':{
              'type': 'line',
              'stacking': False},
            'terms':{
              'id': [
                'truepower_consumed','voltage_reading']


              }}],

        chart_options =
          {'title': {
               'text': 'Graph For Power Management'},
           'xAxis': {
                'title':{'text': 'month_number'}}})
print "weather chart"
print cht

#Step 3: Send the chart object to the template.
return render_to_response('graph.html',{'weatherchart': cht},context_instance=RequestContext(request))

I am having problems using Django-Chartit.I am wanting to make a graph using data from my database. i have done like above. but the graph is not getting displayed. Am i doin it the right way. Help is appreciated. Thanks in Advance. is it anythin else missing in template.(graphs.html)

Upvotes: 1

Views: 3114

Answers (2)

SiddharthG
SiddharthG

Reputation: 176

Try 

{% extends "base.html" %}
{% load chartit %}
{% block scripts %}
{{ weatherchart|load_charts:"container" }}
{% endblock %}

where block scripts is the tag for all the js files. Make sure jquery is loaded before highcharts

Upvotes: 1

xXPhenom22Xx
xXPhenom22Xx

Reputation: 1275

I had the same issue and stumbled across the solution that is not documented anywhere, in order for me to get it to work I had to put the load_charts call inside the "container" DIV like so...

<div id="container">{{ chart|load_charts:"container" }}</div>

Also good practice to use double-quotes in your HTML for the DIV ID instead of the single like you have documented above.

Upvotes: 0

Related Questions