Hi all,
I am a newbie to Pyramid framework. I am currently working on a database
driven application for system monitoring. Database contains all system
level information like CPU usage, disk usage and network usage statistics.
This data will be used to plot charts.
I have gogled a lot to find any simple example/illustration of using
tw2.jit in Pyramid for plotting charts using tw2.jit. Below is are the
contents of my views.py/widjets.py/ template. Can you please help me to
find a simple solution to plot the graphs (using data in database) in
Pyramid either using tw2.jit or any other chart plotting tools in Pyramid ?
views.py
----------------------------
from preport.widgets import DemoAreaChart
@view_config(route_name='graph', renderer='templates/graphtest.pt')
def view_model(request):
return {'project':'Preport graph page',
'jitwidget':DemoAreaChart()}
widgets.py
----------------------------
from tw2.jit.widgets import AreaChart
from preport.graph_data import AreaChartJSONSampleData
class DemoAreaChart(AreaChart):
""" This is the only sample that loads its data asynchronously """
data = AreaChartJSONSampleData
width = '500'
height = '500'
offset = 0
labelOffset = 15
showAggregates = True
showLabels = True
type = 'stacked'
Label = {
'type': 'Native',
'size': 15,
'family': 'Arial',
'color': 'white'
}
Tips = {
'enable': True,
'onShow' : JSSymbol(src="""
(function(tip, elem) {
tip.innerHTML = "<b>" + elem.name + "</b>: $" + elem.value + "
per year income (adjusted for inflation)";
})""")
}
from tw2.core.jsonify import jsonify
@classmethod
@jsonify
def request(cls, req):
return AreaChartJSONSampleData
base_url = '/graph/'
preport.graph_data.py
--------------------------------------------------------------
from random import randint, random
AreaChartJSONSampleData = {
'label': ['label A', 'label B', 'label C', 'label D'],
'values': [
{
'label': 'date A',
'values': [20, 40, 15, 5]
},
{
'label': 'date B',
'values': [30, 10, 45, 10]
},
{
'label': 'date E',
'values': [38, 20, 35, 17]
},
{
'label': 'date F',
'values': [58, 10, 35, 32]
},
{
'label': 'date D',
'values': [55, 60, 34, 38]
},
{
'label': 'date C',
'values': [26, 40, 25, 40]
}
]
}
def icicleColor(level, total, val):
magic = 0.49 # lol
total = total + 1
coeff = magic/total
perturb = coeff*val/10.0
base = (level+magic)/total + perturb
assert(base >= 0 and base <= 1)
R = int(256*base)
G = int(128*base)
B = int(256*(1 - base))
return "#" + "".join(
["%2s" % hex(component)[2:] for component in [R, G, B]]
).replace(' ', '0')
def generateTree(total_levels=2, _level=0, _index=0, pid='', code=''):
val = randint(1,10)
id = '%i_%i_%s' % (_level, _index, pid)
this_node = {
'id' : "%s_inode_%s" % (code, id),
'name' : "%i" % val,
'data' : {
'$area' : val,
'$dim' : val,
'$color' : icicleColor(_level, total_levels, val)
}
}
if _level < total_levels:
this_node['children'] = [
generateTree(total_levels, _level+1, i, id, code)
for i in range(randint(2,4))
]
return this_node
IcicleJSONSampleData = generateTree(5, code='icicle')
SpaceTreeJSONSampleData = generateTree(3, code='spacetree')
BarChartJSONSampleData = AreaChartJSONSampleData
PieChartJSONSampleData = AreaChartJSONSampleData
template/graph.pt
-----------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal">
<head>
<title>The Pyramid Web Application Development Framework</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="keywords" content="python web application" />
<meta name="description" content="pyramid web application" />
<link rel="shortcut icon"
href="${request.static_url('preport:static/favicon.ico')}" />
<link rel="stylesheet"
href="${request.static_url('preport:static/pylons.css')}" type="text/css"
media="screen" charset="utf-8" />
<link rel="stylesheet"
href="http://static.pylonsproject.org/fonts/nobile/stylesheet.css"
media="screen" />
<link rel="stylesheet"
href="http://static.pylonsproject.org/fonts/neuton/stylesheet.css"
media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet"
href="${request.static_url('preport:static/ie6.css')}" type="text/css"
media="screen" charset="utf-8" />
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="top">
<div class="top align-center">
<div><img src="${request.static_url('preport:static/pyramid.png')}"
width="750" height="169" alt="pyramid"/></div>
</div>
</div>
<div id="middle">
<div class="middle align-center">
<p class="app-welcome">
Welcome to <span class="app-name">${project}</span> site. <br>
This is a development site for performance reporting
</p>
</div>
<div> <p> Sample granph testing </p>
</div>
</div>
<div id="left" class="align-right">
<p tal:content="structure jitwidget.display()"></p>
<!--div style="text-align:center; overflow:hidden;
background-color:${jitwidget.backgroundcolor}; width: ${jitwidget.width};
height: ${jitwidget.height};" id="${jitwidget.compound_id}"></div-->
</div>
<div id="bottom">
<div class="bottom">
<div id="left" class="align-right">
<h2>Search documentation</h2>
<form method="get"
action="http://docs.pylonsproject.org/projects/pyramid/en/1.3-branch/search.html">
<input type="text" id="q" name="q" value="" />
<input type="submit" id="x" value="Go" />
</form>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="footer">© Copyright 2008-2011, Agendaless
Consulting.</div>
</div>
</body>
</html>
NOTE : Tried both red colored statement. But none of them worked
graph page loads without any issues but there is graph which gets plotted.
Below is the page source.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript"
src="/resources/tw2.jit/static/Jit-2.0.1/jit.js" ></script>
<script type="text/javascript"
src="/resources/tw2.jit/static/js/tw2.jit.glue.js" ></script>
<title>The Pyramid Web Application Development Framework</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="keywords" content="python web application" />
<meta name="description" content="pyramid web application" />
<link rel="shortcut icon"
href="http://macharya-linux:6543/static/favicon.ico" />
<link rel="stylesheet"
href="http://macharya-linux:6543/static/pylons.css" type="text/css"
media="screen" charset="utf-8" />
<link rel="stylesheet"
href="http://static.pylonsproject.org/fonts/nobile/stylesheet.css"
media="screen" />
<link rel="stylesheet"
href="http://static.pylonsproject.org/fonts/neuton/stylesheet.css"
media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="http://macharya-linux:6543/static/ie6.css"
type="text/css" media="screen" charset="utf-8" />
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="top">
<div class="top align-center">
<div><img src="http://macharya-linux:6543/static/pyramid.png"
width="750" height="169" alt="pyramid"/></div>
</div>
</div>
<div id="middle">
<div class="middle align-center">
<p class="app-welcome">
Welcome to <span class="app-name">Preport graph page</span> site.
<br>
This is a development site for performance reporting
</p>
</div>
<div> <p> Sample granph testing </p>
</div>
</div>
<div id="left" class="align-right">
<p><div style="text-align:center; overflow:hidden;
background-color:#3a3a3a; width: 500; height: 500;" id=""></div>
</p>
<!--p tal:replace="structure widget.display()"></p-->
<!--div style="text-align:center; overflow:hidden;
background-color:#3a3a3a; width: 500; height: 500;" id=""></div-->
</div>
<div id="bottom">
<div class="bottom">
<div id="left" class="align-right">
<h2>Search documentation</h2>
<form method="get"
action="http://docs.pylonsproject.org/projects/pyramid/en/1.3-branch/search.html">
<input type="text" id="q" name="q" value="" />
<input type="submit" id="x" value="Go" />
</form>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="footer">© Copyright 2008-2011, Agendaless
Consulting.</div>
</div>
<script
type="text/javascript">setTimeout(function(){setupTW2JitWidget("AreaChart",
null, null, {"Canvas": {"width": false, "withLabels": true, "useCanvas":
false, "background": false, "height": false}, "showLabels": true, "Label":
{"color": "white", "type": "Native", "family": "Arial", "size": 15},
"duration": 1000, "showAggregates": true, "Tips": {"enable": true,
"onShow":
(function(tip, elem) {
tip.innerHTML = "<b>" + elem.name + "</b>: $" + elem.value + "
per year income (adjusted for inflation)";
})}, "Events": {"onTouchEnd": "(function() {})", "enable": false,
"onDragStart": "(function() {})", "onRightClick": "(function() {})",
"onTouchCancel": "(function() {})", "onTouchMove": "(function() {})",
"onMouseLeave": "(function() {})", "onMouseEnter": "(function() {})",
"onDragMove": "(function() {})", "onTouchStart": "(function() {})",
"onMouseMove": "(function() {})", "onClick": "(function() {})",
"onDragCancel": "(function() {})", "onMouseWheel": "(function() {})",
"type": "auto", "onDragEnd": "(function() {})"}, "selectOnHover": true,
"url_args": {}, "base_url": "/graph/", "injectInto": null, "width": "500",
"postInitJSCallback": (function(node) {}), "fps": 45, "labelOffset": 15,
"type": "stacked", "filterOnClick": true, "animate": true,
"backgroundcolor": "#3a3a3a", "offset": 0, "height": "500", "data":
{"values": [{"values": [20, 40, 15, 5], "label": "date A"}, {"values": [30,
10, 45, 10], "label": "date B"}, {"values": [38, 20, 35, 17], "label":
"date E"}, {"values": [58, 10, 35, 32], "label": "date F"}, {"values": [55,
60, 34, 38], "label": "date D"}, {"values": [26, 40, 25, 40], "label":
"date C"}], "label": ["label A", "label B", "label C", "label D"]},
"class": null, "url": null, "transition": $jit.Trans.Quart.easeOut,
"restoreOnRightClick": true})}, 0)</script>
<script
type="text/javascript">setTimeout(function(){window._jitwidgets["None"].loa dJSON({"values":
[{"values": [20, 40, 15, 5], "label": "date A"}, {"values": [30, 10, 45,
10], "label": "date B"}, {"values": [38, 20, 35, 17], "label": "date E"},
{"values": [58, 10, 35, 32], "label": "date F"}, {"values": [55, 60, 34,
38], "label": "date D"}, {"values": [26, 40, 25, 40], "label": "date C"}],
"label": ["label A", "label B", "label C", "label D"]})}, 0)</script>
<script type="text/javascript">setTimeout(function(){(function(node)
{})(window._jitwidgets["None"])}, 0)</script></body>
</html>
I am not able to find why the graph is no getting plotted ? can someone
help me to get this working ?
Thanks
__madhusudhan
