PDA

View Full Version : Ext 4.1 Line Chart Displaying Incorrect Data



floppydisk
20 Jun 2012, 12:36 PM
I've been playing around with Line Charts in Ext 4.1, trying to display a simple line chart showing time as the X axis and counts of items on the Y axis. I've managed to get the data to load and the chart to draw, however, the chart is drawing incorrectly and I'm baffled why. I've spent most of my day reading documentation, these forums, and stackoverflow and haven't been able to resolve it yet, hence my post. <br><br>For instance, in the first picture, there should be two y = 1 items. One at the intersection of the y and x axis and one at the far right of the graph. However, the graph seems to have doubled.36396

The other problem I've run into, on a related note, is the Line Chart seems to scale series somehow. For instance, the highlighted element, in this picture, has a value of 5 and should be near the top of the graph but it's middling about 1.5. This series should be y = 1, y =5, y = 1 corresponding to the time coordinates listed on the x-axis in the picture. 36397
The code I'm using is as follows:


Ext.define('ROOT.model.dataset', {
extend: 'Ext.data.Model',
alias: 'event',
fields: ['count', 'time'],

constructor: function (config) {
this.callParent(arguments);
Ext.apply(this, config);
}
});



Ext.define('Root.view.ChartPanel', {
extend: 'Ext.panel.Panel',
title: 'Event Metrics',

initComponent: function () {
Ext.apply(this, {
store: new Ext.data.SimpleStore({fields: [
{name: 'count', type: 'int'},
{name: 'time', type: 'string'}
]})
});
this.callParent(arguments);

//CREATE CHART
this.barChart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 700,
height: 500,
animate: false,
store: this.store,

axes: [
{
type: 'Numeric',
position: 'left',
fields: ['count'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Count',
grid: true,
adjustMaximumByMajorUnit: false,
adjustMinimumByMajorUnit: false,
minorTickSteps: 5,
majorTickSteps: 3,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['time'],
title: 'Date'
}
],

series: [
{
type: 'line',
axis: ['left', 'bottom'],
highlight: true,
tips: {
trackMouse: true,
width: 175,
height: 20,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('time') + ': ' + storeItem.get('count'));
}
},
/* label: {
display: 'insideEnd',
field: 'count',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
constrast: true
},*/
xField: 'time',
yField: ['count'],
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
this.add(this.barChart);
}, //end init



refreshEventChart: function (data) {
this.clear();
this.store.loadData(data);
this.barChart.redraw();
},

clear: function() {
this.store.removeAll();
this.barChart.surface.removeAll();
}
});

I've also posted this on StackOverflow. (http://stackoverflow.com/questions/11127542/ext-js-4-line-chart-displays-data-incorrectly) Any help would be greatly appreciated, I'm flummoxed!

scottmartin
20 Jun 2012, 2:54 PM
Please provide a fully working demo with data so we can duplicate the problem exactly.
(array store or json file)

Scott.

floppydisk
21 Jun 2012, 7:18 AM
In the process of creating a demo, II somehow got a piece of it to work correctly, but, the data doesn't line up on the graph.

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head> <title>DEMO</title>
<!--EXT--> <link rel="stylesheet" type="text/css" href="../../../ext-4.1.0/resources/css/ext-all-gray.css" /> <script type="text/javascript" src="../../../ext-4.1.0/ext-all-debug-w-comments.js"></script>
<script type="text/javascript" src="demomain.js"></script> <!--Model--> <script type="text/javascript" src="ChartModel.js"></script> <!--View--> <script type="text/javascript" src="ChartPanel.js"></script> </head><body class='body-style'>
</body></html>


Chart Panel:

var store = Ext.create('Ext.data.JsonStore', { fields: ['count','time'],
data: [
{count: 1, time: '2012-05-12 00:00:00'},
{count: 5, time: '2012-05-15 00:00:00'},
{count: 1, time: '2012-05-15 10:00:00'}
]
});
Ext.define('Test.view.ChartPanel', {
extend: 'Ext.panel.Panel',
title: 'Chart Demo',

initComponent: function () {
Ext.apply(this, {
store: store
});
this.callParent(arguments);

//CREATE CHART
this.barChart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 700,
height: 500,
animate: false,
store: this.store,

axes: [
{
type: 'Numeric',
position: 'left',
fields: ['count'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Count',
grid: true,
adjustMaximumByMajorUnit: false,
adjustMinimumByMajorUnit: false,
minorTickSteps: 1,
majorTickSteps: 3,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['time'],
title: 'Date'
}
],

series: [
{
type: 'line',
axis: ['bottom'],
highlight: true,
tips: {
trackMouse: true,
width: 175,
height: 20,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('time') + ': ' + storeItem.get('count'));
}
},
/* label: {
display: 'insideEnd',
field: 'count',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle',
constrast: true
},*/
xField: 'time',
yField: ['count'],
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
this.add(this.barChart);
}, //end init



refreshEventChart: function (data) {
this.clear();
this.store.loadData(data);
this.barChart.redraw();
},

clear: function() {
this.store.removeAll();
this.barChart.surface.removeAll();
}
});

Chart Model

Ext.define('Test.model.ChartModel', { extend: 'Ext.data.Model',
alias: 'test',
fields: ['count', 'time'],

constructor: function (config) {
this.callParent(arguments);
Ext.apply(this, config);
}
});

Main class

Ext.onReady(function () { var chart = Ext.create('Test.view.ChartPanel');
chart.redraw();
Ext.create('Ext.container.Container', {
layout: 'fit',
width: 800,
height: 400,
items: chart
});
}); //end on ready

floppydisk
21 Jun 2012, 8:19 AM
36441

See attached. Thanks!

Edit:

I've managed to solve the problem. Tracing backwards, I found an error in the PHP file serving up the data where it wasn't converting some of the data correctly (http://blog.tekipad.com/2010/02/extjs-line-charts-and-improper-string-data-from-php/)--hence the error being Ext's attempt to decipher bad data. The chart seems to work now. Thanks for the help!