{"id":624,"date":"2012-10-16T11:52:10","date_gmt":"2012-10-16T11:52:10","guid":{"rendered":"http:\/\/garysieling.com\/blog\/?p=624"},"modified":"2012-10-16T11:52:10","modified_gmt":"2012-10-16T11:52:10","slug":"extjs-area-chart-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/extjs-area-chart-example\/","title":{"rendered":"ExtJS Area Chart Example"},"content":{"rendered":"

Problem<\/strong><\/p>\n

You want to display a stacked bar chart.<\/p>\n

\"\"<\/a><\/p>\n

Solution<\/strong><\/p>\n

Use the Ext.chart.Chart, and set the “series” property, including type: ‘area’.<\/p>\n

\nExt.onReady(function() {\n    Ext.define('ParolePoint', {\n        extend: 'Ext.data.Model',\n        fields: ['state', 'entry', 'exit']\n    });\n\n    var store = Ext.create('Ext.data.Store', {\n      model: 'ParolePoint',\n      data : [\n      {state: 'Connecticut', entry:31000, exit:28211},\n      {state: 'Maine', entry:3627, exit:3692},\n      {state: 'Massachusetts', entry:98952, exit:96142},\n      {state: 'New Hampshire', entry:3789, exit:3697},\n      {state: 'New Jersey', entry:49728, exit:55858},\n      {state: 'New York', entry:62419, exit:64147},\n      {state: 'Pennsylvania', entry:13966, exit:13240},\n      {state: 'Rhode Island', entry:6262, exit:6012},\n      {state: 'Vermont', entry:4884, exit:5487},\n    ]\n  });\n\n  Ext.create('Ext.chart.Chart', {\n     renderTo: Ext.getBody(),\n     width: 470,\n     height: 300,\n     store: store,\n     axes: [\n        {\n            title: 'Enter\/Exit Parole',\n            type: 'Numeric',\n            position: 'left',\n            fields: ['entry', 'exit'],\n        },\n        {\n            title: 'State',\n            type: 'Category',\n            position: 'bottom',\n            fields: ['state'],\n            title: 'US State',\n            grid: true,\n            label: {\n              rotate: {\n                degrees: 90\n              }\n            }\n        }],\n    series: [\n        {\n\t    type: 'area',\n\t    highlight: true,\n            xField: 'state',\n            yField: ['entry', 'exit']\n        }\n    ]\n  });\n});\n<\/pre>\n
Discussion<\/strong><\/p>\n
This is basically the same as a stacked bar chart<\/a>, but without all the extra properties (column and stacked). Unlike the bar chart, you can’t change the orientation.<\/p>\n","protected":false},"excerpt":{"rendered":"
Problem You want to display a stacked bar chart. Solution Use the Ext.chart.Chart, and set the “series” property, including type: ‘area’. Ext.onReady(function() { Ext.define(‘ParolePoint’, { extend: ‘Ext.data.Model’, fields: [‘state’, ‘entry’, ‘exit’] }); var store = Ext.create(‘Ext.data.Store’, { model: ‘ParolePoint’, data : [ {state: ‘Connecticut’, entry:31000, exit:28211}, {state: ‘Maine’, entry:3627, exit:3692}, {state: ‘Massachusetts’, entry:98952, exit:96142}, {state: … <\/p>\n
Continue reading “ExtJS Area Chart Example”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[4],"tags":[154,155,213,218,224,240,276,277,303,304,316,317,318,319,575],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t