Permalink
Browse files

Initial comment

  • Loading branch information...
0 parents commit f5d1bc6e65fdbb49f9ee71a08fd37de8a86f4c17 @jacobian jacobian committed Feb 19, 2008
Showing with 1,301 additions and 0 deletions.
  1. +27 −0 LICENSE
  2. +23 −0 README
  3. 0 __init__.py
  4. +16 −0 docs/TODO.taskpaper
  5. +313 −0 docs/examples.html
  6. +288 −0 docs/examples.txt
  7. +69 −0 docs/render-examples.py
  8. 0 templatetags/__init__.py
  9. +565 −0 templatetags/charts.py
@@ -0,0 +1,27 @@
+Copyright (c) 2008 Jacob Kaplan-Moss
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification,
+are permitted provided that the following conditions are met:
+
+ 1. Redistributions of source code must retain the above copyright notice,
+ this list of conditions and the following disclaimer.
+
+ 2. Redistributions in binary form must reproduce the above copyright
+ notice, this list of conditions and the following disclaimer in the
+ documentation and/or other materials provided with the distribution.
+
+ 3. Neither the name of Django nor the names of its contributors may be used
+ to endorse or promote products derived from this software without
+ specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
+ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@@ -0,0 +1,23 @@
+Google Charts template tag
+==========================
+
+This is a suite of template tags to assist in generating charts using Google's
+`Chart API`__. There's deliberately no Python-level API; try pygooglechart__
+for that.
+
+Currently the library is long on code, and short on testing and documentation.
+It's only been tested against Django trunk (r7135) and Python 2.5.
+
+For example usage, see ``docs/examples.html``.
+
+__ http://code.google.com/apis/chart/
+__ http://pygooglechart.slowchop.com/
+
+Contributing
+------------
+
+I use Mercurial; the canonical repository lives at
+http://toys.jacobian.org/hg/uri. Please feel free to send patches or links to
+other branches to <jacob@jacobian.org>
+
+See ``TODO.taskpaper`` for my current to-do list.
No changes.
@@ -0,0 +1,16 @@
+- add docstrings to tags so that the auto-admin docs work.
+- actually implement "saveas"
+- tests and examples: start as reST with special blocks; those blocks get rendered *and* source displayed
+- Generate sane default axes (if not given) for line graphs. This includes hiding the bottom axis and drawing a fake x axis at 0 if the data spans 0. Perhaps "{% axes auto %}" or something...
+- chart-data might need to take options as to how to deal with the data -- strings should have customizable splitters, multiple datasets in the same variable should be supported, ...
+- chart-data should handle querysets in some logical manner (or maybe chart-data-from-qs tag) Being able to say {% chart-data qs fieldname %} would rock. Perhaps this would be best done in a "map" filter: {% chart-data qs|map:"fieldname" %}?
+Archive:
+- Axes @done
+- Shape markers @done
+- Default options for required data @done
+- Allow "extending" graphs:: @done
+- Return value of {% graph as g %} should be an object (i.e. {{ g.url }}). @done
+- Alt text @done
+- there should be a chart-range tag to allow scaling of data to particular ranges @done
+- otherwise automatic ranges should be determined @done
+- negative values should be automatically scaled unless manual scales exist @done
@@ -0,0 +1,313 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Google Charts!</title>
+ <style type="text/css" media="screen">
+ th { font-size: 18px; text-align: left; border-top: 1px #ccc solid; padding-top: 4px; }
+ table { margin-left: auto; margin-right: auto; }
+ </style>
+</head>
+<body>
+ <h2>Chart tag examples</h2>
+ <table>
+ <tbody>
+
+ <tr>
+ <th colspan="2">3D pie chart, simple data, labels</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-data data1 %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;pie&quot; %}
+ {% chart-labels &quot;One&quot; &quot;Two&quot; &quot;Three&quot; %}
+ {% chart-alt &quot;It worked!&quot; %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=p&amp;chl=One|Two|Three&amp;chd=e:VVqq.." width="300" height="200" alt="It worked!" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Line chart, legend, fill, colors, saving as a variable</th>
+ <tr>
+ <td><pre>{% chart as c %}
+ {% chart-data data2 %}
+ {% chart-type &quot;line&quot; %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-colors &quot;CC0000&quot; %}
+ {% chart-fill &quot;EEEEEE&quot; %}
+ {% chart-legend &quot;Sweet&quot; %}
+{% endchart %}
+&lt;img src=&quot;{{ c.url }}&quot; width=&quot;300&quot; height=&quot;200&quot; /&gt;</pre></td>
+ <td>
+<img src="http://chart.apis.google.com/chart?cht=lc&amp;chs=300x200&amp;chco=CC0000&amp;chf=c,s,EEEEEE&amp;chdl=Sweet&amp;chd=e:ALAtBmC1EcGYIsLWOXRuVdZhd9ivn4tYzO5b.." width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Titles, multiple colors, background</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-title &quot;Hello, World!&quot; %}
+ {% chart-data data2 data3 %}
+ {% chart-type &quot;line&quot; %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-colors &quot;CC0000&quot; &quot;00CC00&quot; %}
+ {% chart-background &quot;EEEEEE&quot; %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chtt=Hello,+World%21&amp;cht=lc&amp;chs=300x200&amp;chco=CC0000,00CC00&amp;chf=bg,s,EEEEEE&amp;chd=e:AKApBcCkEAFxH2KPM9QATXXCbCfXj.o9uPz15w,..5wz1uPo9j.fXbCXCTXQAM9KPH2FxEACkBcApAK" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Venn charts, background gradients</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-data venn %}
+ {% chart-type &quot;venn&quot; %}
+ {% chart-size &quot;300&quot; &quot;200&quot; %}
+ {% chart-background-gradient &quot;45&quot; &quot;000000&quot; &quot;0&quot; &quot;FFFFFF&quot; &quot;0.6&quot; %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?cht=v&amp;chs=300x200&amp;chf=bg,lg,45,000000,0,FFFFFF,0.6&amp;chd=e:..zMmZTNTNTNGa" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Pie charts, stripes</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-data data1 %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;pie&quot; %}
+ {% chart-background-stripes &quot;45&quot; &quot;cccccc&quot; &quot;0.05&quot; &quot;FFFFFF&quot; &quot;0.05&quot; %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=p&amp;chf=bg,ls,45,cccccc,0.05,FFFFFF,0.05&amp;chd=e:VVqq.." width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Bar chart, chart-bar-width</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-data data1 %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;bar&quot; %}
+ {% chart-bar-width 60 0 6 %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=bhg&amp;chbh=60,0,6&amp;chd=e:VVqq.." width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Extension, column charts (grouped &amp; stacked), filters in data expressions</th>
+ <tr>
+ <td><pre>{% chart as columns %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;column-grouped&quot; %}
+ {% chart-data data2|slice:&quot;6:10&quot; %}
+ {% chart-data data3|slice:&quot;6:10&quot; %}
+ {% chart-colors &quot;CC0000&quot; &quot;0000CC&quot; %}
+ {% chart-bar-width 30 5 10 %}
+{% endchart %}
+{{ columns.img }}
+
+{% chart extends columns %}
+ {% chart-type &quot;column-stacked&quot; %}
+ {% chart-bar-width 70 6 0 %}
+{% endchart %}</pre></td>
+ <td>
+<img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=bvg&amp;chco=CC0000,0000CC&amp;chbh=30,5,10&amp;chd=e:LwQAU5ac,..3LvBng" width="300" height="200" />
+
+<img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=bvs&amp;chco=CC0000,0000CC&amp;chbh=70,6,0&amp;chd=e:LwQAU5ac,..3LvBng" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Scatter chart</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-data data2 %}
+ {% chart-data data3 %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;scatter&quot; %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=s&amp;chd=e:AKApBcCkEAFxH2KPM9QATXXCbCfXj.o9uPz15w,..5wz1uPo9j.fXbCXCTXQAM9KPH2FxEACkBcApAK" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Chart-line-style, chart-grid</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-data data2 data3 %}
+ {% chart-type &quot;line&quot; %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-colors &quot;CC0000&quot; &quot;00CC00&quot; %}
+ {% chart-line-style 3 6 3 %}
+ {% chart-line-style 1 1 2 %}
+ {% chart-grid 15 15 1 1 %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?cht=lc&amp;chs=300x200&amp;chco=CC0000,00CC00&amp;chls=3,6,3|1,1,2&amp;chg=15,15,1,1&amp;chd=e:AKApBcCkEAFxH2KPM9QATXXCbCfXj.o9uPz15w,..5wz1uPo9j.fXbCXCTXQAM9KPH2FxEACkBcApAK" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Extension, ranger markers, fill-area</th>
+ <tr>
+ <td><pre>{% chart as line %}
+ {% chart-type &quot;line&quot; %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-range-marker &quot;v&quot; &quot;E5ECF9&quot; &quot;.75&quot; &quot;.25&quot; %}
+ {% chart-fill-area &quot;76A4FB&quot; %}
+{% endchart %}
+
+{% chart extends line %}
+ {% chart-data data2 %}
+{% endchart %}</pre></td>
+ <td>
+
+<img src="http://chart.apis.google.com/chart?cht=lc&amp;chs=300x200&amp;chm=R,E5ECF9,0,.75,.25|B,76A4FB,0,0,0&amp;chd=e:ALAtBmC1EcGYIsLWOXRuVdZhd9ivn4tYzO5b.." width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">More markers</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-data data2 data3 %}
+ {% chart-type &quot;line&quot; %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-colors &quot;CC0000&quot; &quot;00CC00&quot; %}
+ {% chart-marker &quot;circle&quot; &quot;cccc0077&quot; 1 4 90 %}
+ {% chart-marker &quot;x&quot; &quot;0000CC&quot; 0 9.3 20 %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?cht=lc&amp;chs=300x200&amp;chco=CC0000,00CC00&amp;chm=o,cccc0077,1,4,90|x,0000CC,0,9.3,20&amp;chd=e:AKApBcCkEAFxH2KPM9QATXXCbCfXj.o9uPz15w,..5wz1uPo9j.fXbCXCTXQAM9KPH2FxEACkBcApAK" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Sensible defaults</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-data data2 data3 %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chs=200x200&amp;cht=lc&amp;chd=e:AKApBcCkEAFxH2KPM9QATXXCbCfXj.o9uPz15w,..5wz1uPo9j.fXbCXCTXQAM9KPH2FxEACkBcApAK" width="200" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Axes</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-type &quot;line&quot; %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-range-marker &quot;v&quot; &quot;E5ECF9&quot; &quot;.75&quot; &quot;.25&quot; %}
+ {% chart-fill-area &quot;76A4FB&quot; %}
+ {% chart-data data2|slice:&quot;::-1&quot; %}
+ {% axis &quot;left&quot; %}
+ {% axis-range 0 100 %}
+ {% endaxis %}
+ {% axis &quot;bottom&quot; %}
+ {% axis-labels &quot;Jan&quot; &quot;Feb&quot; &quot;Mar&quot; &quot;Apr&quot; %}
+ {% endaxis %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?cht=lc&amp;chs=300x200&amp;chm=R,E5ECF9,0,.75,.25|B,76A4FB,0,0,0&amp;chd=e:..5bzOtYn4ivd9ZhVdRuOXLWIsGYEcC1BmAtAL&amp;chxt=y,x&amp;chxr=0,0,100&amp;chxl=1:|Jan|Feb|Mar|Apr" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">More axes</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;column-grouped&quot; %}
+ {% chart-data data2|slice:&quot;6:10&quot; %}
+ {% chart-data data3|slice:&quot;6:10&quot; %}
+ {% chart-colors &quot;CC0000&quot; &quot;0000CC&quot; %}
+ {% chart-bar-width 30 5 10 %}
+ {% chart-background-stripes 0 &quot;cccccc&quot; 0.25 &quot;ffffff&quot; 0.25 %}
+ {% axis &quot;top&quot; %}
+ {% axis-labels &quot;Group 1&quot; &quot;Group 2&quot; &quot;Group 3&quot; &quot;Control&quot; %}
+ {% axis-label-positions 10 37 62 87 %}
+ {% axis-style &quot;000000&quot; &quot;14&quot; %}
+ {% endaxis %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=bvg&amp;chco=CC0000,0000CC&amp;chbh=30,5,10&amp;chf=bg,ls,0,cccccc,0.25,ffffff,0.25&amp;chd=e:LwQAU5ac,..3LvBng&amp;chxt=t&amp;chxl=0:|Group+1|Group+2|Group+3|Control&amp;chxp=0,10,37,62,87&amp;chxs=0,000000,14" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Data provided as literals</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;pie-3d&quot; %}
+ {% chart-data &quot;60,30,10&quot; %}
+ {% chart-colors &quot;cc00ee&quot; %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=p3&amp;chco=cc00ee&amp;chd=e:..gAKr" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Automatic scaling of negative data</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;line&quot; %}
+ {% chart-data data4 %}
+ {% chart-range-marker &quot;h&quot; &quot;000000&quot; &quot;.499&quot; &quot;.501&quot; %}
+ {% axis &quot;bottom&quot; hide %}
+ {% axis &quot;left&quot; %}
+ {% axis-labels 5 0 -5 %}
+ {% endaxis %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=lc&amp;chm=r,000000,0,.499,.501&amp;chd=e:mXsdyE296791.i...K9G541nwgqukheIX1R2MbHyEHBjANAIBUDvHRLzRIXEdWjvp-v01B5Z8w--.9.q-G7W3gyutMnIgzabUROmJnFhCeAnAAArClFrJ0O1UiathFnatcy83s7f-N.t.8-68o5O00vkptjddEWyQ4LlHGDmBPAGAPBpEQH-MpSGYGeakzq.wv116C&amp;chxt=x,y&amp;chxs=0,000000,11,0,_&amp;chxl=0:|||1:|5|0|-5" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">All-negative data</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;line&quot; %}
+ {% chart-data &quot;-1,-5,-10&quot; %}
+ {% axis &quot;left&quot; %}
+ {% axis-range &quot;-10&quot; &quot;0&quot; %}
+ {% endaxis %}
+ {% axis &quot;bottom&quot; hide %}
+ {% chart-range-marker &quot;h&quot; &quot;000000&quot; 1 .997 %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=lc&amp;chm=r,000000,0,1,0.997&amp;chd=e:5lf.AA&amp;chxt=y,x&amp;chxr=0,-10,0&amp;chxs=1,000000,11,0,_&amp;chxl=1:||" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Explicit chart data range</th>
+ <tr>
+ <td><pre>{% chart %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;line&quot; %}
+ {% chart-data data4 %}
+ {% chart-colors &quot;00cc00&quot; %}
+ {% chart-line-style 4 %}
+ {% chart-data-range -10 10 %}
+ {% chart-range-marker &quot;h&quot; &quot;000000&quot; &quot;.499&quot; &quot;.501&quot; %}
+ {% axis &quot;bottom&quot; hide %}
+ {% axis &quot;left&quot; %}
+ {% axis-labels 10 0 -10 %}
+ {% endaxis %}
+{% endchart %}</pre></td>
+ <td><img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=lc&amp;chco=00cc00&amp;chls=4&amp;chm=r,000000,0,.499,.501&amp;chd=e:jLmOpCretdu6vwv.vkuis7qzoPlWiQfEb6Y6WNT5SDQxQGQEQqR3ToV5Ykbheqh3k-n5qgssuYvev-v0vDtqrvpWmljkgZdNaIXTUzSwRPQTQAQVRSS1U6XaaRdWgijtmuper1tvvGv2v9vcuUsmqZnxk2huehbZYcVyTjRzQnQDQHQ0SIT.WUZDcDfNiZlfoXq6tA&amp;chxt=x,y&amp;chxs=0,000000,11,0,_&amp;chxl=0:|||1:|10|0|-10" width="300" height="200" /></td>
+ </tr>
+
+ <tr>
+ <th colspan="2">Explicit &quot;auto&quot; chart data range</th>
+ <tr>
+ <td><pre>{% chart as sine %}
+ {% chart-size &quot;300x200&quot; %}
+ {% chart-type &quot;line&quot; %}
+ {% chart-data data4|slice:&quot;::-1&quot; %}
+ {% chart-data-range -10 10 %}
+ {% chart-colors &quot;0000cc&quot; %}
+ {% chart-line-style 2 2 2 %}
+ {% chart-range-marker &quot;h&quot; &quot;000000&quot; &quot;.499&quot; &quot;.501&quot; %}
+ {% axis &quot;bottom&quot; hide %}
+{% endchart %}
+
+{% chart extends sine %}
+ {% chart-data-range &quot;auto&quot; %}
+{% endchart %}</pre></td>
+ <td>
+
+<img src="http://chart.apis.google.com/chart?chs=300x200&amp;cht=lc&amp;chco=0000cc&amp;chls=2,2,2&amp;chm=r,000000,0,.499,.501&amp;chd=e:6C11wvq.kzeaYGSGMpH-EQBpAPAGBPDmHGLlQ4WydEjdptvk005O8o-6.8.t-N7f3sy8tcnahFatUiO1J0FrClArAAAnCeFhJnOmURabgznItMyu3g7W-G.q.9--8w5Z1Bv0p-jvdWXERILzHRDvBUAIANBjEHHyMbR2X1eIkhquwg1n549G.K...i916729yEsdmX&amp;chxt=x&amp;chxs=0,000000,11,0,_&amp;chxl=0:||" width="300" height="200" /></td>
+ </tr>
+
+ </tbody>
+ </table>
+</body>
+</html>
+
Oops, something went wrong.

0 comments on commit f5d1bc6

Please sign in to comment.