Code:
function testRenderer(storeItem, item) {
console.log(item);
console.log(item.series.yField);
console.log(item.series.yFieldIndex);
var fieldValue = item.yField;
var valueIndex = fieldValue.indexOf("_");
if (valueIndex != -1) {
var itemYFieldName = item.yField;
console.log("itemYFieldName=" + itemYFieldName);
var yFieldIndex = 0;
for (var i in item.series.yField) {
var fieldName = item.series.yField[i];
console.log("testing fieldName=" + fieldName);
if (fieldName === itemYFieldName) {
break;
}
yFieldIndex++;
}
console.log("titleIndex=" + yFieldIndex);
var fieldValueTranslation = item.series.title[yFieldIndex];
console.log("title=" + fieldValueTranslation);
this.setTitle(fieldValueTranslation);
} else {
console.log("no title found");
}
}
Ext.chart.theme.testResultTheme = Ext.extend(Ext.chart.theme.Base, {
constructor: function(config) {
Ext.chart.theme.Base.prototype.constructor.call(this, Ext.apply({
colors: [
'rgb(22, 181, 7)',
'rgb(230, 18, 68)',
'rgb(242,237,239)'
]
}, config));
}
});
// for ColumnChart: displays labels of category axis
function drawDiagonalLabels() {
var me = this,
axes = me.chart.axes,
insetPadding = me.chart.insetPadding,
position = me.position,
inflections = me.inflections,
ln = inflections.length,
labels = me.labels,
maxHeight = 0,
ratio,
bbox, point,
adjustEnd = me.adjustEnd,
hasLeft = axes.findIndex('position', 'left') != -1,
hasRight = axes.findIndex('position', 'right') != -1,
textLabel, text,
last, x, y, i;
last = ln - 1;
point = inflections[0];
// create legend before creation of the axis for correctly displaying of labels
createLegend(me);
var barWidth = me.chart.series.items[0].getBarGirth();
var maxLabelText = getLabelWithMaxLength(me, labels);
me.label.rotate = {degrees:0};
var labelForWidthDefine = me.getOrCreateLabel(ln, me.label.renderer(maxLabelText));
var labelLength = Math.max(barWidth, 80);
var maxWidthOfLabel = Math.floor(maxLabelText.length*(labelLength/labelForWidthDefine._bbox.width));
labelForWidthDefine.destroy();
// calculates the angle for diagonal displaying
var degrees = 0;
if (labelLength > barWidth) {
degrees = Math.acos(barWidth/labelLength)*180/Math.PI;
me.label.rotate = {degrees:360-parseInt(degrees)};
}
ratio = Math.floor(Math.abs(Math.sin((360-parseInt(degrees)) * Math.PI / 180)));
for (i = 0; i < ln; i++) {
point = inflections[i];
text = me.label.renderer(labels[i]);
if (typeof(text) !== undefined) {
textLabel = createLabelWithToolTip(me, i, text, maxWidthOfLabel);
bbox = textLabel._bbox;
maxHeight = Math.max(maxHeight, bbox.height + me.dashSize + me.label.padding);
if (parseInt(degrees) < 45) {
x = Math.floor(point[0] - (ratio ? bbox.height : bbox.width) / 2);
} else {
x = Math.floor(point[0] - bbox.height / 2);
}
if (adjustEnd && me.chart.maxGutter[0] == 0) {
if (i == 0 && !hasLeft) {
x = point[0];
}
else if (i == last && !hasRight) {
x = Math.min(x, point[0] - bbox.width + insetPadding);
}
}
if (position == 'top') {
y = point[1] - (me.dashSize * 2) - me.label.padding - (bbox.height / 2);
}
else {
y = point[1] + (me.dashSize * 2) + me.label.padding + (bbox.height / 2);
}
textLabel.setAttributes({
hidden: false,
x: x,
y: y
}, true);
}
}
return maxHeight;
}
function createLegend(axis) {
var chart = axis.chart;
var legend = chart.legend;
if (legend !== false && legend.visible) {
if (legend.update || !legend.created) {
legend.create();
}
}
chart.alignAxes();
if (legend !== false && legend.visible) {
legend.updatePosition();
}
}
function createLabelWithToolTip(axis, i, text, maxWidth) {
var shortText;
if (text.length > maxWidth) {
shortText = Ext.util.Format.substr(text, 0, maxWidth - 3) + "...";
} else {
shortText = text;
}
var label = axis.getOrCreateLabel(i, shortText);
if (text.length > maxWidth) {
label.setText(shortText);
var tip = Ext.create('Ext.tip.ToolTip', {
target: label.el,
html: '<span>' + text + '</span>'
});
}
return label;
}
function getLabelWithMaxLength(axis, labels) {
var label;
var maxLength = 0;
for (var i=0; i<labels.length; i++) {
var text = labels[i];
if (text.length > maxLength) {
label = labels[i];
maxLength = text.length;
}
}
return label;
}
function removeHideShowLegend(chart) {
Ext.each(chart.legend.items, function(item) {
item.un("mousedown", item.events.mousedown.listeners[0].fn);
});
}
//#########################################
var testlocalStore = Ext.create('Ext.data.JsonStore', {
name: 'testLocalStore',
fields: ['testid', 'result', 'resultcount_0', 'result2count_1'],
data: [
{testid:'477189',result:'0',result2count_1:3, resultcount_0:10},
// {testid:'477189',result:'1',result2count:3, resultcount:10},
{testid:'477153',result:'0',result2count_1:3, resultcount_0:6},
{testid:'477690',result:'0',result2count_1:3, resultcount_0:4},
{testid:'477177',result:'0',result2count_1:3, resultcount_0:1}
]
});
var buggyStore = Ext.create('Ext.data.JsonStore', {
name: 'testLocalStore',
fields: ['testid', 'result', 'resultcount_0', 'result2count_1'],
data: [
{testid:'477189',result:'0',result2count_1:3, resultcount_0:1},
{testid:'477153',result:'0',result2count_1:3, resultcount_0:1},
{testid:'477690',result:'0',result2count_1:3, resultcount_0:1},
{testid:'477177',result:'0',result2count_1:3, resultcount_0:1}
]
});
var testRemoteUrl = '';
var testChart = Ext.create('Ext.chart.Chart', {
width:500,
height:450,
animate: true,
store: buggyStore,
//theme:'testResultTheme',
legend: {position:'right',itemSpacing:0,boxStrokeWidth:0},
axes: [
{type: 'Numeric',
position: 'left',
fields: ['resultcount_0'],
label: {renderer: Ext.util.Format.numberRenderer('0,0')},
title: 'Count',grid: true,minimum: 0},
{type: 'Category',position: 'bottom',fields: ['testid'],title: 'Test',
drawHorizontalLabels: drawDiagonalLabels}
],
series: [{type:'column',axis: 'left',showInLegend:true,
tips: {trackMouse: true,width:160,height:38,
renderer: testRenderer
},
highlight: true,
label: {field: ['resultcount_0','result2count_1'],display: 'insideEnd',
contrast: true,
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal','text-anchor': 'middle',font: '12px Arial'
},
yField: ['resultcount_0', 'result2count_1'],
xField: 'testid',
stacked: true,
title:['strResultCount', 'strResult2Count']
}
]});
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{
title: 'EXTJS: MyApp',
html : 'Version: ' + Ext.versions.core.version,
height:50
},
testChart
]
});
}
});