Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <script type='text/javascript'>
- Ext.require('Ext.chart.*');
- Ext.require('Ext.data.*');
- Ext.require(['Ext.Window', 'Ext.layout.container.Fit', 'Ext.fx.target.Sprite', 'Ext.window.MessageBox']);
- Ext.onReady(function () {
- var store1 = Ext.create('Ext.data.JsonStore', {
- fields: ['region', 'amount'],
- data: [
- {"region":"West Zone","amount":4905060},
- {"region":"East Zone","amount":2310456},
- {"region":"South Zone - I","amount":9729035},
- {"region":"North Zone","amount":2574571},
- {"region":"International","amount":558107},
- {"region":"South Zone - II","amount":1197225},
- {"region":"West Zone - Pharma","amount":7188400},
- {"region":"South Zone I - Pharma","amount":985000},
- {"region":"North Zone - Pharma","amount":324000}],
- autoLoad:true
- });
- var donut = false,
- chart = Ext.create('Ext.chart.Chart', {
- xtype: 'chart',
- animate: true,
- store: store1,
- shadow: true,
- legend: {
- position: 'right'
- },
- insetPadding: 60,
- theme: 'Base:gradients',
- series: [{
- type: 'pie',
- field: 'amount',
- showInLegend: true,
- donut: donut,
- tips: {
- trackMouse: true,
- width: 140,
- height: 28,
- renderer: function(storeItem, item) {
- //calculate percentage.
- var total = 0;
- store1.each(function(rec) {
- total += rec.get('amount');
- });
- this.setTitle(storeItem.get('region') + ': ' + Math.round(storeItem.get('amount') / total * 100) + '%');
- }
- },
- highlight: {
- segment: {
- margin: 20
- }
- },
- label: {
- field: 'region',
- display: 'rotate',
- contrast: true,
- font: '18px Arial'
- }
- }]
- });
- var panel1 = Ext.create('widget.panel', {
- width: 800,
- height: 600,
- title: 'Sales Report',
- renderTo: Ext.getBody(),
- layout: 'fit',
- tbar: [{
- text: 'Save Chart',
- handler: function() {
- Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
- if(choice == 'yes'){
- chart.save({
- type: 'image/png'
- });
- }
- });
- }
- }, {
- enableToggle: true,
- pressed: false,
- text: 'Donut',
- toggleHandler: function(btn, pressed) {
- chart.series.first().donut = pressed ? 35 : false;
- chart.refresh();
- }
- }],
- items: chart
- });
- });
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement