Commits

Anonymous committed e5104eb

added the doc for multiline chart

  • Participants
  • Parent commits 9f3b3fd

Comments (0)

Files changed (6)

File docs/_build/doctrees/environment.pickle

Binary file modified.

File docs/_build/html/searchindex.js

-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’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:[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’s documentation!","Installation","Tutorial","Template Tags","Backends","Json Output"],objnames:{},filenames:["graph_api","index","installation","quickstart","templatetags","backends","json_data"]})

File docs/graph_api.rst

                 '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

File docs/images/multiline.png

Added
New image

File mustachebox/backends/example_backend.py

 
             [
               {'date': 1109743200000,
-              'value1': 453,
-              'value2': 543,
-              'value3': 458
+              'value': 453,
+              'serie': "serie1"
               },
               {'date': 1107151200000,
-               'value1': 435,
-               'value2': 897,
-               'value': 123
+               'value': 435,
+               'serie': "serie2",
               },
               ...
             ]

File mustachebox/templates/mustachebox/tags/multiline_chart.html

     {% include "mustachebox/includes/jsheader.html" %}
     <script type="text/javascript">
       var data = {% autoescape off %}{{object.data}}{% endautoescape %}
-      var width = 960;
-      var height = 500;
+      var width = 860;
+      var height = 300;
       var margin = {top: 20, right: 20, bottom: 30, left: 50};
     </script>