PDA

View Full Version : 4.0 Weird positioning of points in Scatter Chart



pni
28 Apr 2011, 5:57 AM
I have a timeseries with a Time x axis and numeric y axis. I want to display a (single) series which has several values, some being at the same date.
In the attached example, on the first date I have 2 points with value 5 and 80 respectively. Instead of displaying 2 points, the chart display a single one which apparently seems to be the sum of the 2 values (85).
Identically, there are 2 points on day 2, with values 10 and 85. and only one point displayed at y=95

In addition the chart displays 2 extra points (with a kind of halo around them), at weird dates ....



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Grid Test</title>

<link rel="stylesheet" type="text/css" href="./ext-4.0/resources/css/ext-all.css" />

<link rel="stylesheet" type="text/css" href="./ext-4.0/examples/shared/example.css" />

<script type="text/javascript" src="./ext-4.0/bootstrap.js"></script>
<script language="javascript">
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 + (0* 24* 3600 * 1000)), val: 80},
{datetime: new Date( today + (1* 24* 3600 * 1000)), val: 10},
{datetime: new Date( today + (1* 24* 3600 * 1000)), val: 85},
{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
});
});

</script>

</head>
<body>
<span id="app-msg" style="display:none;"></span>
</body>
</html>