{"id":696,"date":"2012-10-27T23:22:58","date_gmt":"2012-10-27T23:22:58","guid":{"rendered":"http:\/\/garysieling.com\/blog\/?p=696"},"modified":"2012-10-27T23:22:58","modified_gmt":"2012-10-27T23:22:58","slug":"extjs-3-4-chart-with-logarithmic-axis","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/extjs-3-4-chart-with-logarithmic-axis\/","title":{"rendered":"ExtJS 3.4 Scatter Chart Example with Logarithmic Axis"},"content":{"rendered":"

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

You are rendering data that increases exponentially, and wish display a chart with a log-scale axis.<\/p>\n

Exponential data:
\n\"\"<\/p>\n

Logarithmic scale rendering of the same:
\n\"\"<\/p>\n

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

Set the “scale” property of the relevant axis to “logarithmic.”<\/p>\n

Discussion<\/strong><\/p>\n

There does not seem to be any way to control the frequency of the major\/minor tick marks other than by fixed intervals. Be careful about setting these in this chart type, as you can quickly overwhelm the browser to the point where Flash is unresponsive. It may be preferable to control the rendering using tooltips on the data points.<\/p>\n

For further discussion of similar charts, see the ExtJS scatter chart<\/a> example and ExtJS trend line example<\/a>.<\/p>\n

\nExt.onReady(function() {\nExt.chart.Chart.CHART_URL = 'ext-3.4.0\/resources\/charts.swf';\n   var store = new Ext.data.JsonStore({\n    fields: ['year', 'action'],\n    data: [\n        {year: 2005, action: 100000},\n        {year: 2006, action: 1000000},\n        {year: 2007, action: 10000000},\n        {year: 2008, action: 100000000}\n        ]\n  });\n  \n  new Ext.Panel({\n    width: 390,\n    height: 300,\n    renderTo: 'container',\n    title: 'Scatter Plot - Takings by Genre',\n    items: {\n      xtype: 'linechart',\n      store: store,\n      xField: 'year',\n      xAxis: new Ext.chart.NumericAxis({\n        minimum: 2004,\n        maximum: 2009,\n        majorUnit: 1,\n\n      }),\n      yAxis: new Ext.chart.NumericAxis({\n        labelRenderer: Ext.util.Format.usMoney,\n        minimum: 10,\n        maximum: 1000000000,\n        scale: 'logarithmic'\n      }),\n      series: [{\n        yField: 'action',\n        displayName: 'Action',\n        style: {\n          lineAlpha: 0.0\n        }\n      }]\n    }\n  });\n});\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Problem You are rendering data that increases exponentially, and wish display a chart with a log-scale axis. Exponential data: Logarithmic scale rendering of the same: Solution Set the “scale” property of the relevant axis to “logarithmic.” Discussion There does not seem to be any way to control the frequency of the major\/minor tick marks other … <\/p>\n
Continue reading “ExtJS 3.4 Scatter Chart Example with Logarithmic Axis”<\/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,214,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