PDA

View Full Version : Format Timestamp X Axis Chart to 24 hours only



tuniship.tn
16 Aug 2019, 4:15 AM
I'm creating a line chart using ExtJs, and I would like to have 24 hour x-axis. However, I found an issue with duplicate x hours. I set formatter to show only 24 hours:
groupBy: 'h'like this:


Ext.create('Ext.panel.Panel', {
width: 800,
height: 400,
title: 'CPU %',
border: 1,
renderTo: Ext.getBody(),
layout: 'fit',
items: [{
xtype: 'cartesian',
store: s,
interactions: [{
type: 'crosszoom'


}


],
legend: {
docked: 'right'
},


axes: [{
type: 'numeric',
position: 'left',
fields: ['value'],


}, {
type: 'time',
grid: true,
dateFormat: 'h',
groupBy: 'h',
fields: ['timestamp'],
position: 'bottom',
label: {
rotate: {
degrees: -45
}
}


}],
series: [{
type: 'line',
axis: 'left',
title: 'value',
xField: 'timestamp',
yField: 'value',
smooth: true,


marker: {
type: 'square',
fx: {
duration: 200,
easing: 'backOut'
}
},
highlightCfg: {
scaling: 2
}
}]
}]


})

Here is my live example: https://fiddle.sencha.com/#view/editor&fiddle/2ulv
What am I doing wrong?
Thanks in advance

tuniship.tn
17 Aug 2019, 12:50 PM
fixed: (UNIX timestamp from OVH API was divided per 1000.)


dateFormat : "U"