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

A Simple Way to Build an ExtJS 3.4 Scatter Chart

DZone's Guide to

A Simple Way to Build an ExtJS 3.4 Scatter Chart

· Big Data Zone
Free Resource

Effortlessly power IoT, predictive analytics, and machine learning applications with an elastic, resilient data infrastructure. Learn how with Mesosphere DC/OS.

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


Learn to design and build better data-rich applications with this free eBook from O’Reilly. Brought to you by Mesosphere DC/OS.

Topics:

Published at DZone with permission of Gary Sieling, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}