Over a million developers have joined DZone.
Platinum Partner

How to Display a Scatter Chart in ExtJS 3.4

· Web Dev Zone

The Web Dev Zone is brought to you by Stormpath—offering a pre-built Identity API for developers. Easily build powerful user management, authentication, and authorization into your web and mobile applications. Download this Forrester report on the new landscape of Customer Identity and Access Management.

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



The Web Dev Zone is brought to you by Stormpath—offering a pre-built, streamlined User Management API for building web and mobile applications. Check out our top pointers for designing your REST API.

Topics:

Published at DZone with permission of Comsysto Gmbh , DZone MVB .

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}