simplechart.js revision 4ea8aca4200c515337ce5b76a879cea312a18851
/**
* Create data visualizations with line graphs, histograms, and other methods.
* @module chart
*
* Note: SimpleChart is a temporary class that has been created for the purposes of observing and testing the current state of the underlying flash chart rendering engine. This file
* will be replaced in future iterations and its api will vary significantly.
*/
/**
* SimpleChart creates a basic line chart. SimpleChart uses the existing chart classes to allow for easy creation of a chart.
* @module chart
* @title SimpleChart
* @namespace YAHOO.widget
*/
/**
* Creates the Chart instance that includes an x-axis, y-axis and graph.
*
* @class SimpleChart
* @extends Y.Event.Target
* @constructor
* @param {String|HTMLElement} id The id of the element, or the element itself that the Chart will be placed into.
* The width and height of the Chart will be set to the width and height of this container element.
* @param {String} charttype The type of chart to render. Defaults to "line".
* @param {Object} optional hash of properties and styles.
*/
function SimpleChart (p_oElement /*:String*/, charttype /*:String*/, config /*:Object*/)
{
if(charttype)
{
this._type = charttype;
}
this._parseConfig(config);
this._chartConfig.parent = p_oElement;
this.app = new Y.SWFApplication(this._chartConfig);
this.chart = new Y.BorderContainer({parent:this.app, styles:this._chartstyles});
this.app.addItem(this.chart);
this.xaxis = new Y.Axis({parent:this.app, axisType:this._xAxisProps.type, styles:this._xaxisstyles});
this.yaxis = new Y.Axis({parent:this.app, axisType:this._yAxisProps.type, styles:this._yaxisstyles});
this.data = {};
this.graph = null;
}
Y.extend(SimpleChart, Y.EventTarget,
{
/**
* Graph type
*/
_type:"line",
/**
* Axis type for x axis
*/
_xAxisProps:{
type:"Category",
key:"item"
},
/**
* Axis type for y axis
*/
_yAxisProps:{
type:"Numeric",
key:"value"
},
setData: function(data /*:Object*/, xkey /*:String*/, ykey /*:String*/)
{
this.data = data;
var chart = this.chart, app = this.app, xaxis = this.xaxis, yaxis = this.yaxis, graph = this.graph, styles = this._graphstyles;
app.set("dataProvider", data);
xaxis.addKey(this._xAxisProps.key);
yaxis.addKey(this._yAxisProps.key);
if (this._type == "line")
{
graph = new Y.Graph({parent:chart, seriesCollection:[{type:this._type, xAxisData:xaxis, yAxisData:yaxis, xKey:xkey, yKey:ykey, styles:styles}]});
}
chart.addBottomItem(xaxis);
chart.addLeftItem(yaxis);
chart.addCenterItem(graph);
},
_chartstyles:{
padding:{
left:20, top:20, bottom:20, right:20
}
},
_appstyles:{
background:{
fillColor:0xDEE2FF,
borderColor:0xDEE2FF
}
},
_xaxisstyles:{
majorTicks:{color:0x000000},
line:{color:0x000000},
label:{
fontName:"Georgia",
fontSize:12,
color:0x000000,
margin:{top:3}
}
},
_yaxisstyles:{
majorTicks:{color:0x663333},
line:{color:0x663333},
label:{
fontName:"Georgia",
fontSize:12,
color:0x000000,
margin:{right:3}
}
},
_graphstyles:{
color:0x000000,
alpha:1,
weight:"2",
marker:{
fillColor:0x000000
}
},
_parseConfig: function(config)
{
var styles, props;
if(config)
{
if(config.hasOwnProperty("swfurl"))
{
this._chartConfig.swfurl = config.swfurl;
}
if(config.hasOwnProperty("xaxisprops"))
{
props = config.xaxisprops;
if(props.hasOwnProperty("type"))
{
this._xAxisProps.type = props.type;
}
if(props.hasOwnProperty("key"))
{
this._xAxisProps.key = props.key;
}
}
if(config.hasOwnProperty("yaxisprops"))
{
props = config.yaxisprops;
if(props.hasOwnProperty("type"))
{
this._yAxisProps.type = props.type;
}
if(props.hasOwnProperty("key"))
{
this._yAxisProps.key = props.key;
}
}
if(config.hasOwnProperty("autoRender"))
{
this._chartConfig.autoRender = config.autoRender;
}
if(this._yAxisProps.type == "Category")
{
this._yaxisstyles.padding = {top:50, bottom:50};
this._graphstyles.padding = {top:50, bottom:50};
}
if(this._xAxisProps.type == "Category")
{
this._xaxisstyles.padding = {left:50, right:50};
this._graphstyles.padding = {left:50, right:50};
}
if(config.hasOwnProperty("styles"))
{
styles = config.styles;
if(styles.hasOwnProperty("chart"))
{
this._chartstyles = this._parseStyles(this._chartstyles, styles.chart);
}
if(styles.hasOwnProperty("background"))
{
this._appstyles.background = this._parseStyles(this._appstyles.background, styles.background);
}
if(styles.hasOwnProperty("xaxisstyles"))
{
this._xaxisstyles = this._parseStyles(this._xaxisstyles, styles.xaxisstyles);
}
if(styles.hasOwnProperty("yaxisstyles"))
{
this._yaxisstyles = this._parseStyles(this._yaxisstyles, styles.yaxisstyles);
}
if(styles.hasOwnProperty("graphstyles"))
{
this._graphstyles = this._parseStyles(this._graphstyles, styles.graphstyles);
}
}
}
else
{
if(this._yAxisProps.type == "Category")
{
this._yaxisstyles.padding = {top:50, bottom:50};
this._graphstyles.padding = {top:50, bottom:50};
}
if(this._xAxisProps.type == "Category")
{
this._xaxisstyles.padding = {left:50, right:50};
this._graphstyles.padding = {left:50, right:50};
}
}
this._chartConfig.styles = this._appstyles;
},
_chartConfig:{},
_parseStyles:function(defaultStyles, configStyles)
{
var i;
if(!defaultStyles)
{
return configStyles;
}
for(i in configStyles)
{
if(configStyles.hasOwnProperty(i))
{
if(defaultStyles.hasOwnProperty(i) && Y.Lang.isObject(defaultStyles[i]))
{
defaultStyles[i] = this._parseStyles(defaultStyles[i], configStyles[i]);
}
else
{
defaultStyles[i] = configStyles[i];
}
}
}
return defaultStyles;
}
});
Y.SimpleChart = SimpleChart;