Commits

Anonymous committed 8676f1c

google chart refactoring

Comments (0)

Files changed (17)

docs/_build/doctrees/environment.pickle

Binary file modified.

docs/_build/html/index.html

 </li>
 <li class="toctree-l1"><a class="reference internal" href="quickstart.html">Tutorial</a><ul>
 <li class="toctree-l2"><a class="reference internal" href="quickstart.html#create-the-backend">Create the Backend</a></li>
-<li class="toctree-l2"><a class="reference internal" href="quickstart.html#define-your-first-method">Define your first method</a></li>
 <li class="toctree-l2"><a class="reference internal" href="quickstart.html#rendering">Rendering</a></li>
+<li class="toctree-l2"><a class="reference internal" href="quickstart.html#testing">Testing</a></li>
 <li class="toctree-l2"><a class="reference internal" href="quickstart.html#add-the-templatetag">Add the templatetag</a></li>
+<li class="toctree-l2"><a class="reference internal" href="quickstart.html#getting-the-json">Getting the json</a></li>
+<li class="toctree-l2"><a class="reference internal" href="quickstart.html#playing-with-kwargs">Playing with kwargs</a></li>
 </ul>
 </li>
 <li class="toctree-l1"><a class="reference internal" href="graph_api.html">Graphs API</a><ul>

docs/_build/html/searchindex.js

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

 In this tutorial I will show you how to create your own backend and
 how to render graph using this backend.
 
+
 Create the Backend
 ------------------
 
 
 
 Define your first method
-------------------------
+________________________
 
 You can write any method you want, doing any work you need but it must
 return serializable data. For exemple, you cannot return python
     self.template = "area"
 
 Testing
-_______
+-------
 
 You can now easily test your new method. Just change the backend in
 your settings :
 template.
 
 Getting the json
-________________
+----------------
 
 Of course you can retreive the json form of your data. For this you
 can write anywhere in your application an ajax call tu your url :
             do_something_with_response(response)
         }
     })
+
+Playing with kwargs
+-------------------
+
+When you call a backend method, it's always possible to use kwargs to
+give extra parameters to the method. The kwargs you can use depend on
+the method implementation but let's look on how to give a method
+custom parameters.
+
+The Class Based View used by mustachebox to render the graphs is
+GraphDetailView. So anywhere in your url path yu can import this class
+and define a custom url with custom parameters ::
+
+    from mustachebox.views import GraphDetailView
+
+    urlpatterns = patterns(
+        '',
+        url(r'^(?P<name>[-_\w]+)/(?P<year>d{4}/$',
+        GraphDetailView.as_view()
+        )
+    )
+
+Because you define a year parameter, this parameter will be directly
+given to your method. Then if you call :
+
+http://localhost:8000/graphs/test_method/2004/
+
+Your method will receive : year=2004
+
+You can modify your method to take this optional parameter::
+
+    def test_method(self, **kwargs):
+        """
+        render a simple time serie suitable for javascript graphs :
+            {
+                2004: ['2004', 7160, 546],
+                2005: ['2005', 5654, 5435],
+                2006: ['2006', 7656, 6545],
+                2007: ['2007', 5435, 6545],
+                'label': ['year', 'sales', 'expenses']
+            }
+        """
+        if 'year' in kwargs:
+            response = {2004: ['2004', 7160, 546],
+                        'label': ['year', 'sales', 'expenses']
+                       }
+            return response
+        response = {
+                2004: ['2004', 7160, 546],
+                2005: ['2005', 5654, 5435],
+                2006: ['2006', 7656, 6545],
+                2007: ['2007', 5435, 6545],
+                'label': ['year', 'sales', 'expenses']
+            }
+        return response
+
+Of course, the json response when you call this url via ajax can also
+take this parameter.
+
+For the templatetag, it exactly the same. You can write ::
+
+    {% load graph %}
+    {% graph test_method year=2004 %}
+
+And everything will work seamelessly
+
+You can use as many custom parameters as you need to render the custom
+graph you want.

mustachebox/backends/example_backend.py

                 2007: ['2007', 5435, 6545],
                 'label': ['year', 'sales', 'expenses']
             }
+
         the keyword argument, elem is used if present.
+
         """
 
         self.template = 'area'

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 as arguments.
     dataset = new google.visualization.DataTable();
     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/all_graph.html

 {% load graph %}
+
 {% for obj in object_list %}
 <div class="graph">
   <h3><a href={% url graph obj.name %}>{{obj.name}}</a></h3>

mustachebox/templates/mustachebox/area.html

 <html>
   <head>
-    <script type="text/javascript"
+<script type="text/javascript"
     src="https://www.google.com/jsapi"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/google_base.js"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
 <script type="text/javascript">
-      var data = {% autoescape off %}{{object.data}}{% endautoescape%}
-      var chart = google.visualization.AreaChart
+
+google.load('visualization', '1.0', {'packages':['corechart']});
+google.setOnLoadCallback(configureChart);
+
+
+function configureChart() {
+
+var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+  if(data.elem == undefined){
+      data.elem = "area_chart_div"
+  };
+
+
+  // configure the graph and render it
+  var chart = new google.visualization.AreaChart(
+      document.getElementById(data.elem)
+  );
+  drawChart(chart, data.data, null)
+}
+
 </script>
-    <script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
+
+
+
+
   </head>
   <body>
-        <div id="chart_div" style="width: 900px; height: 500px;"></div>
+        <div id="area_chart_div" style="width: 900px; height: 500px;"></div>
   </body>
 </html>

mustachebox/templates/mustachebox/barchart.html

 <html>
   <head>
-    <script type="text/javascript"
+<script type="text/javascript"
     src="https://www.google.com/jsapi"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/google_base.js"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
 <script type="text/javascript">
-      var data = {% autoescape off %}{{object.data}};{% endautoescape%}
-      var chart = google.visualization.BarChart;
+
+google.load('visualization', '1.0', {'packages':['corechart']});
+google.setOnLoadCallback(configureChart);
+
+
+
+function configureChart() {
+
+var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+  if(data.elem == undefined){
+      data.elem = "bar_chart_div"
+  };
+
+  // configure the graph and render it
+  var chart = new google.visualization.BarChart(
+      document.getElementById(data.elem)
+  );
+  drawChart(chart, data.data, null)
+}
 </script>
-    <script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
   </head>
   <body>
-        <div id="barchart_div" style="width: 900px; height: 500px;"></div>
+        <div id="bar_chart_div" style="width: 900px; height: 500px;"></div>
 
   </body>
 </html>

mustachebox/templates/mustachebox/columnchart.html

 <html>
   <head>
-    <script type="text/javascript"
+<script type="text/javascript"
     src="https://www.google.com/jsapi"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/google_base.js"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
 <script type="text/javascript">
-      var data = {% autoescape off %}{{object.data}}{% endautoescape %}
-      var chart = google.visualization.ColumnChart
+
+google.load('visualization', '1.0', {'packages':['corechart']});
+google.setOnLoadCallback(configureChart);
+
+var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+  if(data.elem == undefined){
+      data.elem = "column_chart_div"
+  };
+
+function configureChart() {
+  // configure the graph and render it
+  var chart = new google.visualization.ColumnChart(
+      document.getElementById(data.elem)
+  );
+  drawChart(chart, data.data, null)
+}
 </script>
-    <script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
-    <script type="text/javascript" src="{{STATIC_URL}}js/columnchart.js"></script>
-  </head>
   <body>
-        <div id="columnchart_div" style="width: 900px; height: 500px;"></div>
+        <div id="column_chart_div" style="width: 900px; height: 500px;"></div>
 
   </body>
 </html>

mustachebox/templates/mustachebox/pie_chart.html

 <html>
   <head>
-    <script type="text/javascript"
+<script type="text/javascript"
     src="https://www.google.com/jsapi"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/google_base.js"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/pie_serie.js"></script>
 <script type="text/javascript">
-  var piedata = {% autoescape off %}{{object.data}}{% endautoescape %}
-  var chart = google.visualization.PieChart
+
+google.load('visualization', '1.0', {'packages':['corechart']});
+google.setOnLoadCallback(configureChart);
+
+
+
+function configureChart() {
+
+var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+  if(data.elem == undefined){
+      data.elem = "pie_chart_div"
+  };
+
+  // configure the graph and render it
+  var chart = new google.visualization.PieChart(
+      document.getElementById(data.elem)
+  );
+  drawPieChart(chart, data.data, null)
+}
 </script>
-    <script type="text/javascript" src="{{STATIC_URL}}js/pie_chart.js"></script>
   </head>
   <body>
-        <div id="piechart_div" style="width: 900px; height: 500px;"></div>
+        <div id="pie_chart_div" style="width: 900px; height: 500px;"></div>
 
   </body>
 </html>
-
-

mustachebox/templates/mustachebox/tags/area.html

 <script type="text/javascript"
     src="https://www.google.com/jsapi"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/google_base.js"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
 <script type="text/javascript">
-  var data = {% autoescape off %}{{object.data}}{% endautoescape %}
-  var chart = google.visualization.AreaChart
+
+google.load('visualization', '1.0', {'packages':['corechart']});
+google.setOnLoadCallback(configureChart);
+
+
+function configureChart() {
+
+var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+  if(data.elem == undefined){
+      data.elem = "area_chart_div"
+  };
+
+
+  // configure the graph and render it
+  var chart = new google.visualization.AreaChart(
+      document.getElementById(data.elem)
+  );
+  drawChart(chart, data.data, null)
+}
+
 </script>
-<script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
-<script type="text/javascript" src="{{STATIC_URL}}js/area.js"></script>
 <div id="area_chart_div" style="width: 300px; height: 200px;">
 </div>

mustachebox/templates/mustachebox/tags/barchart.html

-    <script type="text/javascript"
+<script type="text/javascript"
     src="https://www.google.com/jsapi"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/google_base.js"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
 <script type="text/javascript">
-  var data = {% autoescape off %}{{object.data}}{% endautoescape %}
-  var chart = google.visualization.BarChart;
+
+google.load('visualization', '1.0', {'packages':['corechart']});
+google.setOnLoadCallback(configureChart);
+
+
+
+function configureChart() {
+
+var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+  if(data.elem == undefined){
+      data.elem = "bar_chart_div"
+  };
+
+  // configure the graph and render it
+  var chart = new google.visualization.BarChart(
+      document.getElementById(data.elem)
+  );
+  drawChart(chart, data.data, null)
+}
+
+
+
 </script>
-<script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
-<script type="text/javascript"
-        src="{{STATIC_URL}}js/barchart.js">
-</script>
-<div id="barchart_div" style="width: 300px; height: 300px;"></div>
+<div id="bar_chart_div" style="width: 300px; height: 200px;">
+</div>

mustachebox/templates/mustachebox/tags/columnchart.html

-    <script type="text/javascript"
+<script type="text/javascript"
     src="https://www.google.com/jsapi"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/google_base.js"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
 <script type="text/javascript">
-  var data = {% autoescape off %}{{object.data}}{% endautoescape %}
-  var chart = google.visualization.ColumnChart
+
+google.load('visualization', '1.0', {'packages':['corechart']});
+google.setOnLoadCallback(configureChart);
+
+var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+  if(data.elem == undefined){
+      data.elem = "column_chart_div"
+  };
+
+function configureChart() {
+  // configure the graph and render it
+  var chart = new google.visualization.ColumnChart(
+      document.getElementById(data.elem)
+  );
+  drawChart(chart, data.data, null)
+}
+
+
+
 </script>
-<script type="text/javascript" src="{{STATIC_URL}}js/time_serie.js"></script>
-<script type="text/javascript"
-        src="{{STATIC_URL}}js/columnchart.js">
-</script>
-<div id="columnchart_div" style="width: 300px; height: 300px;"></div>
+<div id="column_chart_div" style="width: 300px; height: 200px;">
+</div>

mustachebox/templates/mustachebox/tags/pie_chart.html

 <script type="text/javascript"
     src="https://www.google.com/jsapi"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/google_base.js"></script>
+<script type="text/javascript" src="{{STATIC_URL}}js/pie_serie.js"></script>
 <script type="text/javascript">
-  var piedata = {% autoescape off %}{{object.data}}{% endautoescape %}
-  var chart = google.visualization.PieChart
+
+google.load('visualization', '1.0', {'packages':['corechart']});
+google.setOnLoadCallback(configureChart);
+
+
+
+function configureChart() {
+
+var data = {% autoescape off %}{{object.data}}{% endautoescape %}
+  if(data.elem == undefined){
+      data.elem = "pie_chart_div"
+  };
+
+  // configure the graph and render it
+  var chart = new google.visualization.PieChart(
+      document.getElementById(data.elem)
+  );
+  drawPieChart(chart, data.data, null)
+}
+
+
+
 </script>
-<script type="text/javascript" src="{{STATIC_URL}}js/pie_chart.js"></script>
-
-<div id="piechart_div" style="width: 300px; height: 300px;"></div>
+<div id="pie_chart_div" style="width: 300px; height: 200px;">
+</div>

mustachebox/templatetags/graph.py

         raise template.TemplateSyntaxError, """
 %r tag requires at least 1 argument, the name of the graph you want to render
 """.format(token.contents.split()[0])
-    return GraphNode(method, *args)
+    kwargs = {}
+    for elem in args:
+        kwargs[elem.split('=')[0]] = elem.split('=')[1]
+    return GraphNode(method, **kwargs)
 
 
 class GraphNode(template.Node):
-    def __init__(self, method, *args):
+    def __init__(self, method, **kwargs):
         self.method = template.Variable(method)
-        self.args = args
+        self.kwargs = kwargs
         self. obj = None
 
     def render(self, context):
         except template.VariableDoesNotExist:
             name = unicode(self.method)
         self.obj = klass(name=name,
-                         *self.args)
+                         **self.kwargs)
 
         t = template.loader.get_template(
             'mustachebox/tags/{0}.html'.format(self.obj.template))

mustachebox/views.py

             GraphDetailView, self).render_to_response(
                 context,
                 **response_kwargs)
+
+
+class SimpleGraphView(DetailView):
+    """
+    This class render a graph but without the need of a backend.
+    
+    """