{"id":1,"date":"2011-08-30T13:55:41","date_gmt":"2011-08-30T13:55:41","guid":{"rendered":"http:\/\/blogs.law.harvard.edu\/rprasad\/?p=1"},"modified":"2011-08-31T14:15:01","modified_gmt":"2011-08-31T14:15:01","slug":"highcharts-django-admin","status":"publish","type":"post","link":"https:\/\/archive.blogs.harvard.edu\/rprasad\/2011\/08\/30\/highcharts-django-admin\/","title":{"rendered":"Highcharts in the Django Admin"},"content":{"rendered":"

(Note, this assumes that you have a Django project installed<\/a> and running. This example is for Django 1.3, the official version.)<\/strong><\/p>\n

Below are some notes for adding Highcharts<\/a> to a Django admin page. In this case, I want to chart the enrollment in a science class over time.<\/p>\n

\"\"<\/a><\/p>\n

Specifically, I have a model name “Course” and I want to see the chart on the “Course” change form in the admin.<\/p>\n

(1)<\/strong> Download Highcharts<\/a>, unzip it, and place in a directory under your Django MEDIA_ROOT directory, as specified in your Django settings.py.<\/p>\n

(2) <\/strong><\/strong>Make a blank template file named “change_form.html<\/strong>” file as well as the appropriate directories for your model. In the case of my Course<\/strong> model, the location is:<\/p>\n

..\/templates\/admin\/course\/course\/change_form.html<\/strong><\/p>\n

Notes on the path above:<\/p>\n

“templates” – a directory specified in your django settings.py file<\/p>\n

“admin” – indicates a template for the django admin<\/p>\n

” course” – name of my app. (The Course<\/strong> model is defined in ‘..\/course<\/strong>\/models.py’)<\/p>\n

“course” – name of the model, Course, in lowercase<\/p>\n

“change_form.htm<\/strong>l” – name of an existing file in the django source code (\/django\/contrib\/admin\/templates\/admin\/change_form.html)<\/p>\n

(2) <\/strong>Add the following lines of code to your change_form.html<\/strong> file.<\/p>\n

{% extends \"admin\/change_form.html\" %}\r\n{% block extrahead %}{{ block.super }}\r\n{% url 'admin:jsi18n' as jsi18nurl %}\r\n<script type=\"text\/javascript\" src=\"{{ jsi18nurl|default:\"..\/..\/..\/jsi18n\/\" }}\"><\/script>\r\n{{ media }}\r\n<!-- start: two new lines for highcharts -->\r\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.6.1\/jquery.min.js\" type=\"text\/javascript\"><\/script>\r\n<script src=\"{{ MEDIA_URL }}highcharts\/js\/highcharts.js\" type=\"text\/javascript\"><\/script>\r\n<!-- end: two new lines for highcharts -->\r\n{% endblock %}<\/pre>\n
Most of the code above is taken from the “extrahead” block in the original “change_form.html<\/strong>” file. Two new lines of javascript have been added, as indicated by the comments above.\u00a0 (Again, this is Django 1.3, the official version. If you’re using a different version, copy the appropriate code from the change_form.html template included with django.)<\/p>\n
The 1st line calls in the JQuery library and the 2nd line connects to highcharts.js.<\/p>\n
(3) Test. <\/strong>Go to the the Django admin and attempt to add a new instance of your model, or edit an existing one. View the source in your browser:<\/p>\n
(a) Make sure that the new lines show up and that<\/p>\n
(b) the javascript files are being loaded. (e.g., Click on the links to the jquery and highcharts js files to make sure they load.)<\/p>\n
\"\"<\/a><\/p>\n
Note: Django 1.3 has JQuery built-in<\/a> but it has it’s own namespace. Using the built-in JQuery requires editing highcharts.js and changing “JQuery” to “django.Jquery”.\u00a0 Because of maintenance, changing the highcharts.js is not advisable.<\/p>\n
(4)<\/strong> For my Course model, I’m adding a function in the models.py file<\/strong> named “enrollment_chart”.\u00a0 For example purposes, I’m throwing test data into the function.\u00a0 (In reality, the function calls a queryset that is passed to the template.)<\/p>\n
    def enrollment_chart(self):\r\n        lu = { 'categories' : [ 'Fall 2008', 'Spring 2009','Fall 2009', 'Spring 2010', 'Fall 2010', 'Spring 2011'],\\\r\n             'undergrad' : [18, 22, 30, 34, 40, 47],\\\r\n             'grad' : [1, 2, 4, 4, 5, 7],\\\r\n             'employee' : [2, 3, 0, 1, 1, 2] }\r\n        lu['total_enrolled'] = [sum(a) for a in zip(lu['undergrad'], lu['grad'],lu['employee'])]\r\n\r\n        return render_to_string('admin\/course\/course\/enrollment_chart.html<\/strong>', lu )\r\n    enrollment_chart.allow_tags = True<\/pre>\n
(5)<\/strong> Make the “enrollment_chart.html” file<\/strong> referred to in the function above.\u00a0 Note, the file goes in the same directory as the “change_form.html” file in step (2).<\/p>\n
(6)<\/strong> In the “enrollment_chart.html<\/strong>” file, add the following code:<\/p>\n
Note 1:\u00a0 This code is from the highcharts example<\/a> graph with some changes to the labels and the addition of Django template tags.<\/p>\n
Note 2: the “renderTo” attribute must match the “id” of the <div ..> at the bottom of this code.<\/p>\n
<script type=\"text\/javascript\">\r\nvar chart;\r\njQuery(document).ready(function() {\r\n\tchart = new Highcharts.Chart({\r\n\t\tchart: {\r\n\t\t\trenderTo: 'enrollment_container',\r\n\t\t\tdefaultSeriesType: 'line',\r\n\t\t\tmarginRight: 130,\r\n\t\t\tmarginBottom: 30\r\n\t\t},\r\n\t\ttitle: {\r\n\t\t\ttext: 'Enrollment by Semester ',\r\n\t\t\tx: -20 \/\/center\r\n\t\t},\r\n\t\tsubtitle: {\r\n\t\t\ttext: '',\r\n\t\t\tx: -20\r\n\t\t},\r\n\t\txAxis: {\r\n\t\t\tcategories: [ '{{ categories|join:\"','\" }}']\r\n\t\t\/\/\tcategories: ['Fall 2008', 'Spring 2009','Fall 2009', 'Spring 2010', 'Fall 2010', 'Spring 2011']\r\n\t\t},\r\n\t\tyAxis: {\r\n\t\t\ttitle: {\r\n\t\t\t\ttext: 'Number of Students'\r\n\t\t\t},\r\n\t\t\tplotLines: [{\r\n\t\t\t\tvalue: 0,\r\n\t\t\t\twidth: 1,\r\n\t\t\t\tcolor: '#808080'\r\n\t\t\t}]\r\n\t\t},\r\n\t\ttooltip: {\r\n\t\t\tformatter: function() {\r\n\t                return ''+ this.series.name +'<\/strong>'+this.x +': '+ this.y;\r\n\t\t\t}\r\n\t\t},\r\n\t\tlegend: {\r\n\t\t\tlayout: 'vertical',\r\n\t\t\talign: 'right',\r\n\t\t\tverticalAlign: 'top',\r\n\t\t\tx: -10,\r\n\t\t\ty: 100,\r\n\t\t\tborderWidth: 0\r\n\t\t},\r\n\t\tseries: [{\r\n\t\t\tname: 'Total Enrolled',\r\n\t\t\t\/\/data: [1, 27, 34, 39, 46, 56]\r\n\t\t\tdata: [{{ total_enrolled|join:\",\" }}]\r\n\t\t}, {\r\n\t\t\tname: 'Undergrads',\r\n            data: [{{ undergrad|join:\",\" }}]\r\n\t\t\t\/\/data: [18, 22, 30, 34, 40, 47]\r\n\t\t}, {\r\n\t\t\tname: 'Grads',\r\n\t\t\tdata: [{{ grad|join:\",\" }}]\r\n\t\t\t\/\/data: [1, 2, 4, 4, 5, 7]\r\n\t\t}, {\r\n\t\t\tname: 'Employees',\r\n\t\t\tdata: [{{ employee|join:\",\" }}]\r\n\t\t\t\/\/data: [2, 3, 0, 1, 1, 2]\r\n\t\t}]\r\n\t});\r\n\r\n});\r\n<\/script>\r\n<div id=\"enrollment_container\" style=\"width: 700px;height: 500px\"><\/div><\/pre>\n
(7)<\/strong> Update your admin.py<\/strong> file to connect the enrollment_chart()<\/strong> function in step (4) to your admin screen.<\/p>\n
In the admin.py<\/strong> file, add enrollment_chart<\/strong> to:<\/p>\n
(a) the list of readonly_fields<\/strong><\/a>, as well as 
\n<\/strong><\/p>\n
(b) a field in your fieldsets<\/strong><\/a> array<\/p><\/blockquote>\n
(Location of the admin.py file for the Course model: ..\/course\/admin.py)<\/p>\n
Below is an example where enrollment_chart<\/strong> has been added:<\/p>\n
class CourseAdmin(admin.ModelAdmin):\r\n    list_display = ( 'course_id', 'title', 'catalog_number', )\r\n    search_fields = ( 'course_id', 'title', 'catalog_number', )\r\n    list_filter = ('status',)\r\n\r\n    readonly_fields<\/strong> = ('semester_details', 'enrollment_chart<\/strong>' )\r\n    fieldsets = [\r\n     ('Course', { 'fields':  [  'course_id', 'title', 'catalog_number', \\\r\n                    'department', 'course_type', 'status', ]}), \\\r\n\r\n    ('Semester Details', { 'fields':  [  'semester_details',  ]}),\\\r\n    ('Enrollment<\/strong>', { 'fields':  [  'enrollment_chart<\/strong>',  ]}),\\\r\n                    ]\r\nadmin.site.register(Course, CourseAdmin)<\/pre>\n
Summary<\/strong><\/p>\n
The explanation above is long, but, if you’re django instance is already running, the steps are fairly quick.<\/p>\n
(a) Download Highcharts<\/a>, unzip it, and place in a directory under your Django MEDIA_ROOT directory (step 1)<\/p>\n
(b) Add two admin templates:<\/p>\n
change_form.html\u00a0 – call the JQuery and the highcharts.js libraries\u00a0 (steps 2 and 3)<\/p>\n
enrollment_chart.html – or another template to put the chart’s javascript + containing <div..> (steps 5 and 6)<\/p>\n
(c) Create a function accessible by your model that passes chart data\u00a0 (step 4)<\/p>\n
(d) Modify the admin.py to link the function to the django admin and a template (step 7)<\/p>\n
Once the basics are going, you can start customizing your chart:)<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
(Note, this assumes that you have a Django project installed and running. This example is for Django 1.3, the official version.) Below are some notes for adding Highcharts to a Django admin page. In this case, I want to chart the enrollment in a science class over time. Specifically, I have a model name “Course” … Continue reading Highcharts in the Django Admin<\/span><\/a><\/p>\n","protected":false},"author":3875,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[50627,50629,17294],"tags":[50638,50631,50639,50640],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-django","category-highcharts","category-jquery","tag-django","tag-django-admin","tag-highcharts","tag-jquery"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4JC3p-1","_links":{"self":[{"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/users\/3875"}],"replies":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":58,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":4,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/posts\/1\/revisions\/4"}],"wp:attachment":[{"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/rprasad\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}