PDA

View Full Version : [B3] Scatter chart doesn't support series with several points having same x value



pni
23 Apr 2011, 2:38 AM
I have a time series with several points having the same x value. say [x=0,y=5], [x=0,y=10], [x=10,y=10], etc ...
I would expect the second point to be on top of the fist one, at x=0, but the second one is displayed at x=5.

I've considered using several time series but this proved very inconvenient because depending on the data I get, I could end up with tens to hundreds of time series, with just a few points in each, and a pretty complex store configuration (one attribute per time series)

Is there anything wrong in what I'm doing, or is there an other way of doing it ?



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)).toDateString(), val: 5},
{datetime: new Date( today + (0* 24* 3600 * 1000)).toDateString(), val: 80},
{datetime: new Date( today + (1* 24* 3600 * 1000)).toDateString(), val: 10},
{datetime: new Date( today + (1* 24* 3600 * 1000)).toDateString(), val: 85},
{datetime: new Date( today + (2* 24* 3600 * 1000)).toDateString(), val: 2},
{datetime: new Date( today + (3* 24* 3600 * 1000)).toDateString(), val: 12},
{datetime: new Date( today + (4* 24* 3600 * 1000)).toDateString(), val: 25},
{datetime: new Date( today + (5* 24* 3600 * 1000)).toDateString(), val: 30},
{datetime: new Date( today + (6* 24* 3600 * 1000)).toDateString(), val: 8},
{datetime: new Date( today + (2* 24* 3600 * 1000)).toDateString(), val: 16},
{datetime: new Date( today + (3* 24* 3600 * 1000)).toDateString(), val: 14},
{datetime: new Date( today + (4* 24* 3600 * 1000)).toDateString(), val: 20},
{datetime: new Date( today + (5* 24* 3600 * 1000)).toDateString(), val: 10},
{datetime: new Date( today + (6* 24* 3600 * 1000)).toDateString(), val: 10}
]
});

var chart = new Ext.chart.Chart( {
animate: false,
shadow: true,
store: store,
axes: [ {
type: 'Category',
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
});
});

Charx
25 May 2012, 6:46 AM
Hi, any answer on this ?
I'm in the same case.
I need to put multiple points on graph that share the same 'x' coordinate