If you benefit from web2py hope you feel encouraged to pay it forward by contributing back to society in whatever form you choose!

please download the rgraph on : http://www.rgraph.net/
in this session will talk about pie chart and line chart
after that copy the rgraph javascript libraries (RGraph.common.core.js, RGraph.common.dynamic.js, RGraph.common.key.js, RGraph.common.tooltips.js, RGraph.drawing.rect.js, RGraph.line.js, RGraph.pie.js) and excanvas (excanvas.js) to your application js static folder.


after preparation set, then move to the web2py view :
views/default/index.html
 

{{extend 'layout.html'}}

<script src="{{=URL('static','js/RGraph.common.core.js')}}"></script>
<script src="{{=URL('static','js/RGraph.common.dynamic.js')}}"></script>
<script src="{{=URL('static','js/RGraph.common.key.js')}}"></script>
<script src="{{=URL('static','js/RGraph.common.tooltips.js')}}"></script>
<script src="{{=URL('static','js/RGraph.drawing.rect.js')}}"></script>
<script src="{{=URL('static','js/RGraph.line.js')}}"></script>
<script src="{{=URL('static','js/RGraph.pie.js')}}"></script>
<!--[if lt IE 9]><script src="{{=URL('static','js/excanvas.js')}}"></script><![endif]-->

<canvas id="monthly" width="450" height="350" style="border: 0px solid gray">[No canvas support]</canvas>

<div style="position: relative">
	<canvas id="sale_order" width="900" height="250">[No canvas support]</canvas>
</div>

<script>
	window.onload = function ()
	{
		var monthly_pie = new RGraph.Pie('monthly', [ 900000, 
													  800000,
													  700000, 
													  600000, 
													  500000 ] )
			.Set('title', '{{=request.now.strftime('%B') }} {{=request.now.year}}' )
			.Set('key', ['{{=T('Sale Order') }}', '{{=T('Sale Return') }}', '{{=T('Purchase Order') }}', 
						 '{{=T('Purchase Return') }}', '{{=T('Payment') }}' ] )
            .Set('key.colors', ['red', '#ccc', '#0f0', '#00f', 'pink' ] )
			.Set('key.interactive', true)
			.Set('key.rounded', false)
			.Set('radius', 70)
			.Set('tooltips', ['{{=T('Sale Order') }} : Rp. {{=format(900000, ",d").replace(",", ".") }}', 
							  '{{=T('Sale Return') }} : Rp. {{=format(800000, ",d").replace(",", ".") }}', 
							  '{{=T('Purchase Order') }} : Rp. {{=format(700000, ",d").replace(",", ".") }}', 
							  '{{=T('Purchase Return') }} : Rp. {{=format(600000, ",d").replace(",", ".") }}', 
							  '{{=T('Payment') }} : Rp. {{=format(500000, ",d").replace(",", ".") }}' ] )
			.Draw();
			
		var line_sale_order = new RGraph.Line('sale_order', [ 60000, 80000, 70000, 90000, 50000 ] )
			.Set('labels', [ '01 March', '02 March', '03 March', '04 March', '05 March' ])
            .Set('tooltips', [ '01 March : 60000', '02 March : 80000', '03 March: 70000', '04 March : 90000', '05 March : 50000' ] )
			.Set('title', '{{=T('Sale Order') }} {{=request.now.strftime('%B') }} {{=request.now.year}}' )
			.Set('gutter.left', 100)
            .Set('colors.alternate', true)
            .Set('colors', [ ['blue', 'red'] ] )
            .Set('linewidth', 3)
            .Set('crosshairs', true)
            .Set('crosshairs.snap', true)
            .Set('shadow', true)
            .Set('tickmarks', 'filledcircle')
            .Set('ticksize', 3)
			.Draw();
	}
</script>

 
 

 

 

Related slices

Comments (0)


Hosting graciously provided by:
Python Anywhere