Over a million developers have joined DZone.

How to Display a Scatter Chart in ExtJS 3.4

· Web Dev Zone

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, brought to you in partnership with Stormpath.

 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 complete, pre-built User Management API for building web and mobile applications, and APIs. Download our new whitepaper: "Build Versus Buy: Customer Identity Management for Web and Mobile Applications".

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 }}