Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Build an ExtJS 3.4 Scatter Chart with Logarithmic Axis

DZone's Guide to

How to Build an ExtJS 3.4 Scatter Chart with Logarithmic Axis

· Big Data Zone ·
Free Resource

The open source HPCC Systems platform is a proven, easy to use solution for managing data at scale. Visit our Easy Guide to learn more about this completely free platform, test drive some code in the online Playground, and get started today.

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
        }
      }]
    }
  });
});


Managing data at scale doesn’t have to be hard. Find out how the completely free, open source HPCC Systems platform makes it easier to update, easier to program, easier to integrate data, and easier to manage clusters. Download and get started today.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}