PDA

View Full Version : Line chart not scaling to time axis



svanbekhoven
4 Jun 2014, 11:34 PM
Hi everyone,

I have been fighting with a chart in Ext JS 4.2.1 for a while now. I want to combine a column and line chart with a time axis. Everything works fine until I set the x-axis to be of type 'Time'. The colum chart still looks good, but the line chart gets messed up. As you can see in the picture below the data points are not scaled well according to the time scale. Does anybody have a clue what to do?

Image:
http://i57.tinypic.com/5v8gk.png

Input:


{"data": [{"date": "2014-05-26", "progress": 0, "changes": 0}, {"date": "2014-05-27", "progress": 2, "changes": 7}, {"date": "2014-05-28", "progress": 10, "changes": 76}, {"date": "2014-05-29", "progress": 10, "changes": 0}, {"date": "2014-05-30", "progress": 18, "changes": 7}, {"date": "2014-05-31", "progress": 18, "changes": 0}, {"date": "2014-06-01", "progress": 18, "changes": 0}, {"date": "2014-06-02", "progress": 34, "changes": 12}, {"date": "2014-06-03", "progress": 38, "changes": 3}, {"date": "2014-06-04", "progress": 42, "changes": 3}], "success": true}




Ext.define('dashboard.view.portlet.ProgressOverTimeWidget', {


extend: 'dashboard.view.portlet.Widget',
alias: 'widget.progressovertimewidget',


requires: [
'Ext.chart.theme.Base',
'Ext.chart.series.Series',
'Ext.chart.series.Line',
'Ext.chart.axis.Numeric'
],


storeLoadInterval: 30000,


initComponent: function () {
var store = Ext.create('dashboard.store.ProgressOverTimeWidget');
Ext.apply(this, {
layout: 'fit',
height: this.height,
items: [{
xtype: 'chart',
animate: true,
itemCls: 'chartWidget',
shadow: false,
store: store,
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
position: 'left',
fields: ['progress'],
title: 'Project Progress (%)',
minimum: 0,
maximum: 100
}, {
type: 'Numeric',
position: 'right',
fields: ['changes'],
title: 'Changes (#)'
}, {
type: 'Time',
position: 'bottom',
fields: ['date'],
dateFormat: 'd/m'
}],
series: [{
type: 'line',
fill: true,
showInLegend: true,
axis: 'left',
xField: 'date',
yField: 'progress',
style: {
'stroke-width': 1.5,
stroke: 'rgb(148, 174, 10)'
},
tips: {
trackMouse: true,
width: 120,
renderer: function (storeItem, item) {
this.setTitle("Completion:" + storeItem.get('progress'));
}
}
}
, {
type: 'column',
showMarkers: false,
showInLegend: true, // show actual color in legend.
axis: 'right',
xField: 'date',
yField: 'changes',
style: {
fill: 'rgb(212, 53, 43)'
},
renderer: function(sprite, record, attr, index, store){
return Ext.apply(attr, {
fill: 'rgb(212, 53, 43)'
});
},
tips: {
trackMouse: true,
width: 70,
renderer: function (storeItem, item) {
this.setTitle("Changes:" + storeItem.get('changes'));
}
}
}
]
}]
});
this.callParent(arguments);
setInterval(function () {
store.load();
}, this.storeLoadInterval);
},
getWidgetStore: function () {
"use strict";
return Ext.ComponentQuery.query("chart", this)[0].getStore();
}
});

scottmartin
20 Jun 2014, 8:59 AM
You would need to update to 4.2.2 to get this corrected.
https://fiddle.sencha.com/#fiddle/6sb

The above fiddle shows the differences between versions

49418

saral.issac
12 Oct 2015, 12:15 AM
Hi,
Am using 4.2.2 still am facing this issue.Can anybody please help me