View Full Version : Wrong data being displayed on line chart for time series

24 Oct 2011, 2:31 PM
Dear all,

I am trying to add charts to an application, but I got stucked in this. I have
followed the steps in the API, and my code is like this right now:

var chart;
Ext.onReady(function () {

//Define a model
Ext.define('cts', {
extend: 'Ext.data.Model',
fields: [ {name: 'date'}, {name: 'counts', type: 'integer'}]

//Define an store
var store=Ext.create('Ext.data.Store', {
model: 'cts',
data: [ {date: new Date(2011, 1, 1, 8), counts: 0},
{date: new Date(2011, 1, 2, 8), counts: 23},
{date: new Date(2011, 1, 3, 8), counts: 40},
{date: new Date(2011, 1, 4, 8), counts: 50}]

//Define the chart itself
chart = new Ext.chart.Chart({
width: 400,
height: 400,
store: store,
renderTo: Ext.getBody(),
axes: [{
type: 'Numeric',
minimum: 0,
maximum: 200,
position: 'left',
fields: ['counts'],
title: 'Counts per channel per minute',
grid: {
odd: {
fill: '#dedede',
stroke: '#ddd',
'stroke-width': 0.5
}, {
type: 'Time',
fields: ['date'],
position: 'bottom',
title: 'time stamp',
dateFormat: 'Y-m-d',
groupBy: 'year,month,day,hour,minute,second'

series: [{
type: 'line',
xField: 'date',
yField: 'counts'


But instead of a nice chart I am getting this instead:


I have tried to define the store of many ways, but I always reach the same result. Curiously the result in safari is similar, but the horizontal lines do not appear. Any clue about what am I doing wrong?



4 Nov 2011, 5:24 AM
Hello Óscar,

I also stumbled upon this. I found out the code for Live Updated Chart (http://docs.sencha.com/ext-js/4-0/#%21/example/charts/LiveUpdates.html) uses Time Axis and wondered how this works:
It uses both axes in axis-attribute of the series. So please try this, it worked for me:

series: [{
type: 'line',
axis: ['left', 'bottom'],
xField: 'date',
yField: 'counts'