{"id":617,"date":"2012-10-15T12:22:30","date_gmt":"2012-10-15T12:22:30","guid":{"rendered":"http:\/\/garysieling.com\/blog\/?p=617"},"modified":"2012-10-15T12:22:30","modified_gmt":"2012-10-15T12:22:30","slug":"extjs-stacked-bar-chart-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/extjs-stacked-bar-chart-example\/","title":{"rendered":"ExtJS Stacked Bar 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: ‘bar’ and stacked: true.<\/p>\n

\nExt.onReady(function() {\n    Ext.define('ParolePoint', {\n        extend: 'Ext.data.Model',\n        fields: ['state', 'entry', 'exit']\n    });\n\n\t\tvar store = Ext.create('Ext.data.Store', {\n\t\t\tmodel: 'ParolePoint',\n\t\t\tdata : [\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\ttype: 'bar',\n\thighlight: true,\n\tcolumn: true,\n\tstacked: true,\n        xField: 'state',\n        yField: ['entry', 'exit']\n        }\n    ]\n  });\t\n});\n<\/pre>\n
Discussion<\/strong><\/p>\n
It’s easy to switch between stacked and non-stacked bar charts, using the stacked attribute. Unfortunately the data layout for these charts does not match a typical database query that would be used to generate them:<\/p>\n
\nselect year, type, count(*) value\nfrom facts\ngroup by year, type\n<\/pre>\n
If you’re graphing data from an OLTP style data warehouse, you’ll need to add code to pivot the output data into an Ext store, or write a new type of store.<\/p>\n
As with the other graphs, this code involves a fair amount of repetition – ExtJS considers the chart above to be a “column” chart, even though there is a separate property for the bar chart called “axis”, which tells Ext which axis is numeric (and anyway, bar charts usually have one descriptive axis and one numeric).<\/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: ‘bar’ and stacked: true. 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’, … <\/p>\n
Continue reading “ExtJS Stacked Bar 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,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[154,155,217,218,224,240,276,277,302,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