{"id":570,"date":"2012-09-12T12:09:38","date_gmt":"2012-09-12T12:09:38","guid":{"rendered":"http:\/\/garysieling.com\/blog\/?p=570"},"modified":"2012-09-12T12:09:38","modified_gmt":"2012-09-12T12:09:38","slug":"extjs-line-chart-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/extjs-line-chart-example\/","title":{"rendered":"ExtJS Line Chart Example"},"content":{"rendered":"<p><strong>Problem<\/strong><\/p>\n<p>You want to display a line chart.<\/p>\n<p><a href=\"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/09\/ext-line-chart.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/09\/ext-line-chart.png\" alt=\"\" title=\"ext-line-chart\" width=\"472\" height=\"306\" class=\"alignnone size-full wp-image-571\" srcset=\"https:\/\/www.garysieling.com\/blog\/wp-content\/uploads\/2012\/09\/ext-line-chart.png 472w, https:\/\/www.garysieling.com\/blog\/wp-content\/uploads\/2012\/09\/ext-line-chart-300x194.png 300w\" sizes=\"(max-width: 472px) 100vw, 472px\" \/><\/a><\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>Use the Ext.chart.Chart. <\/p>\n<pre lang=\"javascript\">\n\nExt.onReady(function() {\n    Ext.define('PopulationPoint', {\n        extend: 'Ext.data.Model',\n        fields: ['state', 'population']\n    });\n\n   var store = Ext.create('Ext.data.Store', {\n    model: 'PopulationPoint',\n    data: [{ state:\"Alabama\", population: 4802740},\n           { state:\"Alaska\", population: 722718},\n           { state:\"Arizona\", population: 6482505},\n           { state:\"Arkansas\", population: 2937979},\n           { state:\"California\", population: 37691912},\n           { state:\"Colorado\", population: 5116796},\n           { state:\"Connecticut\", population: 3580709},\n           { state:\"Delaware\", population: 907135},\n           { state:\"DC\", population: 617996},\n           { state:\"Florida\", population: 19057542},\n           { state:\"Georgia\", population: 9815210},\n           { state:\"Hawaii\", population: 1374810},\n           { state:\"Idaho\", population: 1584985},\n           { state:\"Illinois\", population: 12869257},\n           { state:\"Indiana\", population: 6516922},\n           { state:\"Iowa\", population: 3062309},\n           { state:\"Kansas\", population: 2871238},\n           { state:\"Kentucky\", population: 4369356},\n           { state:\"Louisiana\", population: 4574836},\n           { state:\"Maine\", population: 1328188},\n           { state:\"Maryland\", population: 5828289},\n           { state:\"Massachusetts\", population: 6587536},\n           { state:\"Michigan\", population: 9876187},\n           { state:\"Minnesota\", population: 5344861},\n           { state:\"Mississippi\", population: 2978512},\n           { state:\"Missouri\", population: 6010688},\n           { state:\"Montana\", population: 998199},\n           { state:\"Nebraska\", population: 1842641},\n           { state:\"Nevada\", population: 2723322},\n           { state:\"New Hampshire\",\tpopulation: 1318194},\n           { state:\"New Jersey\",\tpopulation: 8821155},\n           { state:\"New Mexico\",\tpopulation: 2082224},\n           { state:\"New York\",\tpopulation: 19465197},\n           { state:\"North Carolina\", population: 9656401},\n           { state:\"North Dakota\",\tpopulation: 683932},\n           { state:\"Ohio\", population: 11544951},\n           { state:\"Oklahoma\", population: 3791508},\n           { state:\"Oregon\", population: 3871859},\n           { state:\"Pennsylvania\", population: 12742886},\n           { state:\"Rhode Island\",\tpopulation: 1051302},\n           { state:\"South Carolina\",\tpopulation: 4679230},\n           { state:\"South Dakota\",\tpopulation: 824082},\n           { state:\"Tennessee\", population: 6403353},\n           { state:\"Texas\", population: 25674681},\n           { state:\"Utah\", population: 2817222},\n           { state:\"Vermont\", population: 626431},\n           { state:\"Virginia\", population: 8096604},\n           { state:\"Washington\", population: 6830038},\n           { state:\"West Virginia\",\tpopulation: 1855364},\n           { state:\"Wisconsin\", population: 5711767},\n           { state:\"Wyoming\", population: 568158} ]\n  });\n\n  Ext.create('Ext.chart.Chart', {\n     renderTo: Ext.getBody(),\n     width: 470,\n     height: 300,\n        store: store,\n\taxes: [\n        {\n            title: 'Population',\n            type: 'Numeric',\n            position: 'left',\n            fields: ['population'],\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            type: 'line',\n            xField: 'state',\n            yField: 'population'\n        }\n    ]\n  });\t\n});\n<\/pre>\n<p><strong>Discussion<\/strong><\/p>\n<p>The tricky part to these charts seems to be syncing up all the duplicate instances of column names &#8211; this causes different problems, including Javascript errors, nothing rendering, or all the points rendering on one axis, rather than inside the graph. The column names &#8220;state&#8221; and &#8220;population&#8221; in this example are repeated in four locations: in the Model object, the Store object, the axes, and the series. In a real system you might generate store and model data on the server side, forcing at least two to match. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Problem You want to display a line chart. Solution Use the Ext.chart.Chart. Ext.onReady(function() { Ext.define(&#8216;PopulationPoint&#8217;, { extend: &#8216;Ext.data.Model&#8217;, fields: [&#8216;state&#8217;, &#8216;population&#8217;] }); var store = Ext.create(&#8216;Ext.data.Store&#8217;, { model: &#8216;PopulationPoint&#8217;, data: [{ state:&#8221;Alabama&#8221;, population: 4802740}, { state:&#8221;Alaska&#8221;, population: 722718}, { state:&#8221;Arizona&#8221;, population: 6482505}, { state:&#8221;Arkansas&#8221;, population: 2937979}, { state:&#8221;California&#8221;, population: 37691912}, { state:&#8221;Colorado&#8221;, population: 5116796}, { &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.garysieling.com\/blog\/extjs-line-chart-example\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;ExtJS Line 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,217,218,224,240,276,277,302,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\/570"}],"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=570"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/570\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}