Search code examples
djangotemplateschartsreportlab

Insert reportlab chart into django template


I want to render a reportlab barchart in a django template.

This django documentation gives excellent instructions for implementing the reportlab-chart generation within a django view, and this stackoverflow post recommends putting the chart object directly in an HttpReponse:

binaryStuff = chart.asString('gif')
return HttpResponse(binaryStuff, 'image/gif')

How can I insert the binaryStuff into a django template? Eg:

#views.py
def barChart(request, word_id):
    from charts import BarChartDrawing

    word = get_object_or_404(Word, pk=word_id)
    e = word.choice_set.get(perspective='East')
    w = word.choice_set.get(perspective='West')
    b = word.choice_set.get(perspective='Both')
    data_string = `e.votes` + `w.votes` + `b.votes`

    chart = BarChartDrawing(data =[e.votes, w.votes, b.votes], title=word.word_text)
    binaryStuff = chart.asString('gif')

    return render_to_response('templates/myapp/barChart.html', {'word': word)

#urls.py
url(r'^(?P<pk>\d+)/barchart/$', DetailView.as_view(model=Word,
    template_name='templates/myapp/barChart.html'), name='barChart')

#barchart.html
{% extends "templates/myapp/base.html" %}

{% block title %}{{ block.super}}: {{ word.word_text }}{% endblock title %}

{% block content %}

  <div><img src="{{ binaryStuff }}" /></div>
  <a href="{% url templates_home %}">Return to Home</a>.

{% endblock content %}

I am 2-weeks new to django - apologies if I have failed to find extant documentation, and I will RTM if pointed to the proper place. Many thanks!

----Response to Question------- When I add a print binaryStuff this is what i get:

����JFIF��C     
2!!22222222222222222222222222222222222222222222222222����"��    
���}!1AQa"q2���#B��R��$3br� 
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������    
���w!1AQaq"2�B����  #3R�br�
$4�%�&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��������������������������������������������������������������������������?��(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��
(��-r���K��"X��E���b�7<d�ǭh�U�Q�Gtk�pȥ�L��I��ө�eJ�DC��J�So\��w�[��[�FX�n�+#B$fS�1@��8��'/�bA�q�בǽOEPEPEPEPEPEPEPEPEPEP\����qx�[hcFDEoHW-"��H�PT3�V=q]e&s�}hL��o��4�V+-�e1�j_ߴ��������+�j�A@y���N�i�o��<k���
�y�����ms�_3�ƯG-�ӯQƢ��>"���v��E�@�/���Z�"��f��}�\e�ea��g'�jw;?�Z�"��f��}�G�-o�3K���2�?�������N�g�[�_����(����/�i�ܕ�QG�V�Y�����kx����_��%�E�@�/���(����/���5;���-o�3K���/�I�5_i�]�a7�<e�w,��߿��Ƽ���%ÿ��/��M\�N���]˥��)���QE|��Q@Q@Q@r�w���(s�6���$������r+���<�޶��[4k,ЫFX���g���ڥ�p{���{�}�Kȭ��;��E�UL��@�1�8�I�]}��#(�Z������[�lJ�Yv��
g$��m���kB��(��H�U�U��cc�>Y�m����]]QEQEQE���f�A����E,�|��H\�*G��xݟ¹o�L<Q�>�?��-l�E��@�����E\�xٞ2�qTݮ�S*�i�_��������R��  ��?��G����W���o��$_��������R��  ��?��G����Q��o����Ϯ��}KG�&(��]��QG��+��E��L<Q�>�?��-�x��}t��Z�Eڸ���{I��0�G�����Ե���덨ŨAm���nX�P����V�������w��E
�2�uj��*=-ظM���QE��V.���kPYKnD2BҴ�$�hc�0���
N���4��?��Z�+��5{M[��Ih.6�����d����A?�u�W�_�����f�э_J��_�����f�э^�M�iz~�&/�^��E�QEQEQE����(�����jȭ��@���|����W&?��~��kC���(��8���(��(��(��(��(��(��(��(��(�S�/������*����"����/�*��z�������]�QE�Q@Q@Q@m�?����x�P�J���� �����^�M����kK�;�(����*��-�\�<�����v�F�Ì��8��tP?�5��_�V�
�����+�j�A@|��-���o����|��-���o���d�Ɨ��rb��-Q_Hy�EPEPEPZ���������I��������̿�M5rc�ݧ��F�?��}��+�X(��(��(��(��(��(��(��(��(���>"�Ƞ����J��^�����(����Ҩ�������G�U�Q^)�QEQEQEV�������w��E
¡��'�   fD��Ą����jj浏�jZ����6i1�#��"F`�2Ձ��#9��K�5��_�V�
�t�"�I��������&9�{bG�]u�W������cWҵ�W������cW��^��ɋ���QE}!�Q@Q@Q@k�?�J���_�&��+_���P<;�_2��4�ɏ�v�����"=��(��=`��(��|Q,�xGZ�'h�K  �
�A�k��mXƤ�:�H��7�XW�F�����Y�V�\�&�-��_DϪ试��u_���7�G����A�W���⫟�B�fz��7�����>���V����3���|��Uں��u_������B�f�7�����>���V����3���|��Uں��u_������B�f�7�����>���V����3���|��Uں��u_������B�f�7�����>���V����3���|��Uw�5�]�s�^�E�ϲ{���d'�ZR�B��Rg&;�18*�IE�m�}t�{eQ]gυQ@��_����TU��Q��E�_�_�Ur����!��3
����+�2
(��
(��
(��
���� �����X�����?�A�]���B�\����?�֗�wQE}A�QE���C��W�ծ�����
�ڵ�P_5�k����F5}+_5�k����F5{7���z�EW�xQEQEQEV����xw��e��i�"���%ÿ��/��M\���i����#�h�����
(��1�[�"f��`����_�S��_Ox��D�w����-���ԧ���h�Ϸ�ϊ���+�>�(��(��(��+��7�#���_�F�\w���x���k�����dx<K�"ʟ/��EW�~XQEr��P?��e��QW/]G�_����TU���gć���*(��(��(��(��+o����������bV�������w��E
�ro����CZ_�QE��\�=�x�O]>�<�d�XM�ڹ��7�?�p�8 ���03���rZg���'�j��_��]�Ǜ�uu����C��W�ծ��
��[\�����1��Z��[\�����1��ɿ�/O�����Z(����(��(��(����%ÿ��/��MY����(�����j����O��h�EW��QE����5���趯�b�R���{ſ�&k�����m_0���?��f;G�}�|U����}Q^a�AEPEPEP]����.����6:�+��7�#���_�F�]X/�#��_�T�~h�J(�������(���"����/�*��z�>"�Ƞ����J��^�s;�$=�aWtQEx�AEPEPEP[�������+������?�?�(W���?G����(��7
(��KW��/�섖2�W�7f�
V����p��]r:f�i�x�I-�����}����'𮺀
��[\�����1��Z��[\�����1��ɿ�/O�����Z(����(��(��(����%ÿ��/��MY����(�����j����O��h�EW��QE����5���趯�b�R���{ſ�&k�����m_0���?��f;G�}�|U����}Q^a�AEPEPEP]����.����6:�+��7�#���_�F�]X/�#��_�T�~h�J(�������(���"����/�*��z�>"�Ƞ����J��^�s;�$=�aWtQEx�AEPEPEP[�������+������?�?�(W���?G����(��7
ϓK2j�}��v�O���^?��'��hQ@���?��Z�+�����p��]�W������cWҵ�W������cW��^��ɋ���QE}!�Q@Q@Q@k�?�J���_�&��+_���P<;�_2��4�ɏ�v�����"=��(��=`��(ſ�&k�����m_0���?�����L��q��ھa��J�+��v���~�ۿ��(���(��(��(�����<]��5��lu�W�o�G���������_�G�Ŀ�,�����QE{��EP)��E�_�_�Ur��|E��@�����E\�|�w�Hz?�®�(���L��(��(��(�������?�?�(V%m�?����x�P�W&�x~��5���Q_Pn]@��ffAr�~b�@'���Ʀ���6K�~�fF� �����B��     �8���1�[�j�¿��t��E����#�7_K�y�2Ls��.ďº�+��ms�_3�Ư�k��ms�_3�Ưc&�4�?S��/Qh���C�
(��
(��
(��
�u`�����YS���(�����(�S�/������*����"����/�*��z�������]�QE�Q@Q@Q@m�?����x�P�J���� �����^�M����kK�;�(����(�������+�j�A\���?��Z�(������|�����������|����������NL_��E��+�<(��(��(��+_���P<;�_2��4ՑZ���������I��L��?�և��QE|q�Q@�-��3]��}���j�/�)�诧�[�"f��`����_�S��^fc�~g��g�[���G�E�tQEQEQE�����������c�����<]��5��luՂ�2<%��eO��t��+�?,
(��9O���(����Ҩ�����/������*���3��C��fwAEW�dQEQEQE����?�A�]���B�+o����������z�7�����/��(���p�?U�5h�A46�bqqo�O��9v`:�����ǰ�9�>����U�  ��������k�o���5����@��5ny��T~~͞fѻns���y�I@��V�������>l���ב�������{׵�ZҭR��7fL�+I'�
������o��_����A����^�Eo��w�|���'�
������o��_����A����^��j�G���q���[|�/��X�px�=~�$"����<��&�)�`��
��:p�ҏ�W���c���U������«���h?��+�?� Ӿ��s$��4���~�9KpS��� N����pC�V8��8�`��?�1_����{
}�+��W�?����7�Q�
��={f����P��̿���?���S>.����������
g�����9��O�H��ss�&�X��v���:���#�e��: ����~V�r̃<q�#.u"����P��̿���?����S>.����������
�
��������}��VUE�q���Vݕ���l�]�}j�6�   "|�GC�<� ��g��_0�c�������xo�#����x��~<7���½J�?��ȿ��rG����x��~<7���µ<9��h�_�$��w"9�`mP����QZR�Q�.jq��9��?����۟YX\]2�l�D�nHPN?J��F���Ȋ��+�PEt:�(��(��(��(�
������q4&�u�F�nK@��x泮|+��R�w��r���S����H���J(����o��uu�e6��Wj� a���5l�^�̌��l�5����� <��&[��LQEh�|z]���I$@���r�X�ucV袀
(��
(��
(��
(��
i���-�ɽ�e��6>W������=�7��vݵnḞ��[��aWD$�w) ���#9�4Q@����;��UU��*�f��Uۅ�D�d�Ae�-o"��_]�O1;,���RLK�{c�(ON���-���Ey圙1��H�0�2��n�(��(��(��(��(��(�A#��\�^�㶱��/d6�Z��́�X�9���y�����EL��2��st��$�m)���r���8�q�Z�n��g�h��E�$�t��]˞��h��-�EQEQE��

when i change the code to binaryStuff = chart.asString('pdf') I get something that looks a lot better:

%PDF-1.4
%���� ReportLab Generated PDF document http://www.reportlab.com
% 'BasicFonts': class PDFDictionary 
1 0 obj
% The standard fonts dictionary
<< /F1 2 0 R
 /F2 3 0 R >>
endobj
% 'F1': class PDFType1Font 
2 0 obj
% Font Helvetica
<< /BaseFont /Helvetica
 /Encoding /WinAnsiEncoding
 /Name /F1
 /Subtype /Type1
 /Type /Font >>
endobj
% 'F2': class PDFType1Font 
3 0 obj
% Font Times-Roman
<< /BaseFont /Times-Roman
 /Encoding /WinAnsiEncoding
 /Name /F2
 /Subtype /Type1
 /Type /Font >>
endobj
% 'Page1': class PDFPage 
4 0 obj
% Page dictionary
<< /Contents 8 0 R
 /MediaBox [ 0
 0
 400
 200 ]
 /Parent 7 0 R
 /Resources << /Font 1 0 R
 /ProcSet [ /PDF
 /Text
 /ImageB
 /ImageC
 /ImageI ] >>
 /Rotate 0
 /Trans <<  >>
 /Type /Page >>
endobj
% 'R5': class PDFCatalog 
5 0 obj
% Document Root
<< /Outlines 9 0 R
 /PageMode /UseNone
 /Pages 7 0 R
 /Type /Catalog >>
endobj
% 'R6': class PDFInfo 
6 0 obj
<< /Author (anonymous)
 /CreationDate (D:20120829143153+06'00')
 /Creator (ReportLab PDF Library - www.reportlab.com)
 /Keywords ()
 /Producer (ReportLab PDF Library - www.reportlab.com)
 /Subject (unspecified)
 /Title () >>
endobj
% 'R7': class PDFPages 
7 0 obj
% page tree
<< /Count 1
 /Kids [ 4 0 R ]
 /Type /Pages >>
endobj
% 'R8': class PDFStream 
8 0 obj
% page stream
<< /Filter [ /ASCII85Decode
 /FlateDecode ]
 /Length 597 >>
stream
Gau0@hbSkY&:Q"cJ%/!S@dTH/QIdG3`:u)6n\P")-or/'kI/<Yhu7/rN<'>"!^1l(I:'1%+AdK[ID.<7`]7;]+<Z=7*KUpEq)qFB3;SK,k83OX(.Zr2!E/7$Jd9/2*)VXdE,3ZIZ<:>[L:X>.LRHt$Y/BJST7TV7L9QnTPQBa!;PZRB@S*#5VF=Lf-!gUBJn>"XT_.s&!#/UA!TR#s9ohlM,5r9%$;%%Xl9?O/6jOs^i"A>>N+qh)^G-C$_pgKIbe]nfJ!dTWh*R#&fBAmi?37$Jncb*;=ZSh5#GreV]3+,Xf+t'e3o_o^O@0V_,ZpUWHs0d(.aa6RTH'`'oLh%Ne_"Ng+eW0+2UA[.^U<eK/gdplY1Tg.+^[JuZ>iCo(t-,eQr>Fk4;H*ZP%9'(4UT;eAG]nr^N]9Z'uRG<WGg=*bNSRtR]pq9CD37FMbmTJEF^J$Mc3fMEKL%AQq@$ck)72E"KOUZlFYp3"KOVE$G1"ng>S5WarZIH(HT$J:=$@P[/bqha!UMcCkc>1:$eb:L*050M*mgD_9O"Q6ZipUSi3mT@?N8.Ico1o\/9AeD:n!Wp%i`0Cptcp+ccO%^c3k=~>endstream
endobj
% 'R9': class PDFOutlines 
9 0 obj
<< /Count 0
 /Type /Outlines >>
endobj
xref
0 10
0000000000 65535 f
0000000113 00000 n
0000000221 00000 n
0000000386 00000 n
0000000553 00000 n
0000000820 00000 n
0000000954 00000 n
0000001228 00000 n
0000001333 00000 n
0000002072 00000 n
trailer
<< /ID 
 % ReportLab generated PDF document -- digest (http://www.reportlab.com) 
 [(oyD\253\330\261\350\277\034\023\377\3373\025H!) (oyD\253\330\261\350\277\034\023\377\3373\025H!)] 

 /Info 6 0 R
 /Root 5 0 R
 /Size 10 >>
startxref
2123
%%EOF

I am not particularly attached to the format of the chart - if i can use the asString('pdf') in the django template that will work! (btw, even though the print out using 'jpg' is ugly, it will still save the jpg file appropriately)

-------Response2--------- The chart is still not appearing - both return render_to_response HttpResponse give an empty image source:


Solution

  • You are trying to do this

    <div><img src="{{ binaryStuff }}" /></div>
    

    But this won't work. The src attribute expects a path to a resource, or if you really want to include the image as a binary then you must encode it as a base64, see this wikipedia link.

    If the chart is public anyway, If your chart includes loads of data then its generation might not be very quick, so it may make more sense to generate it once, then cache it, so subsequent requests could reuse the same file. Otherwise, they way you have it here means the chart will be computed again for every request.

    The chart is still not appearing - both return render_to_response HttpResponse give an empty image source:

    The reason the url is empty is because you didn't include the binaryStuff in your context

    return render_to_response('templates/myapp/barChart.html', {'word': word, 'binaryStuff': binaryStuff})