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.&nbsp;<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!
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!