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

A Simple Way to Build an ExtJS 3.4 Scatter Chart

11.12.2012
| 3592 views |
  • submit to reddit

Problem

You want to display a scatter chart in ExtJS 3.4.

Solution

Use the Ext.chart.Chart class, and make the lines invisible.

Discussion

This example works by rendering an Ext line chart and setting the “alpha” (visibility) property of the lines to 0 (transparent). If you wanted to add trend lines, you’d need to add visible lines.

ExtJS by default loads the charting .swf file from Yahoo’s CDN, as it uses the charting component from YUI as a base. This was recently updated and no longer works with Ext 3.4- charts do not render at all. Make sure to use the SWF file from the Ext distribution.

This chart resembles one of the ExtJS examples, but their help is fairly poor when it comes to styling. The Yahoo YUI documentation is far more complete.

ExtJS 4 has a scatter chart xtype, which probably works better than this technique.

Ext.onReady(function() {
   Ext.chart.Chart.CHART_URL = 'ext-3.4.0/resources/charts.swf';
   var store = new Ext.data.JsonStore({
    fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
    data: [
        {year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
        {year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
        {year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
        {year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
        ]
  });
 
  new Ext.Panel({
    width: 390,
    height: 200,
    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
      }),
      series: [{
        yField: 'comedy',
        displayName: 'Comedy',
        style: {
          lineAlpha: 0.0,
        }
 
      },{
        yField: 'action',
        displayName: 'Action',
        style: {
          lineAlpha: 0.0,
        }
      },{
        yField: 'drama',
        displayName: 'Drama',
        style: {
          lineAlpha: 0.0,
        }
      },{
        yField: 'thriller',
        displayName: 'Thriller',
        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.)