PDA

View Full Version : [FIXED-EXTJSIV-590][B3] Scatter chart doesn't render data with 'Time' X axis



pni
22 Apr 2011, 11:27 AM
I've used the scatter chart successfully with a few different configurations, but have been unable to get data displayed when the X axis is of type 'Time'.

See example attached.


Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);

Ext.onReady(function () {

var today = new Date().getTime();

var store = Ext.create('Ext.data.JsonStore', {
fields: [
{name: 'datetime', type: 'date'},
{name: 'val', type:'float'}
],
data: [
{datetime: new Date( today + (0* 24* 3600 * 1000)), val: 5},
{datetime: new Date( today + (1* 24* 3600 * 1000)), val: 10},
{datetime: new Date( today + (2* 24* 3600 * 1000)), val: 2},
{datetime: new Date( today + (3* 24* 3600 * 1000)), val: 12},
{datetime: new Date( today + (4* 24* 3600 * 1000)), val: 25},
{datetime: new Date( today + (5* 24* 3600 * 1000)), val: 30},
{datetime: new Date( today + (6* 24* 3600 * 1000)), val: 8}
]
});

var chart = new Ext.chart.Chart( {
animate: false,
shadow: true,
store: store,
axes: [ {
type: 'Time',
dateFormat: 'M d',
position: 'bottom',
fields: ['datetime'],
title: 'Date'
},{
type: 'Numeric',
position: 'left',
fields: ['val'],
title: 'Utilization (%)',
grid: false,
minimum: 0,
maximum: 100
}],
series: [ {
type: 'scatter',
axis: 'left',
xField: 'datetime',
yField: 'val',
color: '#ccc',
markerConfig: {
type: 'circle',
radius: 3,
size: 3
}
}]
});


var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
hidden: false,
maximizable: true,
title: 'Scatter Chart Test',
renderTo: Ext.getBody(),
layout: 'fit',
items: chart
});
});

Jamie Avins
23 Apr 2011, 1:49 PM
Fixed for the next version, thank you for the report.

ssk_hari
26 Jul 2011, 2:32 AM
Hi .. Am not getting the Scatter chart displayed .. It just displays the axis but not data ...

Ext.setup({
tabletStartupScreen: 'tablet_startup.jpg',
phoneStartupScreen: 'phone_startup.jpg',
tabletIcon: 'icon-ipad.png',
phoneIcon: 'icon-iphone.png',
glossOnIcon: false,
onReady: function() {

var dt=[{'name':'2010', 'data1':10, 'data2':88, 'data3':78},
{'name':'2011', 'data1':70, 'data2':76, 'data3':43},
{'name':'2012', 'data1':90, 'data2':67, 'data3':56},
{'name':'2013', 'data1':110, 'data2':65, 'data3':76},
{'name':'2010', 'data1':60, 'data2':98, 'data3':22},
{'name':'2011', 'data1':78, 'data2':121, 'data3':45},
{'name':'2012', 'data1':56, 'data2':55, 'data3':32},
{'name':'2013', 'data1':65, 'data2':34, 'data3':50},
{'name':'2014', 'data1':50, 'data2':24, 'data3':66}]


window.store1 = new Ext.data.JsonStore({
fields: ['name', 'data1', 'data2','data3'],
data:dt
});

new Ext.chart.Panel({
title: 'Scatter Chart',
fullscreen: true,
dockedItems: {
xtype: 'button',
iconCls: 'shuffle',
iconMask: true,
ui: 'plain',

dock: 'right'
},
items: {
cls: 'scatter1',
theme: 'Demo',
animate: false,

store: store1,

axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2', 'data3'],
title: 'Number of Hits'
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Month of the Year'
}],
series: [{
type: 'scatter',

axis: 'left',
xField: 'name',
yField: 'data1'
}, {
type: 'scatter',

axis: 'left',
xField: 'name',
yField: 'data2'
}, {
type: 'scatter',

axis: 'left',
xField: 'name',
yField: 'data3'
}]
}
});
}
});

Anything in the code to be corrected ?

pablodcar
27 Jan 2012, 8:28 AM
I'm using ExtJS 4.0.1 and I'm experimenting the same issue. In what version was this fixed?

Thanks in Advance,

Pablo