PDA

View Full Version : Bars in bar chart above X axis



georgewr3
8 Jun 2012, 11:17 AM
I'm rendering a simple vertical bar chart and the bars which should start at zero on the Y axis actually start a little above. Why?

See graphic.

mitchellsimoens
15 Jun 2012, 11:47 AM
Ext JS 3 or 4 so I can move it to the correct forum?

georgewr3
15 Jun 2012, 12:07 PM
ExtJS4, 3 didn't have native charts right?

mitchellsimoens
15 Jun 2012, 12:24 PM
ExtJS4, 3 didn't have native charts right?

Moved to Ext JS 4 Q&A forum.

Ext JS 3 charting package was basically adapters for the YUI charts.

scottmartin
15 Jun 2012, 7:16 PM
Can you verify the exact version of ExtJS 4 that you are using? Have you tried the latest release?
http://www.sencha.com/forum/showthread.php?219836-Ext-JS-4.1.1-RC2-Now-Available

If this does not correct the problem, please provide a test case that duplicates this problem.

Scott.

georgewr3
2 Jul 2012, 7:52 AM
Sorry for the slow response on this one but I managed to create a standalone example with pictures showing both 4.1.0 and 4.1.1-rc2. See 2 attached screen captures. Both show the bars not aligning with the vertical axis. 4.1.1-rc2 seems to have exposed another problem with the vertical lines and mystery values along the Y axis. I'm sure I'm doing something wrong but can't figure it out.



<!DOCTYPE html>
<html>
<head>
<title>ExtJS all in one HTML template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- extjs-4.1.0
<link rel="stylesheet" href="extjs-4.1.0/resources/css/ext-all.css" type="text/css">
<script type="text/javascript" src="extjs-4.1.0/ext-all-dev.js"></script>
-->

<!-- extjs-4.1.1-rc2 -->
<link rel="stylesheet" href="extjs-4.1.1-rc2/resources/css/ext-all.css" type="text/css">
<script type="text/javascript" src="extjs-4.1.1-rc2/ext-all-dev.js"></script>

<script type="text/javascript">

//----------- Start of Example -----------//
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);
var chart;
var store1 = Ext.create('Ext.data.JsonStore', {
fields: [
{name: 'name', type: 'string'},
{name: 'data1', type: 'int'}
],
data: [
{name: 'Zero', data1: 10},
{name: 'One', data1: 3},
{name: 'Two', data1: 2},
{name: 'Three', data1: 7},
{name: 'Four', data1: 4},
{name: 'Five', data1: 6},
{name: 'Six', data1: 5},
{name: 'Seven', data1: 1},
{name: 'Eight', data1: 11},
{name: 'Nine', data1: 7},
{name: 'Ten', data1: 12},
{name: 'Eleven', data1: 9},
{name: 'Twelve', data1: 8}
]
});

Ext.onReady(function () {
chart = Ext.create('Ext.chart.Chart', {
id: 'chartCmp',
xtype: 'chart',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
background: {
gradient: {
id: 'backgroundGradient',
angle: 45,
stops: {
0: {
color: '#ffffff'
},
100: {
color: '#eaf1f8'
}
}
}
},
series: [{
type: 'bar',
axis: 'bottom',
column: true,
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1'));
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data1'
}]
});
var win = Ext.create('Ext.Window', {
width: 1000,
height: 800,
hidden: false,
maximizable: true,
title: 'Bar Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}],
items: chart
});
});
//----------- End of Example -----------//

</script>
</head>
<body>
</body>
</html>

scottmartin
2 Jul 2012, 8:27 AM
You configuration of the chart was a little mixed up .. see if this is better:



var chart;
var store1 = Ext.create('Ext.data.JsonStore', {
fields: [
{name: 'name', type: 'string'},
{name: 'data1', type: 'int'}
],
data: [
{name: 'Zero', data1: 10},
{name: 'One', data1: 3},
{name: 'Two', data1: 2},
{name: 'Three', data1: 7},
{name: 'Four', data1: 4},
{name: 'Five', data1: 6},
{name: 'Six', data1: 5},
{name: 'Seven', data1: 1},
{name: 'Eight', data1: 11},
{name: 'Nine', data1: 7},
{name: 'Ten', data1: 12},
{name: 'Eleven', data1: 9},
{name: 'Twelve', data1: 8}
]
});

Ext.onReady(function () {
chart = Ext.create('Ext.chart.Chart', {
//id: 'chartCmp', // do not use id's
xtype: 'chart',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left', // user: bottom
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom', // user-left
fields: ['name'],
title: 'Month of the Year'
}],
/*
background: {
gradient: {
id: 'backgroundGradient',
angle: 45,
stops: {
0: {
color: '#ffffff'
},
100: {
color: '#eaf1f8'
}
}
}
},
*/
series: [{
type: 'column', // user: bar
axis: 'left', // user: bottom
// column: true,
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1'));
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data1'
}]
});

var win = Ext.create('Ext.Window', {
width: 1000,
height: 800,
hidden: false,
maximizable: true,
title: 'Bar Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
store1.loadData(generateData());
}
}],
items: chart
});
});


Scott.

georgewr3
2 Jul 2012, 10:11 AM
Thanks for responding. That is exactly what I was looking for.

Thank you.