Commits

Anonymous committed f84782f

Changed the backends and the js to something more reusable

Comments (0)

Files changed (19)

+v0.03
+
+	- the area method can take an optional argument : 'elem' to chose
+	on wich element the chart must be drawn
Add a comment to this file

docs/_build/doctrees/environment.pickle

Binary file modified.

docs/_build/html/index.html

 </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>
+<li class="toctree-l2"><a class="reference internal" href="chart/google.html">Google Chart</a></li>
+<li class="toctree-l2"><a class="reference internal" href="chart/d3js.html">D3.js</a></li>
 </ul>
 </li>
 <li class="toctree-l1"><a class="reference internal" href="backends.html">Backends</a></li>

docs/_build/html/searchindex.js

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

docs/chart/d3js.rst

+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
+
+Multi Line Chart
+________________
+
+.. image:: ../images/multiline.png
+
+Data formating
+~~~~~~~~~~~~~~
+
+The data must be a list of dict containing 3 key :
+
+* date : a timestamp multiplied by 1000 (python timestamps are in
+  seconds and javascript timestamps are in milliseconds)
+
+* value : an integer or a float
+
+* serie : the name of the serie the data is belonging to.
+
+Rendering
+~~~~~~~~~
+
+To render your chart you have to call the 'multiline_chart' template ::
+
+    self.template = "multiline_chart"
+
+Complete Example
+~~~~~~~~~~~~~~~~
+::
+
+    def multiserie_linechart(self, **kwargs):
+        self.template = "multiline_chart"
+        response = []
+        for a in range(3):  # we render a 3 series chart
+            date = datetime.datetime(2005, 1, 1, 0, 0, 0)
+            for i in range(200):
+                if a % 3 == 0:
+                    mult = -10
+                elif a % 2 == 0:
+                    mult = 1
+                else:
+                    mult = 10
+                date += datetime.timedelta(days=2)
+                response.append({
+                    'date': time.mktime(date.timetuple()) * 1000,
+                    'value': (i * mult) + int(random.random() * 1000),
+                    'serie': a})
+        return response

docs/chart/google.rst

+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"
+
+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
+_________
+
+.. 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}

docs/graph_api.rst

 Each javascript files take a particular format of data to render your
 graph.
 
-Google Chart
-------------
+Contents:
 
-Those graph uses the google chart tools.
+.. toctree::
+   :maxdepth: 2
 
-https://developers.google.com/chart/
+   chart/google
+   chart/d3js
 
-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
-
-Multi Line Chart
-________________
-
-.. image:: images/multiline.png
-
-Data formating
-~~~~~~~~~~~~~~
-
-The data must be a list of dict containing 3 key :
-
-* date : a timestamp multiplied by 1000 (python timestamps are in
-  seconds and javascript timestamps are in milliseconds)
-
-* value : an integer or a float
-
-* serie : the name of the serie the data is belonging to.
-
-Rendering
-~~~~~~~~~
-
-To render your chart you have to call the 'multiline_chart' template ::
-
-    self.template = "multiline_chart"
-
-Complete Example
-~~~~~~~~~~~~~~~~
-::
-
-    def multiserie_linechart(self, **kwargs):
-        self.template = "multiline_chart"
-        response = []
-        for a in range(3):  # we render a 3 series chart
-            date = datetime.datetime(2005, 1, 1, 0, 0, 0)
-            for i in range(200):
-                if a % 3 == 0:
-                    mult = -10
-                elif a % 2 == 0:
-                    mult = 1
-                else:
-                    mult = 10
-                date += datetime.timedelta(days=2)
-                response.append({
-                    'date': time.mktime(date.timetuple()) * 1000,
-                    'value': (i * mult) + int(random.random() * 1000),
-                    'serie': a})
-        return response

mustachebox/backends/base_backend.py

         """
         Return a set of data formated information
         """
-        meth = getattr(self, method, **kwargs)
-        return meth()
+        meth = getattr(self, method)
+        return meth(**kwargs)

mustachebox/backends/example_backend.py

                 2007: ['2007', 5435, 6545],
                 'label': ['year', 'sales', 'expenses']
             }
+        the keyword argument, elem is used if present.
         """
+
         self.template = 'area'
-        return time_serie(**kwargs)
+        response = {}
+        if "elem" in kwargs:
+            response['elem'] = kwargs['elem']
+        response['data'] = time_serie(**kwargs)
+        return response
 
     def bar_chart(self, **kwargs):
         """
             }
         """
         self.template = "barchart"
-        return time_serie(**kwargs)
+        response = {}
+        if "elem" in kwargs:
+            response['elem'] = kwargs['elem']
+        response['data'] = time_serie(**kwargs)
+        return response
 
     def column_chart(self, **kwargs):
         """
             }
         """
         self.template = 'columnchart'
-        return time_serie(**kwargs)
+        response = {}
+        if "elem" in kwargs:
+            response['elem'] = kwargs['elem']
+        response['data'] = time_serie(**kwargs)
+        return response
 
     def pie_chart(self, **kwargs):
         """
             }
         """
         self.template = "pie_chart"
-
+        response = {}
+        if "elem" in kwargs:
+            response['elem'] = kwargs['elem']
         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}
+        response['data'] = {'label': label, 'records': activities}
+        return response
 
     def line_chart(self, **kwargs):
         """

mustachebox/static/js/area.js

+    if(data.elem == undefined){
+        data.elem = 'area_chart_div'
+    };
     google.load('visualization', '1', {'packages':['corechart']});
     google.setOnLoadCallback(drawChart);
     function drawChart() {
         // define a new datatable
         dataset = renderTable(data)
         // define where the graph must be paint
-        var chart = new google.visualization.AreaChart(
-            document.getElementById('chart_div')
+        var chart = chart(
+            document.getElementById(data.elem)
         );
         // effectively draw the graph
         chart.draw(dataset);

mustachebox/static/js/barchart.js

+    if(data.elem == undefined){
+        data.elem = 'bar_chart_div'
+    };
     google.load('visualization', '1', {'packages':['corechart']});
     google.setOnLoadCallback(drawChart);
     function drawChart() {
         dataset = renderTable(data)
         // define where the graph must be paint
         var chart = new google.visualization.BarChart(
-            document.getElementById('barchart_div')
+            document.getElementById(data.elem)
         );
         // effectively draw the graph
         chart.draw(dataset);

mustachebox/static/js/columnchart.js

-    google.load('visualization', '1', {'packages':['corechart']});
-    google.setOnLoadCallback(drawChart);
-    function drawChart() {
-        // define a new datatable
-        dataset = renderTable(data)
-        // define where the graph must be paint
-        var chart = new google.visualization.ColumnChart(
-            document.getElementById('columnchart_div')
-        );
-        // effectively draw the graph
-        chart.draw(dataset);
-    }
+if(data.elem == undefined){
+        data.elem = 'area_chart_div'
+    };
+google.load('visualization', '1', {'packages':['corechart']});
+google.setOnLoadCallback(drawChart);
+
+function drawChart() {
+    // define a new datatable
+    dataset = renderTable(data)
+    // define where the graph must be paint
+    var chart = new google.visualization.ColumnChart(
+        document.getElementById(data.elem)
+    );
+    // effectively draw the graph
+    chart.draw(dataset);
+}

mustachebox/static/js/pie_chart.js

-    google.load('visualization', '1', {'packages':['corechart']});
-    google.setOnLoadCallback(drawChart);
-    function drawChart() {
-        // define a new datatable
-        dataset = new google.visualization.DataTable();
-        for(var i=0; i< piedata.label.length; i++){
-            if(i == 0){
-                // first column is a string type
-                dataset.addColumn('string', piedata.label[i]);
-            }else{
+if(data.elem == undefined){
+    data.elem = 'pie_chart_div'
+};
+google.load('visualization', '1', {'packages':['corechart']});
+google.setOnLoadCallback(drawChart);
+
+function drawChart() {
+    // define a new datatable
+    dataset = new google.visualization.DataTable();
+    for(var i=0; i< piedata.label.length; i++){
+        if(i == 0){
+            // first column is a string type
+            dataset.addColumn('string', piedata.label[i]);
+        }else{
             dataset.addColumn('number', piedata.label[i]);}
-        }
-        rows = []
-        for(var i=0; i<piedata.records.length; i++){
-            rows.push(piedata.records[i])
+    }
+    rows = []
+    for(var i=0; i<piedata.records.length; i++){
+        rows.push(piedata.records[i])
 
-        }
-        // add every rows to the dataset
-        dataset.addRows(rows)
-        // define where the graph must be paint
-        var chart = new google.visualization.PieChart(
-             document.getElementById('piechart_div')
-        );
-         // effectively draw the graph
-        chart.draw(dataset);
     }
+    // add every rows to the dataset
+    dataset.addRows(rows)
+    // define where the graph must be paint
+    var chart = new google.visualization.PieChart(
+        document.getElementById(data.elem)
+    );
+    // effectively draw the graph
+    chart.draw(dataset);
+}

mustachebox/static/js/time_serie.js

 // column_chart.js Those charts uses the same data structure :
 // a year and a serie of number for each row.
 
+google.load('visualization', '1', {'packages':['corechart']});
+google.setOnLoadCallback(drawChart);
+
 function renderTable(data){
-// draw a table with the data given in arguments.
+// draw a table with the data given as arguments.
     dataset = new google.visualization.DataTable();
     for(var i=0; i< data.label.length; i++){
         if(i == 0){
     dataset.addRows(rows)
     return dataset
 };
+
+function drawChart() {
+    // define a new datatable
+    dataset = renderTable(data)
+    // define where the graph must be paint
+    var chart = chart(
+        document.getElementById(data.elem)
+    );
+    // effectively draw the graph
+    chart.draw(dataset);
+}

mustachebox/templates/mustachebox/area.html

     <script type="text/javascript"
     src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
-      var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+      var data = {% autoescape off %}{{object.data}}{% endautoescape%}
+      var chart = google.visualization.AreaChart
 </script>
     <script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
-    <script type="text/javascript" src="{{STATIC_URL}}js/area.js"></script>
   </head>
   <body>
         <div id="chart_div" style="width: 900px; height: 500px;"></div>
-
   </body>
 </html>
-

mustachebox/templates/mustachebox/barchart.html

     <script type="text/javascript"
     src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
-      var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+      var data = {% autoescape off %}{{object.data}};{% endautoescape%}
+      var chart = google.visualization.BarChart;
 </script>
     <script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
-    <script type="text/javascript" src="{{STATIC_URL}}js/barchart.js"></script>
   </head>
   <body>
         <div id="barchart_div" style="width: 900px; height: 500px;"></div>
 
   </body>
 </html>
-

mustachebox/templates/mustachebox/columnchart.html

     src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
       var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+      var chart = google.visualization.ColumnChart
 </script>
     <script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
     <script type="text/javascript" src="{{STATIC_URL}}js/columnchart.js"></script>

mustachebox/templates/mustachebox/pie_chart.html

     src="https://www.google.com/jsapi"></script>
 <script type="text/javascript">
       var piedata = {% autoescape off %}{{object.data}}{% endautoescape %}
+      var chart = google.visualization.PieChart
 </script>
     <script type="text/javascript" src="{{STATIC_URL}}js/pie_chart.js"></script>
   </head>

mustachebox/urls.py

         GraphDetailView.as_view(),
         name="graph"
         ),
+    url(r'^(?P<name>[-_\w]+)/(?P<elem>[-_#.\w]+)/$',
+        GraphDetailView.as_view(),
+        name="graph_with_elem")
 )
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.