Big Data/Analytics Zone is brought to you in partnership with:

Gary Sieling is a software developer interested in dev-ops, database technologies, and machine learning. He has a computer science degree from the Rochester Institute of Technology. He has worked on many products in the legal and regulatory industries, having worked on and supported several data warehousing applications. Gary is a DZone MVB and is not an employee of DZone and has posted 62 posts at DZone. You can read more from them at their website. View Full User Profile

How to Build an ExtJS 3.4 Scatter Chart with Logarithmic Axis

11.02.2012
| 4445 views |
  • submit to reddit

Problem

You're rendering data that increases exponentially, and wish to 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 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.

For further discussion of similar charts, see the ExtJS scatter chartexample and ExtJS trend line example.

Ext.onReady(function() {
Ext.chart.Chart.CHART_URL = 'ext-3.4.0/resources/charts.swf';
   var store = new Ext.data.JsonStore({
    fields: ['year', 'action'],
    data: [
        {year: 2005, action: 100000},
        {year: 2006, action: 1000000},
        {year: 2007, action: 10000000},
        {year: 2008, action: 100000000}
        ]
  });
 
  new Ext.Panel({
    width: 390,
    height: 300,
    renderTo: 'container',
    title: 'Scatter Plot - Takings by Genre',
    items: {
      xtype: 'linechart',
      store: store,
      xField: 'year',
      xAxis: new Ext.chart.NumericAxis({
        minimum: 2004,
        maximum: 2009,
        majorUnit: 1,
 
      }),
      yAxis: new Ext.chart.NumericAxis({
        labelRenderer: Ext.util.Format.usMoney,
        minimum: 10,
        maximum: 1000000000,
        scale: 'logarithmic'
      }),
      series: [{
        yField: 'action',
        displayName: 'Action',
        style: {
          lineAlpha: 0.0
        }
      }]
    }
  });
});


Published at DZone with permission of Gary Sieling, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)