PDA

View Full Version : Chart & RTL/Right To Left Mode



HeikoErhardt
14 Jan 2014, 2:42 PM
The Ext.chart.Chart component seems to ignore the rtl config attribute.
When a chart (bar chart in this case) is displayed in a right-to-left panel, it looks a little weird (y axis tick labels cut off etc.).
Are the any best practices how to deal with charts in RTL apps?

Any help much appreciated...

scottmartin
14 Jan 2014, 4:44 PM
Please see the following:
http://www.sencha.com/forum/showthread.php?274605

HeikoErhardt
14 Jan 2014, 10:38 PM
Scott,as we are still evaluating Sencha, we do not have access to the forum.Since there is a mgmt demo scheduled for next week, I would very much appreciate if you could copy the releant info from the post into this one.Tx!

scottmartin
15 Jan 2014, 4:49 AM
Here is the code. You should be able to run this in our fiddle: Ext 4.2.2 is required

https://fiddle.sencha.com/#home



Ext.onReady(function () {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'Data1', 'Data2', 'Data3', 'Data4', 'Data5'],
data: [{
'name': 'One',
'Data1': 10,
'Data2': 12,
'Data3': 14,
'Data4': 8,
'Data5': 13
}, {
'name': 'Two',
'Data1': 7,
'Data2': 8,
'Data3': 16,
'Data4': 10,
'Data5': 6
}, {
'name': 'Three',
'Data1': 5,
'Data2': 9,
'Data3': 14,
'Data4': 20,
'Data5': 7
}, {
'name': 'Four',
'Data1': 8,
'Data2': 14,
'Data3': 6,
'Data4': 9,
'Data5': 23
}, {
'name': 'Five',
'Data1': 27,
'Data2': 18,
'Data3': 26,
'Data4': 13,
'Data5': 20
}]
});

var barChart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
width: 600,
height: 500,
animate: true,
store: store,
legend: true,
showInLegend: true,
rtl: true,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['Data1', 'Data2', 'Data3', 'Data4', 'Data5'],
label: Ext.util.Format.numberRenderer('0'),
title: 'Chart',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'right',
fields: ['name'],
title: 'Category'
}],
series: [{
type: 'bar',
axis: 'right',
highlight: true,
rtl: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(item.value[0] + ': $ ' + item.value[1]);
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: ['Data1', 'Data2', 'Data3', 'Data4', 'Data5'],
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
contrast: true
},
xField: 'name',
yField: ['Data1', 'Data2', 'Data3', 'Data4', 'Data5']
}

]
});

Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
},
//rtl: true,
items: [barChart]
});
});

HeikoErhardt
15 Jan 2014, 1:59 PM
Scott, thank you.Unfortunately, there is no selection for 4.2.2 in the fiddle.I don't have access to the download as well since we are not (yet) support subscribers.Using 4.2.1, this displays rather LTR-minded, the bar charts going from left to right etc.Does 4.2.2 fix this?Hmmm...

scottmartin
15 Jan 2014, 2:05 PM
Here is a screenshot from the test:

47597

HeikoErhardt
15 Jan 2014, 2:27 PM
Cool!!!! Exactly what I am looking for...Have a nice day... :)