I am trying to implement a Highchart line graph with a datetime x axis on an EXTJS 3 panel so I am using extjs adapter and all the stuff provided on Sencha forums. I am facing a very weird problem. All tick labels on my x axis are in the same position so they overlap, as seen here:
Here is the code I am working with:
var store = new Ext.data.JsonStore({
url: '/graph',
fields: [
{name: 'datamesura', type: 'int'},
{name: 'despl_hor', type: 'float'},
{name: 'despl_ver', type: 'float'}
],
root: 'dades'
});
var datastore_task = {
run: function() {
store.load();
}
};
Ext.TaskMgr.start(datastore_task);
Ext.QuickTips.init();
var chart;
chart = new Ext.ux.HighChart({
series: [{
type: 'spline',
dataIndex: 'despl_hor',
name: 'Desplaçament horitzontal'
},{
type: 'spline',
dataIndex: 'despl_ver',
name: 'Desplaçament vertical'
}],
height: 500,
width: 700,
store: store,
animShift: true,
xField: 'datamesura',
chartConfig: {
chart: {
marginRight: 210,
marginBottom: 120,
zoomType: 'xy'
},
toolbar: {
itemStyle: {
color: '#4572A7',
cursor: 'pointer'
},
layout: {
xPosition: 'right',
yPosition: 'top',
x: 0,
y: -10
}
},
title: {
text: 'Prismes',
x: -20
},
subtitle: {
text: 'Desplaçament',
x: -20
},
xAxis: [{
title: {
text: 'Data',
margin: 20
},
labels: {
rotation: 270,
y: 35
},
type: 'datetime'
}],
yAxis: [{
title: {
text: 'Valor'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
}],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100,
borderWidth: 0
}
}
});
new Ext.Window({
title: 'Example',
layout: 'anchor',
items: [chart]
}).show();
Graph and time scale are being rendered properly. Even dates are correct in tooltips when I rollover any point. But as you see, all labels are in the beginning of x axis.
Data is coming from a JSON file in a format like this:
{"dades":[{"datamesura":1305158400000,"despl_hor":0,"despl_ver":0},{"datamesura":1305590400000,"despl_hor":0.85509233483876,"despl_ver":0.7406906575},{"datamesura":1305763200000,"despl_hor":0.40065251939804,"despl_ver":0.3806685951},{"datamesura":1306195200000,"despl_hor":1.3354238226121,"despl_ver":0.3883164125},{"datamesura":1306368000000,"despl_hor":1.2300886025811,"despl_ver":0.3028934962},{"datamesura":1306800000000,"despl_hor":0.76491207579695,"despl_ver":0.7382504417},{"datamesura":1306972800000,"despl_hor":0.97067811781249,"despl_ver":0.3934538156},{"datamesura":1307404800000,"despl_hor":0.99251776941272,"despl_ver":0.1344402012},{"datamesura":1307577600000,"despl_hor":1.7576987265171,"despl_ver":-0.0731718418},{"datamesura":1308009600000,"despl_hor":1.7982043839063,"despl_ver":0.8377618489},{"datamesura":1308182400000,"despl_hor":1.6815243145135,"despl_ver":0.6510250418},{"datamesura":1308614400000,"despl_hor":1.4625103263909,"despl_ver":0.2423211682},{"datamesura":1308787200000,"despl_hor":1.059558961408,"despl_ver":0.9443423224},{"datamesura":1309219200000,"despl_hor":1.8495061606277,"despl_ver":0.7814450066},{"datamesura":1309392000000,"despl_hor":1.9162507008479,"despl_ver":0.6051177109},{"datamesura":1309824000000,"despl_hor":1.7213552221723,"despl_ver":0.6680561831},{"datamesura":1309996800000,"despl_hor":1.9444381633778,"despl_ver":0.8635180524},{"datamesura":1310428800000,"despl_hor":1.6798176421267,"despl_ver":0.8274643529},{"datamesura":1310601600000,"despl_hor":1.4467543786006,"despl_ver":0.4695790538},{"datamesura":1311033600000,"despl_hor":1.4726130928727,"despl_ver":0.2477731064},{"datamesura":1311206400000,"despl_hor":1.2836033705939,"despl_ver":0.2656530857},{"datamesura":1311638400000,"despl_hor":1.5078416389993,"despl_ver":0.3320340535},{"datamesura":1312243200000,"despl_hor":1.9332533948761,"despl_ver":0.9397637894},{"datamesura":1312848000000,"despl_hor":1.2659382917425,"despl_ver":0.0425702553},{"datamesura":1313452800000,"despl_hor":1.2477477249428,"despl_ver":0.8257942379},{"datamesura":1314057600000,"despl_hor":1.8118509156661,"despl_ver":0.4792052981},{"datamesura":1314662400000,"despl_hor":1.918020654138,"despl_ver":0.5906438039},{"datamesura":1315267200000,"despl_hor":1.7023765324099,"despl_ver":0.8507942294},{"datamesura":1315872000000,"despl_hor":1.973909305414,"despl_ver":0.9492018485},{"datamesura":1316476800000,"despl_hor":1.932831196975,"despl_ver":0.8957622496},{"datamesura":1317081600000,"despl_hor":1.8232818443949,"despl_ver":1.0017163985},{"datamesura":1317686400000,"despl_hor":0.73874846050601,"despl_ver":0.5016692077},{"datamesura":1318896000000,"despl_hor":0.98500785814124,"despl_ver":0.2459143327},{"datamesura":1320192000000,"despl_hor":1.8171299009977,"despl_ver":0.695824387},{"datamesura":1321401600000,"despl_hor":1.0247267158126,"despl_ver":0.9220291425},{"datamesura":1322524800000,"despl_hor":1.7464007827529,"despl_ver":0.7178103147},{"datamesura":1323734400000,"despl_hor":1.8637498241985,"despl_ver":0.7515986697}]}
Does anyone have a clue? I am about to give up and try another charting library even though I like Highcharts very much.
