PDA

View Full Version : Issue with chart's lengend toggle function



kislay.kishore
22 Aug 2012, 5:06 AM
Hi,
I have a multi line chart, it has alomst 12 lines.
I am facing a wiered issue while using the toggle function of legends.

When I want to see only one line I toggle off rest of the lines.
Now, when a click on one of the legends to show only one line at a time, the nodes shows one data-point above.

For example, instead of showing 4 at 4, 4 shows up at 4.5 and so on.

The same issue doesnt appear, if there is a line already rendered with higher data points, lets say 5 or above.

I am using extjs4.1, build date: 2012-04-20.

Please let me know if this might be a bug (already reported) and already fixed, in the latest release? Or, any workaround available?

scottmartin
22 Aug 2012, 12:20 PM
Are you able to show this in our online examples, or provide a small test case so we can have a closer look? A screen would also be helpful.

Are you saying the scale is changing as well?

Scott.

kislay.kishore
23 Aug 2012, 1:28 AM
Hi Scott,

Thanks for your response!

The scale is not changing, only the data points changes. Please see the descrpency in the screenshot attached.

I tired to replicate this issue by modifying one of the line chart examples as well, and was able to replicate this issue. I am copying pasting the JS code and html code as below:




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Line Chart</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all.js"></script>


<script type="text/javascript">
Ext.require(['Ext.data.*']);
Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
Ext.onReady(function () {
var myStore= Ext.create('Ext.data.JsonStore', {
fields: [
{name: 'month', type:'string'},
{name: 'Q1', type:'int'},
{name: 'Q2', type:'int' },
{name: 'Q3', type:'int' },
{name: 'Q4', type:'int' }

],
data : [
{
"month": "Jan",
"Q1":0,
"Q2":5,
"Q3":0,
"Q4":2
},
{
"month": "Feb",
"Q1":3,
"Q2":3,
"Q3":2,
"Q4":0

},
{
"month": "Mar",
"Q1":0,
"Q2":0,
"Q3":3,
"Q4":2

} ]

});
var panelone = Ext.create('Ext.Panel', {
width: 500,
height: 400,
hidden: false,
// maximizable: true,
title: 'Report',
// renderTo: Ext.getBody(),
renderTo: 'renderGraph0',
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
myStore.loadData(myStore);
}
}],
items: {
xtype: 'chart',
style: 'background:#fff',
animate: true,
store: myStore,
shadow: true,
theme: 'Category1',
//theme: 'Red',
legend: {
position: 'bottom'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['Q1','Q2','Q3','Q4'],
title: 'Questions',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['month'],
title: 'Months'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'month',
yField: 'Q1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'fill': '#0000A0',
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
// smooth: true,
xField: 'month',
yField: 'Q2',
markerConfig: {
type: 'circle',
size: 6,
radius: 6,
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
// smooth: true,
xField: 'month',
yField: 'Q3',
markerConfig: {
type: 'circle',
size: 6,
radius: 6,
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
//smooth: true,
xField: 'month',
yField: 'Q4',
markerConfig: {
type: 'circle',
size: 6,
radius: 6,
'stroke-width': 0
}
}

]
}
});

});
</script>

</head>
<body id="docbody">
<h1>Line Chart Example</h1>
<div style="margin: 10px;">
<p>
Display 2 sets of random data in a line series. Reload data will randomly generate a new set of data in the store. Click on the legend items to remove them from the chart. <a href="Line.js">View Source</a>
<div id="renderGraph0" style="margin-bottom:15px"></div>
</p>
</div>
</body>
</html>

kislay.kishore
24 Aug 2012, 9:43 AM
Can anyone please take a look in this issue?

Thanks!

scottmartin
24 Aug 2012, 10:09 AM
Please upgrade to the latest version. I do not see this behavior in 4.1.1 (Jul '12)

Toggling Q2 returns it 3 (under red dot)

Scott.

kislay.kishore
24 Aug 2012, 11:18 AM
Ok! i will try that...but were u able to reproduce this issue with 4.1.x (lower version)?

scottmartin
24 Aug 2012, 11:58 AM
I was able to duplicate using 4.1.0.

Scott.

kislay.kishore
24 Aug 2012, 12:04 PM
ok..thanx....i will try with 4.1.1 and let u know.