Package: django-gcharts
##Yet another Google Charts library for Django##- ~~Requires installation of the gviz_api library which is freely available from Google.~~- See http://code.google.com/p/google-visualization-python/ for details.**UPDATE: The gviz_api library is now included.**## Note ##**Development status updated to beta. The code is still short on unit tests, so bad stuff can happen!**Please feel free submit patches/pull requests ;)### Disclaimer ###This library is heavy influenced by [mvasilkov's django-google-charts](https://github.com/mvasilkov/django-google-charts),and some of the code (template tags and javascript code) are directly copied from him. I've done some minor adjustments tomake it work for my approach.## About django-gcharts ##As I find mvasilkov's approach very clever, I think it would be nice if the model could deliver it's data in a formatthe Google Visualization API can read.This library is an attempt of doing that, by using a custom QuerySet and Manager which is plugged directly into the model,and some wrapper methods to bind the QuerySet data up against the gviz_api library.The goal is to "fully" support the QuerySet (with aggregates, joins, extra, annotates, etc) so that we can gather databy using familiar QuerySet syntax.### Demo site ###The git version now includes a demo site which can be run at your local machine once cloned. The demo site previews a fewof the charts included in the Google Visualization API, and should contain enough working examples for you to figure outhow this stuff works.To get started with the demo site, follow these steps.$ git clone https://github.com/rhblind/django-gcharts.git$ cd django-gcharts$ python manage.py syncdb$ python manage.py initdata$ python manage.py runserverThen point your browser to http://localhost:8000 and you should see a few different charts displayed.## Configuration ##### Installation ###$ pip install django-gcharts### settings.py ###GOOGLECHARTS_API = "1.1"GOOGLECHARTS_PACKAGES = ["corechart"]INSTALLED_APPS = (...'gcharts',...)* `GOOGLECHARTS_API` - Optional. Defaults to 1.1* `GOOGLECHARTS_PACKAGES` - Optional. List of packages that should be loaded. Defaults to only `corechart`.### Packages ###The charts in the Google Visualization API are separated into different packages. For the most basic chartsyou would only need to load the `corechart` package (which is the default if none is specified).Below follows a list of which charts are available in the different packages.**Please note that all packages specified in settings.py will load every time the `{% gcharts %} ... {% endgcharts %}`block is rendered.**Optionally, the package for the specific chart can be specified in the `{% render ... %}` tag as a the last option.The tag should in that case be written as: `{% render "div_id" "data" "options" "package name" %}`. This will causethe package to be applied to the current `{% gcharts %} ... {% endgcharts %}` block only, in addition to those specifiedin settings.py.* `corechart` contains these charts* [AreaChart](https://developers.google.com/chart/interactive/docs/gallery/areachart)* [BarChart](https://developers.google.com/chart/interactive/docs/gallery/barchart)* [BubbleChart](https://developers.google.com/chart/interactive/docs/gallery/bubblechart)* [CandleStickChart](https://developers.google.com/chart/interactive/docs/gallery/candlestickchart)* [ColumnChart](https://developers.google.com/chart/interactive/docs/gallery/columnchart)* [ComboChart](https://developers.google.com/chart/interactive/docs/gallery/combochart)* [LineChart](https://developers.google.com/chart/interactive/docs/gallery/linechart)* [PieChart](https://developers.google.com/chart/interactive/docs/gallery/piechart)* [ScatterChart](https://developers.google.com/chart/interactive/docs/gallery/scatterchart)* [SteppedAreaChart](https://developers.google.com/chart/interactive/docs/gallery/steppedareachart)* `gauge`* [Gauge](https://developers.google.com/chart/interactive/docs/gallery/gauge)* `geochart`* [GeoChart](https://developers.google.com/chart/interactive/docs/gallery/geochart)* `table`* [Table](https://developers.google.com/chart/interactive/docs/gallery/table)* `treemap`* [TreeMap](https://developers.google.com/chart/interactive/docs/gallery/treemap)### models.py ###Register the GChartsManager to the model you'd like to draw charts fromfrom django.db import modelsfrom gcharts import GChartsManagerclass MyModel(models.Model):# register the GChartsManager as default manager for this model.objects = GChartsManager()my_field = models.CharField(....)my_other_field = models.IntegerField()...## Examples ##Spam Inc. needs to chart how much spam they sell.**models.py**from django.db import modelsfrom gcharts import GChartsManagerclass Spam(models.Model):objects = GChartsManager()name = models.Charfield(max_length=10)......cdt = models.DateTimeField(auto_add_now=True, verbose_name="Creation datetime")**views.py**from dateutil.relativedelta import relativedeltafrom django.shortcuts import render_to_responsefrom django.template.context import RequestContextfrom models import Spamdef render_chart(request):if request.method == "GET":# Get a point in time we want to render chart fromseries_age = datetime.today() - relativedelta(months=3)# Create a fairly advanced QuerySet using:#  - filter() to get records newer than 'series_age'#  - extra() to cast a PostgreSQL 'timestampz' to 'date' which translates to a pyton date object#  - values() to extract fields of interest#  - annotate() to group aggregate Count into 'id__count'#  - order_by() to make the aggregate workqset = Spam.objects.filter(cdt__gt=series_age).extra(select={"date": "cdt::date"}) \.values("date").annotate(Count("id")).order_by()# Call the qset.to_json() method to output the data in json#  - labels is a dict which sets labels and the correct javascript data type for#    fields in the QuerySet. The javascript data types are automatically set,#    except for extra fields, which needs to be specified in a dict as:#       {'extra_name': {'javascript data type': 'label for field'}}#  - order is an iterable which sets the column order in which the data should be#    rendered#  - formatting is a dict {'field_name': 'expression'}, where expression is a#    valid string.format() expression.spam_json = qset.to_json(labels={"id__count": "Spam sold", "date": {"date": "Date"}},order=("date", "id__count"),formatting={"id__count": "{0:d} units of spam"})return render_to_response("sales_overviews/spamreport.html, {"spam_data": spam_json},context_instance=RequestContext(request))**spamreport.html**...{% load gcharts %}{% gcharts %}<!-- Global options for all charts -->options = {width: 500,height: 300};<!-- cloned option and adapted for "spam_opt" -->spam_opt = _clone(options);spam_opt.title = "Units of Spam sold last 3 month";{% options spam_opt %}kind: "ColumnChart",options: spam_opt,{% endoptions %}{% render "spam_chart" "spam_data" "spam_opt" %}{% endgcharts %}<div id="spam_chart"><!-- container for spam_data chart --></div>...Should output something like this.![django-gcharts-example](https://raw.github.com/rhblind/django-gcharts/master/example.png)