Plotting Graphs in Django using ChartJS

Question

Plotting Graphs in Django using ChartJS

I am working on creating a graph using ChartJs to visualize my expenses.

Below is a snippet of my view:

@login_required
def index(request):
    truncate_month = connection.ops.date_trunc_sql('month', 'date_reg')
    expense = Expense.objects.extra({'month': truncate_month}).values('month').annotate(Sum('total_amount'))
    return render(request, 'home/index.html', {"expense": expense})

Within my template:

{{ expense }}

The data is displayed in the format shown below:

[{
   'month': '2015-12-01',
   'total_amount__sum': 900.0
}, {
   'month': '2016-01-01',
   'total_amount__sum': 19334.0
}]

I would like to know how to format this data to be compatible with chartjs.

Example structure for ChartJs:

labels: ["January", "February", "March", "April", "May", "June", "July"], //Here represent the months
datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40] //Here corresponds to 'total_amount__sum'
    },
    ...

javascript django chart.js

Answer 1

Answer №1

Instead of bryanph's suggestion to use Values_list, you can also try using the Values function and then escape the quotes from ASCII in the template. This can be achieved by applying the safe filter.

Snippet in View: expenditures = expense.values('date', flat=True)

Template:

{{ expense|safe }}

Answer 2

Instead of bryanph's suggestion to use Values_list, you can also try using the Values function and then escape the quotes from ASCII in the template. This can be achieved by applying the safe filter.

Snippet in View: expenditures = expense.values('date', flat=True)

Template:

{{ expense|safe }}

Answer 3

Answer №2

Check out the values_list method here: https://docs.djangoproject.com/es/1.9/ref/models/querysets/#values-list

With values_list, you can obtain lists of values instead of dictionaries.

Answer 4

Check out the values_list method here: https://docs.djangoproject.com/es/1.9/ref/models/querysets/#values-list

With values_list, you can obtain lists of values instead of dictionaries.

Answer 5

Answer №3

To integrate underscore.js, one method is to utilize the following code:

return render(request, 'home/index.html', json.dumps({"expenses": expenses}))

Within the template:

data = JSON.parse({{ expenses|safe }});

var labels = _.pluck(data, 'month');
var amounts = _.pluck(data, 'total_amount__sum');

Answer 6

To integrate underscore.js, one method is to utilize the following code:

return render(request, 'home/index.html', json.dumps({"expenses": expenses}))

Within the template:

data = JSON.parse({{ expenses|safe }});

var labels = _.pluck(data, 'month');
var amounts = _.pluck(data, 'total_amount__sum');

Plotting Graphs in Django using ChartJS

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to display a list of database records using Django?

Is there a way to stop a setTimeout function in React before it is triggered?

Retrieving input values with JQuery

Tips for positioning a div relative to another div while controlling its z-index

The "flickering" effect of the div is like a dance, moving gracefully between fade outs and

Adding a class to a div upon loading: A guide

When a React component mounts repeatedly, it can lead to complications within the useEffect hook

MySQL field being updated upon page unload

Cross-origin resource sharing (CORS) policy issue arises when the 'Access-Control-Allow-Origin' header is not included in the requested resource, especially when utilizing an iframe in a React

Django - Recognizing the various types of IntegrityError situations

What could be causing Highchart to return the error message "Typeerror: undefined variable byte"?

Adding and removing form fields in a table dynamically using AngularJS

Unable to pass parameters using ViewBag in jQuery within a partial view

Fetching a JSON object from an external URL using JavaScript

Scripting in jQuery to create dropdown menus

Slider handle for Material UI in React component reaches the range value

Tips for Saving process.argv in a .js File for Future Reference

Using the Map Function in React JS to Dynamically Render Radio Buttons with Material-UI

Troubleshooting pagination issues with Django REST Framework on a cloud server

Turning HTML into an image with the power of JavaScript