Ext JS Charts: Second Y Axis Scale

[AMACK]

Hi,

Some help on this would be greatly appreciated. If its just not possible, please let me know.

I am creating a chart. The data is introduced in a store: there is a year (used for the x axis), a sales number in USD and a % margin for plotting on the y axis. Problem is that they dont share the same scale - the sales figures are 0-4000 and the margin is obviosly 0-100.

I need a separate axis on the right hand side to show the % margin. I appreciate that documentation is pretty thin on the ground for Ext JS 3.0, but if anybody has done something like this already please can you pass it on.

Many thanks in advance.

[allfab]

Hello,

I also try to do this but I can't find how !

If someone with an idea!

Thx;)

[rlegend]

You might want to take a look at this example from the YUI Charts documentation.

http://developer.yahoo.com/yui/examples/charts/charts-dualaxes.html

[canxss]

Did anyone found a solution to this? I've tried to implement the 2 axis example from YUI charts, but the chart wasn't rendered. I don't think yAxes property (array of yAxis's) is supported in Ext JS. Or is there another way to specify it in Ext?

This is an essential future in charts where you want to analyze multiple series with distinct range of values. I hope we can have it.

[rlegend]

Can you post a standalone example of what you have tried so far. I definitely think it's do-able I just don't have the time to mess with it right now.

[canxss]

Thanks for the reply, here is the example that I've tried:



Ext.onReady(function(){
var store = new Ext.data.JsonStore({
fields: ['month', 'rent', 'car', 'power', 'cable'],
data: [
{ month: "January", rent: 3880.00, car: 298.68, power:56.98, cable:115.50 },
{ month: "February", rent: 3880.00, car: 298.68, power:68.99, cable:115.42 },
{ month: "March", rent: 3880.00, car: 298.68, power:46.85, cable:123.76 },
{ month: "April", rent: 3880.00, car: 315.71, power:42.52, cable:105.44 },
{ month: "May", rent: 4010.00, car: 315.71, power:59.67, cable:111.42 },
{ month: "June", rent: 4910.00, car: 315.71, power:68.98, cable:114.32 }
]
});

// Create the Numeric Axes
var currencyAxis = new Ext.chart.NumericAxis();
//currencyAxis.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
currencyAxis.alwaysShowZero = false;
currencyAxis.calculateByLabelSize = true;
currencyAxis.position = "right";
currencyAxis.title = "Utilities";

var currencyAxis2 = new Ext.chart.NumericAxis();
currencyAxis2.order = "secondary";
currencyAxis2.position = "left";
currencyAxis2.title = "Rent";
//currencyAxis2.labelFunction = YAHOO.example.formatCurrencyAxisLabel;
currencyAxis2.alwaysShowZero = false;

//place the two axis in an array to be passed to the chart as configuration attribute
var axes = new Array();
axes.push(currencyAxis);
axes.push(currencyAxis2);

// Define a Series Definition
var seriesDef = [
{type: 'line', displayName: "Rent", yField: "rent", axis: "secondary", style: {color:0x6238A7, size:8}},
{type: 'line', displayName: "Car", yField: "car", axis: "primary", style: {color:0x00E72E, size:8}},
{type: 'line', displayName: "Power", yField: "power", axis: "primary", style: {color:0xFFA329, size:8}},
{type: 'line', displayName: "Cable", yField: "cable", axis: "primary", style: {color:0xFF4AD8, size:8}}
];

// Create the style definition for the chart.
var styleDef = {
padding:0,
border:{size:3, color:0x8899dd},
background:{color:0xaeb7dc},
dataTip:{font:{color:"#000000"}, background:{color:0x00E72E, alpha:.3}},
font:{color: "#eeeeee"},
yAxis:
{
labelDistance:0,
titleRotation:-90,
titleFont:{color:0xeeeeee},
minorTicks:{display:"none"},
majorGridLines:{color:0xeeeeee},
color:0xeeeeee,
majorTicks:{color:0xeeeeee}
},
secondaryYAxis:
{
titleRotation:90
},
xAxis:
{
majorTicks:{display:"none"},
labelRotation:-90,
size:0
}
};

new Ext.Panel({
width: 400,
height: 400,
title: 'Chart with 2 Numeric Axes',
renderTo: 'container',
items: {
xtype: 'linechart',
store: store,
series: seriesDef,
xField: "month",
yAxes: axes,
//yAxis: currencyAxis2,
chartStyle: styleDef
}
});
});


But I've checked out the code of Chart.js and there is neither a property for yAxes nor a setter, which does exist in YUI API.

[rlegend]

I played with this quite a bit today with no luck. I tried upgrading to the latest version(2.8) of YUI Charts but I couldn't get it playing nice with ExtJS.

[canxss]

Since the capabilities of Ext.charts while using YUI charts 2.7.0 aren't sufficient for us, I've dug deeper in order to upgrade to YUI Charts 2.8.0r4. And as much as I've seen it's working pretty well.

While upgrading it's not just enough to update the charts.swf file. Because two small changes are made in charts.swf file that needs us to make changes in Ext.FlashComponent.

Below is the all of the overrides that I've done for the upgrade. Put them in your overrides.js file and also override the charts.swf file (under the resources folder) with the new one that is attached:



Ext.override(Ext.FlashComponent, {

/* changes are done in order to be able to use YUI Library - Charts 2.8.0
* The following changes have been made to the charts.swf. (This will not impact the behavior or API of the Charts Control)
- The flashvar elementID has changed to YUISwfId
- The flashvar eventHandler has changed to YUIBridgeCallback
*/
flashVersion : '9.0.45',

onRender : function(){
Ext.FlashComponent.superclass.onRender.apply(this, arguments);

var params = Ext.apply({
allowScriptAccess: 'always',
bgcolor: this.backgroundColor,
wmode: this.wmode
}, this.flashParams),
vars = Ext.apply({
allowedDomain: document.location.hostname,
YUISwfId: this.getId(),
YUIBridgeCallback: 'Ext.FlashEventProxy.onEvent'
}, this.flashVars);

new swfobject.embedSWF(this.url, this.id, this.swfWidth, this.swfHeight, this.flashVersion,
this.expressInstall ? Ext.FlashComponent.EXPRESS_INSTALL_URL : undefined, vars, params);

this.swf = Ext.getDom(this.id);
this.el = Ext.get(this.swf);
}
});

Ext.override(Ext.chart.CartesianChart, {
onSwfReady : function(isReset){
Ext.chart.CartesianChart.superclass.onSwfReady.call(this, isReset);

if(this.xField){
this.setXField(this.xField);
}
if(this.yField){
this.setYField(this.yField);
}
if(this.xAxis){
this.setXAxis(this.xAxis);
}
if(this.yAxis){
this.setYAxis(this.yAxis);
}
if(this.yAxes){
this.setYAxes(this.yAxes);
}
if (this.constrainViewport !== undefined) {
this.setConstrainViewport(this.constrainViewport);
}
},

setYAxes : function(value){
for(var i = 0; i < value.length; i++) {
var axis = this.createAxis('yAxis' + i, value[i]);
this.swf.setVerticalAxis(axis);
}
},

setConstrainViewport: function(value) {
this.swf.setConstrainViewport(value);
}
});


Ext.override(Ext.chart.Axis, {
/**
* The space, in pixels, between labels on an axis.
*
* @property labelSpacing
* @type Number
*/
labelSpacing: 2,

/**
* The text that will appear next to the axis to indicate information about the data that it displays.
*
* @property title
* @type String
*/
title: null
});

Ext.override(Ext.chart.NumericAxis, {
/**
* Indicates whether to round the major unit.
*
* @property roundMajorUnit
* @type Boolean
*/
roundMajorUnit: true,

/**
* Indicates whether to factor in the size of the labels when calculating a major unit.
*
* @property calculateByLabelSize
* @type Boolean
*/
calculateByLabelSize: true,

/**
* Indicates the position of the axis relative to the chart
*
* @property position
* @type String
*/
position:"left",

/**
* Indicates whether to extend maximum beyond data's maximum to the nearest
* majorUnit.
*
* @property adjustMaximumByMajorUnit
* @type Boolean
*/
adjustMaximumByMajorUnit:true,

/**
* Indicates whether to extend the minimum beyond data's minimum to the nearest
* majorUnit.
*
* @property adjustMinimumByMajorUnit
* @type Boolean
*/
adjustMinimumByMajorUnit:true
});

Ext.override(Ext.chart.TimeAxis, {
/**
* Series that are stackable will only stack when this value is set to true.
*
* @property stackingEnabled
* @type Boolean
*/
stackingEnabled: false,

/**
* Indicates whether to factor in the size of the labels when calculating a major unit.
*
* @property calculateByLabelSize
* @type Boolean
*/
calculateByLabelSize: true
});

Ext.override(Ext.chart.CategoryAxis, {
/**
* Indicates whether or not to calculate the number of categories (ticks and labels)
* when there is not enough room to display all labels on the axis. If set to true, the axis
* will determine the number of categories to plot. If not, all categories will be plotted.
*
* @property calculateCategoryCount
* @type Boolean
*/
calculateCategoryCount: false
});

Ext.override(Ext.chart.CartesianSeries, {
/**
* Indicates which axis the series will bind to
*
* @property axis
* @type String
*/
axis: "primary",

/**
* When a Legend is present, indicates whether the series will show in the legend.
*
* @property showInLegend
* @type Boolean
*/
showInLegend: true
});


The changes that are in red color are the ones that are mandatory for upgrade and the ones that I've observed the new abilities with. The rest are new default configuration options that I've seen missing in corresponding ExtJS classes while existing in YUI charts.

And also here is the release notes for YUI Charts for 2.8.0:
* Add ability to show/hide series
* Add ability to style series by index
* Add ability to export chart as jpg or png (fp 10+)
* Add ability for displaying 2 Numeric Axes on the same chart
* Add ability to allow markers to extend beyond viewport
* Add font styling to chart title
* Add ability to set dataTip function on a series level
* Add ability to set scope for label formatting functions
* Add ability to filter series from legend
* Add ability to format legend labels
* Enhanced legend so that items wrap when there are too many for one row/column
* Add ability to specify different shaped line series markers
* Fixed bug in which setting the size style of xAxis and yAxis to "0" still showed a line
* Fixed Bug in which TimeAxis labels overlap when max/min dates are set
* Fixed bug in which stacked bar and column charts widths were incorrectly calculated
* Fixed bug in which chart font colors only accepted hex values. Now they can accept hex strings as well.
* Fixed bug in which small numbers were not calculated correctly.
* Fixed bug in which big numbers were not rounded properly
* Fixed bug in which stacked bar and column charts do not display properly when both negative and positive values are present
* Fixed bug in which line chart area fills were not calculated correctly when there are both positive and negative values and a maximum or minimum of have been set
* The following changes have been made to the charts.swf. (This will not impact the behavior or API of the Charts Control)
- The flashvar elementID has changed to YUISwfId
- The flashvar eventHandler has changed to YUIBridgeCallback

I'm not sure if these are all the changes that is needed but so far I've got what I needed: charts with dual axes :)

I hope this helps others in need of new abilities of YUI Charts.

[rlegend]

Nice work :D

[stetou]

Can't unzipped the file, winzip, winrar and power archiver say it is corrupted.
What tool do you use?
thanks
steve

[canxss]

WinRAR 3.71

[rlegend]

There is a problem when using Internet Explorer and trying to download attachments from this forum. Try using another web browser. Alternatively, you can download the YUI library directly from Yahoo here (http://developer.yahoo.com/yui/download/).

If you download the library from Yahoo the charts.swf is located at
"yui_root"\build\charts\assets\

[tobiu]

thanks canxss,

lets hope it will make its way to svn.

kind regards,
tobiu

[meroy]

@canxss thanks for sharing this. Today, I decided to build ext including your overrides. This is so cool. In the process, I've read in the source that caching is disabled for IE users -- bummer. It doesn't work if I enable it. However, if I go to Yahoo's example, that one seems to be caching.

[Slartibartfast]

Nice one +1

[hdPhoenix]

Thanks canxss, the latest yui functionality works great with your extension :)

[dillon]

I am unable to get canxss' example working with 3.1. Has anyone else been successful getting 2 Y Axis' in 3.1?

[JOHNGUO2001]

Thanks:-? man!

[tolstoj]

Hi

If we now could get the labelFunction implemented all would be dandy ;)

Cheers

[Niugeo]

Hi all,
I'm an EXTjs beginner, but I need a second Y-Axis and I'm glad to see I'm not the only one. I've read all the thread, but I didn't understand what I'v to override and how.
I changed the old charts.swf with the new one that canxss linked before, but then?I understand I've to copy that piece of code and paste somewhere, right?
Some helps would be appreciate.
thanks you all!
Bye.

[DAddYE]

Can you take us your sources?