Commits

Anonymous committed 77fb0c9

updated the doc

Comments (0)

Files changed (15)

docs/_build/doctrees/environment.pickle

Binary file modified.

docs/_build/doctrees/index.doctree

Binary file modified.

docs/_build/html/_sources/index.txt

 
    installation
    quickstart
+   graph_api
    backends
    templatetags
    json_data
 
-
 Description
 -----------
 
       d3js, raphaël, etc...)
 
 Features
---------
+________
 
 Of course there is serval features you gain with this architecture :
 
 
 This software is released under GPLv3
 
+
 Indices and tables
 ==================
 

docs/_build/html/index.html

 <li class="toctree-l2"><a class="reference internal" href="quickstart.html#add-the-templatetag">Add the templatetag</a></li>
 </ul>
 </li>
+<li class="toctree-l1"><a class="reference internal" href="graph_api.html">Graphs API</a><ul>
+<li class="toctree-l2"><a class="reference internal" href="graph_api.html#google-chart">Google Chart</a></li>
+<li class="toctree-l2"><a class="reference internal" href="graph_api.html#d3-js">D3.js</a></li>
+</ul>
+</li>
 <li class="toctree-l1"><a class="reference internal" href="backends.html">Backends</a></li>
 <li class="toctree-l1"><a class="reference internal" href="templatetags.html">Template Tags</a></li>
 <li class="toctree-l1"><a class="reference internal" href="json_data.html">Json Output</a></li>
 </ul>
 </div></blockquote>
 </div>
-</div>
 <div class="section" id="features">
-<h2>Features<a class="headerlink" href="#features" title="Permalink to this headline">¶</a></h2>
+<h3>Features<a class="headerlink" href="#features" title="Permalink to this headline">¶</a></h3>
 <p>Of course there is serval features you gain with this architecture :</p>
 <blockquote>
 <div><ul class="simple">
 <p>This software is released under GPLv3</p>
 </div>
 </div>
+</div>
 <div class="section" id="indices-and-tables">
 <h1>Indices and tables<a class="headerlink" href="#indices-and-tables" title="Permalink to this headline">¶</a></h1>
 <ul class="simple">
 <li><a class="reference internal" href="#">Welcome to mustachebox&#8217;s documentation!</a><ul>
 <li><a class="reference internal" href="#description">Description</a><ul>
 <li><a class="reference internal" href="#parts-architecture">3 parts architecture</a></li>
+<li><a class="reference internal" href="#features">Features</a></li>
 </ul>
 </li>
-<li><a class="reference internal" href="#features">Features</a></li>
 </ul>
 </li>
 <li><a class="reference internal" href="#indices-and-tables">Indices and tables</a></li>

docs/_build/html/searchindex.js

-Search.setIndex({objects:{},terms:{help:0,just:[0,1,2],show:2,javasccript:0,random:2,templatetag:[0,1,2],distant:0,tutorial_backend:2,boblefrag:1,serializ:2,onli:[0,2],locat:2,monitor:[1,2],easi:[0,1],mix:0,graph:[0,1,2],monitor_backend:1,exempl:2,add:[0,1,2],template_tag_test:1,those:1,under:0,main:1,modul:0,take:0,applic:2,sourc:0,"return":[0,2],variou:0,get:2,python:2,auto:0,initi:[],becaus:2,util:0,have:0,cannot:2,"new":2,now:2,requir:[0,1],name:2,retreiv:2,like:0,specif:[],list:[],html:0,easili:[0,2],alreadi:2,graph_backend:[1,2],either:0,mustach:[0,1],each:0,output:[0,5],architectur:0,page:0,mustachebox:[0,1,2],view:1,respond:0,everyth:1,set:[0,1,2],some:0,realli:0,whatev:0,design:0,pass:[],pain:0,append:2,index:0,json:[0,5,2],correctli:1,mustachebow:0,databas:0,monitoring_backend:[1,2],content:0,version:[0,1],suitabl:[0,2],"import":2,awai:0,paramet:2,method:[0,2],localhost:[1,2],attribut:[],jqueri:0,javascript:[0,2],predefin:0,jou:2,gener:2,never:0,given:2,step:[0,1],repositori:[0,1],releas:0,depend:[0,1],come:0,box:[0,1],reusabl:0,search:0,howev:1,gplv3:0,year:2,success:2,manag:2,etc:0,tutori:[0,2],overriden:[],ajax:[0,2],chang:2,first:[0,2],load:2,softwar:0,rang:2,own:[0,1,2],render:[0,1,2],point:1,app:[1,2],grapher:1,prefer:2,order:2,api:0,done:2,url:[0,1,2],org:1,instal:[0,1],installed_app:1,your:[0,1,2],backend:[0,4,1,2],differ:0,from:[0,2],wai:0,area:2,data:[0,2],give:0,system:1,"long":0,custom:0,d3j:0,reli:1,call:[0,2],too:0,type:2,start:1,includ:1,"function":2,shell:2,form:2,do_something_with_respons:2,serval:0,ani:2,part:0,pars:0,gain:0,particular:1,hold:0,present:0,must:[1,2],count:[],none:[],made:0,look:2,consist:[],work:[1,2],project:[0,1,2],defin:[0,1,2],kwarg:2,can:[0,1,2],purpos:1,def:2,seri:2,pre:2,fashion:0,quickstart:[],creat:[0,2],classic:0,"int":2,descript:0,test_method:2,anywher:2,templat:[0,2,3],tag:[0,3],exist:[1,2],manner:0,file:[0,2],tabl:0,need:[0,1,2],hit:2,mustachbox:[1,2],featur:0,basebackend:2,reali:[1,2],lie:0,cours:[0,2],jour:[],welcom:0,want:[0,2],datetim:2,anoth:0,self:2,couchdb:0,when:0,same:[0,1],write:[0,2],how:2,valid:1,"__init__":[],indic:0,test:[0,1,2],instead:1,you:[0,1,2],document:0,simpl:2,complet:2,begin:2,http:[1,2],clone:[0,1],object:2,discov:0,befor:2,extern:0,respons:[0,2],"class":2,pool:0,bitbucket:1,don:0,directori:2,gather:0,request:0,sale:2,inherit:2,django:[0,1],exampl:[1,2],expens:2,thi:[0,1,2],time:2,format:[0,2],model:0,convert:2,make:0,"rapha\u00ebl":0,togeth:0},objtypes:{},titles:["Welcome to mustachebox&#8217;s documentation!","Installation","Tutorial","Template Tags","Backends","Json Output"],objnames:{},filenames:["index","installation","quickstart","templatetags","backends","json_data"]})
+Search.setIndex({objects:{},terms:{time_seri:0,all:[0,2],couchdb:1,dictionnari:0,help:1,just:[1,2,3],show:3,javasccript:1,resp:0,random:0,templatetag:[1,3],render_area:0,distant:1,timetupl:0,tutorial_backend:3,follow:2,label:[0,3],boblefrag:2,serializ:3,millisecond:0,onli:[1,3],locat:3,monitor:[],easi:[0,1,2],also:0,graph:[0,1,2,3],monitor_backend:2,self:[0,3],exempl:[0,3],mktime:0,add:[1,2,3],template_tag_test:[],dict:0,present:1,under:1,main:[],app:[2,3],applic:3,file:[0,1,3],sourc:1,"return":[0,1,3],string:0,variou:1,get:3,python:[0,3],auto:1,watch:0,dai:0,initi:[],becaus:3,util:1,cannot:3,"new":3,bar:0,now:3,you:[0,1,2,3],requir:[1,2],name:[0,3],retreiv:3,like:[0,1],specif:[],docutil:2,list:[0,2],html:1,integ:0,easili:[1,3],api:[0,1],graph_backend:[2,3],either:1,mustach:[1,2],each:[0,1],output:[1,6],complet:[0,3],page:[1,2],mustachebox:[0,1,2,3],view:[],respond:1,set:[1,2,3],some:1,realli:1,see:0,design:[0,1],result:0,pass:[],http:[0,2,3],todo:[],append:0,index:1,total:0,example_backend:[2,3],correctli:[],mustachebow:1,databas:1,encapsul:0,monitoring_backend:[],content:1,version:[1,2],suitabl:[1,3],"import":3,awai:1,paramet:3,method:[0,1,3],localhost:[2,3],attribut:[],model:1,never:1,jou:[],kei:0,iteritem:0,gener:3,javascript:[0,1,3],differ:1,step:[1,2],repositori:[1,2],releas:1,depend:[1,2],come:1,valu:0,box:[1,2],reusabl:1,search:1,your:[0,1,2,3],column:0,howev:2,gplv3:1,test_method:3,success:3,respons:[0,1,3],manag:3,etc:1,tutori:[1,2,3],includ:2,"__init__":[],overriden:[],ajax:[1,3],chang:3,reli:2,com:0,first:[1,3],load:3,softwar:1,rang:0,own:[1,2,3],render:[0,1,3],point:2,activ:0,modul:1,"float":0,prefer:3,dataset:0,extern:1,alreadi:3,done:3,org:[0,2],instal:[1,2],installed_app:2,predefin:1,mix:1,backend:[0,1,5,2,3],pie:0,given:3,from:[1,3],wai:1,area:[0,3],classic:1,visit:2,system:[],"long":1,custom:[0,1],d3j:[0,1],json:[1,6,3],call:[0,1,3],particulari:2,tag:[1,4],type:3,start:2,too:1,"function":[0,3],project:[1,2,3],shell:3,form:3,do_something_with_respons:3,tool:0,serval:1,anywher:3,part:1,pars:[0,1],gain:1,particular:[0,2],line:0,hold:1,eat:0,those:0,must:[0,2,3],count:0,none:[],graphic:0,word:0,look:[0,3],consist:[],provid:0,directori:3,work:[0,2,3],second:0,can:[0,1,2,3],jqueri:1,record:0,reus:0,whatev:1,learn:2,mandatori:0,purpos:2,def:[0,3],seri:[0,3],pre:3,fashion:1,grapher:2,creat:[0,1,2,3],give:[1,2],"int":0,request:1,year:[0,3],toolkit:0,templat:[0,1,3,4],elem:0,columnchart:0,kwarg:[0,3],exist:[2,3],manner:1,have:[0,1,2],tabl:1,need:[1,2,3],hit:3,mustachbox:[2,3],made:1,featur:1,render_barchart:0,basebackend:3,reali:[2,3],lie:1,cours:[1,3],jour:[],welcom:1,want:[1,3],datetim:[0,3],anoth:1,make:1,constain:0,when:[0,1],same:[0,1],write:[1,3],how:[2,3],valid:[],read:0,take:[0,1],indic:1,timestamp:0,test:[1,2,3],instead:[],pie_chart:0,document:1,simpl:3,barchart:0,architectur:1,begin:3,pain:1,timedelta:0,finali:0,multipli:0,clone:[1,2],object:3,chart:[0,1],discov:1,sleep:0,befor:3,plai:2,date:0,develop:0,defin:[1,2,3],contain:0,data:[0,1,3],"class":3,pool:1,googl:[0,1],render_columnchart:0,bitbucket:2,don:1,ani:3,quickstart:[],url:[1,2,3],line_chart:0,gather:1,descript:1,sale:[0,3],inherit:3,django:[1,2],exampl:[0,2,3],expens:[0,3],thi:[0,1,2,3],time:[0,3],format:[0,1,3],everyth:[],convert:3,order:[2,3],"rapha\u00ebl":1,togeth:1},objtypes:{},titles:["Graphs API","Welcome to mustachebox&#8217;s documentation!","Installation","Tutorial","Template Tags","Backends","Json Output"],objnames:{},filenames:["graph_api","index","installation","quickstart","templatetags","backends","json_data"]})

docs/graph_api.rst

+Graphs API
+==========
+
+The graphics you can use with mustachebox are designed to be easy to
+use and easy to customize.
+
+When you create your backend, you can reuse the javascripts files
+mustachebox provides.
+
+Each javascript files take a particular format of data to render your
+graph.
+
+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
+____
+
+.. image:: images/area.png
+
+Data formating
+~~~~~~~~~~~~~~
+
+See `Time series charts`_
+
+Rendering
+~~~~~~~~~
+
+To render your chart you have to call the 'area' template ::
+
+    self.template = "area"
+
+Complete Example
+~~~~~~~~~~~~~~~~
+::
+
+    def render_area(self, **kwargs):
+        self.template = 'area'
+        return time_serie(**kwargs)
+
+Bar Chart
+_________
+
+.. image:: 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
+____________
+
+.. image:: 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
+_________
+
+.. image:: 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}
+
+
+D3.js
+-----
+
+Those graph uses the D3 js Toolkit.
+
+http://d3js.org/
+
+Line Chart
+__________
+
+.. image:: images/line_chart.png
+
+Data formating
+~~~~~~~~~~~~~~
+
+The data must be a list of dict.
+
+Each dict constain 2 keys :
+
+* date : a timestamp multiplied by 1000 (python timestamps are in
+  seconds and javascript timestamps are in milliseconds)
+
+* value : an integer or a float
+
+
+Rendering
+~~~~~~~~~
+
+To render your chart you have to call the 'line_chart' template ::
+
+    self.template = "line_chart"
+
+Complete Example
+~~~~~~~~~~~~~~~~
+::
+
+    def line_chart(self):
+
+        response = []
+        self.template = "line_chart"
+        date = datetime.datetime(2005, 1, 1, 0, 0, 0)
+        for i in range(1500):
+            date += datetime.timedelta(days=2)
+            response.append({
+                'date': time.mktime(date.timetuple()) * 1000,
+                'value': (i * 10) + int(random.random() * 1000)})
+        return response

docs/images/area.png

Added
New image

docs/images/barchart.png

Added
New image

docs/images/column_chart.png

Added
New image

docs/images/line_chart.png

Added
New image

docs/images/piechart.png

Added
New image
 
    installation
    quickstart
+   graph_api
    backends
    templatetags
    json_data
 
-
 Description
 -----------
 
       d3js, raphaël, etc...)
 
 Features
---------
+________
 
 Of course there is serval features you gain with this architecture :
 
 
 This software is released under GPLv3
 
+
 Indices and tables
 ==================
 

docs/installation.rst

 (http://localhost:8000/grapher/all/)
 
 That list all the graphs the example backend can give you.
+
+You can learn how to use mustachebox and create your own graph with
+following :doc:`quickstart`

mustachebox/backends/example_backend.py

         The data are formated as follow::
 
             {'label': ['name', 'count'],
-             'activities': [
+             'records': [
                              ['eat': 12],
                              ['read': 5],
                              ['work': 23],
         for elem in words:
             activities.append([elem, int(random.random() * 10)])
 
-        return {'label': label, 'activities': activities}
+        return {'label': label, 'records': activities}
 
     def line_chart(self):
         """

mustachebox/static/js/pie_chart.js

             dataset.addColumn('number', piedata.label[i]);}
         }
         rows = []
-        for(var i=0; i<piedata.activities.length; i++){
-            rows.push(piedata.activities[i])
+        for(var i=0; i<piedata.records.length; i++){
+            rows.push(piedata.records[i])
 
         }
         // add every rows to the dataset