{"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":"<p><strong>Problem<\/strong><\/p>\n<p>You want to display a stacked bar chart.<\/p>\n<p><a href=\"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/10\/area-chart.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/10\/area-chart.png\" alt=\"\" title=\"area chart\" width=\"465\" height=\"310\" class=\"alignnone size-full wp-image-625\" srcset=\"https:\/\/www.garysieling.com\/blog\/wp-content\/uploads\/2012\/10\/area-chart.png 465w, https:\/\/www.garysieling.com\/blog\/wp-content\/uploads\/2012\/10\/area-chart-300x200.png 300w\" sizes=\"(max-width: 465px) 100vw, 465px\" \/><\/a><\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>Use the Ext.chart.Chart, and set the &#8220;series&#8221; property, including type: &#8216;area&#8217;.<\/p>\n<pre lang=\"javascript\">\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<p><strong>Discussion<\/strong><\/p>\n<p>This is basically the same as a <a href=\"http:\/\/garysieling.com\/blog\/extjs-stacked-bar-chart-example\">stacked bar chart<\/a>, but without all the extra properties (column and stacked). Unlike the bar chart, you can&#8217;t change the orientation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Problem You want to display a stacked bar chart. Solution Use the Ext.chart.Chart, and set the &#8220;series&#8221; property, including type: &#8216;area&#8217;. Ext.onReady(function() { Ext.define(&#8216;ParolePoint&#8217;, { extend: &#8216;Ext.data.Model&#8217;, fields: [&#8216;state&#8217;, &#8216;entry&#8217;, &#8216;exit&#8217;] }); var store = Ext.create(&#8216;Ext.data.Store&#8217;, { model: &#8216;ParolePoint&#8217;, data : [ {state: &#8216;Connecticut&#8217;, entry:31000, exit:28211}, {state: &#8216;Maine&#8217;, entry:3627, exit:3692}, {state: &#8216;Massachusetts&#8217;, entry:98952, exit:96142}, {state: &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.garysieling.com\/blog\/extjs-area-chart-example\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;ExtJS Area Chart Example&#8221;<\/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,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[154,155,213,218,224,240,276,277,303,304,316,317,318,319,575],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/624"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=624"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/624\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}