Source

mustachebox / docs / chart / google.rst

Full commit

Google Chart

Those graph uses the google chart tools.

https://developers.google.com/chart/

Time series charts

Area, BarChart and ColumnChart all use the same format of data.

Data formating

The time series chart take a list of integer for each series:

[23, 45, 56, 67, 78]

you must also provide a list of label

['sales', 'expenses', 'counts', 'words counts', 'total']

Finaly, you must encapsulate your data in a dictionnary

{
 2004: ['2004', 7160, 546],
 2005: ['2005', 5654, 5435],
 2006: ['2006', 7656, 6545],
 2007: ['2007', 5435, 6545],
 'label': ['year', 'sales', 'expenses']
}

You can use a time_serie function to parse your data and use this function in your method. For exemple

def time_serie(**kwargs):
    """
    Render a time serie
    """
    resp = {2004: ['2004'],
            2005: ['2005'],
            2006: ['2006'],
            2007: ['2007']}

    for i in range(2):
        for k, v in resp.iteritems():
            v.append(int((random.random() * random.random()) * 10000))
        resp['label'] = ['year', 'sales', 'expenses']
    return resp

Area

../images/area.png

Data formating

See Time series charts

Rendering

To render your chart you have to call the 'area' template

self.template = "area"

You can also use an optional argument : "elem" to indicate where, in your template you want to render your chart:

if "elem" in kwargs:
    response['elem'] = kwargs['elem']

Complete Example

def area(self, **kwargs):
    self.template = 'area'
    response = {}
    if "elem" in kwargs:
        response['elem'] = kwargs['elem']
    response['data'] = time_serie(**kwargs)
    return response

Bar Chart

../images/barchart.png

Data formating

See Time series charts

Rendering

To render your chart you have to call the 'barchart' template

self.template = "barchart"

Complete Example

def render_barchart(self, **kwargs):
    self.template = 'barchart'
    return time_serie(**kwargs)

Column Chart

../images/column_chart.png

Data formating

See Time series charts

Rendering

To render your chart you have to call the 'columnchart' template

self.template = "columnchart"

Complete Example

def render_columnchart(self, **kwargs):
    self.template = 'columnchart'
    return time_serie(**kwargs)

Pie Chart

../images/piechart.png

Data formating

The data formating is a dictionnary containing :

  • a list of label
  • a list of dataset containing a string and an integer

The resulting dictionnary must look like this

{'label': ['name', 'count'],
 'records': [
                ['a name', 10],
                ...
            ]
}

The keys 'label' and 'records' are mandatory

Rendering

To render your chart you have to call the 'pie_chart' template

self.template = "pie_chart"

Complete Example

def pie_chart(self):
    self.template = "pie_chart"

    label = ['name', 'count']
    activities = []
    words = ['eat', 'read', 'work', 'sleep', 'watch TV']
    for elem in words:
        activities.append([elem, int(random.random() * 10)])

    return {'label': label, 'records': activities}