PDA

View Full Version : [INFOREQ] Ext bar series chart lengths



John O Donovan
4 Dec 2012, 7:42 AM
I have two bar charts each having two series. The values used are

Object { range1=66, range2=34} // displays with normal length Object { range1=19, range2=81} // displays at about 60% normal length
both add up to 100, so I would expect the total length of the bar to be the same



createChart: function() {
// I call a function here to get the data
// For these purposes we can use
//
rangeData = {};
rangeData.range1 = 19;
rangeData.range2 = 81;

if (rangeData === null) {
console.log("no data usable for chart");
return null;
}

var store = Ext.create('Ext.data.JsonStore', {
fields: ['range1', 'range2'],
data: rangeData ,
clearOnPageLoad: false
}),
capacityColors = ['#8CBA32', '#068EE3'],
chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: true,
shadow: false,
store: store,
width: this.chartWidth,
height: 50,
series: [{
type: 'bar',
axis: 'bottom',
gutter: 0,
yField: ['range1', 'range2'],
renderer: function(sprite, record, attr, index, store) {
var colour = '';
switch (index) {
case 0:
colour = capacityColors[0];
break;
case 1:
colour = capacityColors[1];
break;
}
return Ext.apply(attr, {
fill: colour
//radius: 5 //adds a border radius of 5px to all corners of all items in the stack, which isn't what we need.
});
},
stacked: true
}]
});
return chart;
},

The problem is that I have a number of these charts on the page, and for most the length is fine, but sometimes the chart is rendered at about 60% of normal length.

In Firefox I am unable to attach the images. It will be obvious enough when you run the code.
This happens using the latest version of Firefox and chrome and IE.
I am using Ext JS 4.1
Build date: 2012-10-25 15:13:53 (240477695016a85fb9ed1098fd5f8e116327fcc3)

Please let me know if this is desired behavior and not a bug

Best Regards

John

mitchellsimoens
4 Dec 2012, 8:03 AM
Can I get a test case to reproduce the issue you are reporting?

John O Donovan
7 Dec 2012, 3:45 AM
Please find a working version.
I would have expected both charts to have the same length as they have the same total data. I really need to be able to ensure that they have the same length, as I display multiple charts on the page.

Let me know if you want me to submit in the format specified.

I am using the ext-all from ext 4.1.3, Build date: 2012-10-25 15:13:53 (240477695016a85fb9ed1098fd5f8e116327fcc3)

This happens on all browsers.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>

<script>

function createPanel() {
var data1 = {};
data1.range1 = 20;
data1.range2 = 80;

var data2 = {};
data2.range1 = 50;
data2.range2 = 50;

var firstStore = new Ext.data.JsonStore({
fields : [ 'range1', 'range2' ],
data : data1
});

var secondStore = new Ext.data.JsonStore({
fields : [ 'range1', 'range2' ],
data : data2
});

Ext.create("Ext.panel.Panel", {
renderTo : 'divchart',
defaults : {
xtype : 'chart',
width : 400,
height : 50,
series : [ {
type : 'bar',
axis : 'bottom',
gutter : 0,
yField : [ 'range1', 'range2' ],
stacked : true
} ]
},
items : [ {
store : firstStore
}, {
store : secondStore,
}

]
});
}
</script>

</head>

<body onLoad="createPanel();">
<div id="divchart" style="width: 500px; height: 300px;"></div>
</body>

</html>

John O Donovan
10 Dec 2012, 2:32 AM
REQUIRED INFORMATION


Ext version tested:


Ext 4.1.3



Browser versions tested against:


____
IE9
FF17.0.1 (firebug 1.11 installed)




DOCTYPE tested against:


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"



Description:


Bar series charts with the same total values are appearing as different lengths. I would hvae expected a series chart with 45 and 55 series values to have the same length as a bar series chart with 70 and 30



Steps to reproduce the problem:


Run the code attached./LIST]

The result that was expected:

[LIST]
Two charts with the same length



The result that occurs instead:


Each bar chart has a different length.



Test Case:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="ext-all.css" />
<script type="text/javascript" src="ext-all.js"></script>

<script>

function createPanel() {
var data1 = {};
data1.range1 = 20;
data1.range2 = 80;

var data2 = {};
data2.range1 = 50;
data2.range2 = 50;

var firstStore = new Ext.data.JsonStore({
fields : [ 'range1', 'range2' ],
data : data1
});

var secondStore = new Ext.data.JsonStore({
fields : [ 'range1', 'range2' ],
data : data2
});

Ext.create("Ext.panel.Panel", {
renderTo : 'divchart',
defaults : {
xtype : 'chart',
width : 400,
height : 50,
series : [ {
type : 'bar',
axis : 'bottom',
gutter : 0,
yField : [ 'range1', 'range2' ],
stacked : true
} ]
},
items : [ {
store : firstStore
}, {
store : secondStore,
}

]
});
}
</script>

</head>

<body onLoad="createPanel();">
<div id="divchart" style="width: 500px; height: 300px;"></div>
</body>

</html>







HELPFUL INFORMATION


Screenshot or Video:


attached



See this URL for live test case: http://


Debugging already done:


none



Possible fix:


not provided



Additional CSS used:


only default ext-all.css
custom css (include details)



Operating System:


________
WinXP Pro

John O Donovan
11 Dec 2012, 4:31 AM
no one is reading this so I'm going to create a new thread