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>
Comments (0)