Hi,
I'm trying to draw a line on a chart with an x axis of date values. But, it appears that getXCoord() isn't working correctly when passed a date property.
You can see an example here:
http://www.smartclient.com/docs/9.1/a/system/reference/SmartClient_Explorer.html#stockPriceCharting
You can see in chartBackGroundDrawn I am trying to get the x coordinate of a few date items from the chart data but getXCoord() is returning null.
What am I doing wrong? Here is the code I am using...
I'm trying to draw a line on a chart with an x axis of date values. But, it appears that getXCoord() isn't working correctly when passed a date property.
You can see an example here:
http://www.smartclient.com/docs/9.1/a/system/reference/SmartClient_Explorer.html#stockPriceCharting
You can see in chartBackGroundDrawn I am trying to get the x coordinate of a few date items from the chart data but getXCoord() is returning null.
What am I doing wrong? Here is the code I am using...
Code:
var stockChart = isc.FacetChart.create({
ID: "stockChart",
autoDraw: false,
showTitle: false,
showDataAxisLabel: false,
canZoom: true,
chartType: "Line",
facets: [{ id: "date", title: "Day" }],
valueProperty: "close",
labelCollapseMode: "time",
minLabelGap: 4,
rotateLabels: "never",
_loadingMessage: "Loading data ...",
_errorMessage: "This test uses sample data provided by Yahoo™ Finance, " +
"but Yahoo data is not currently available. Refresh the sample to " +
"try again. You may need to wait a while for the Yahoo service to " +
"become available again.",
_showMessage : function (message, alignCenter) {
var label = this._label;
if (label == null) {
label = this._label = isc.Label.create({
autoDraw: false,
contents: "",
valign: "center",
wrap: true,
showEdges: false
});
stockChart.addChild(label);
}
label.setContents(message);
var alignment = (alignCenter ? "center" : "left");
label.setAlign(alignment);
var widthRatio = 0.6, heightRatio = 0.6;
var width = this.getWidth(), height = this.getHeight();
label.setTop(Math.round((1 - heightRatio) / 2 * height));
label.setLeft(Math.round((1 - widthRatio) / 2 * width));
label.setHeight(Math.round(heightRatio * height));
label.setWidth(Math.round(widthRatio * width));
label.show();
},
_hideMessage : function () {
if (this._label != null) {
this._label.hide();
}
},
_updateData : function (symbol, name) {
// Clear the chart and display a loading message.
this.destroyItems();
this._showMessage(this._loadingMessage, true);
var _this = this,
stockDs = isc.DataSource.get("stockData");
stockDs.fetchData({ symbol: symbol }, function (dsResponse, data) {
if (isc.isAn.Array(data) && data.length > 0) {
_this._hideMessage();
_this.setProperty("title", name);
_this.setData(data.sortByProperty("date", Date.compareDates));
} else {
_this._showMessage(_this._errorMessage, false);
_this.setData([]);
}
});
},
chartBackgroundDrawn : function() {
var startX = this.getXCoord(this.data[100].date)
var stopX = this.getXCoord(this.data[150].date)
isc.DrawLine.create({
drawPane: this,
startPoint: [startX,100],
endPoint : [stopX, 400],
autoDraw: true
}, {
lineWidth: 10,
lineColor: "blue",
linePattern: "solid"
});
}
});
var symbolForm = isc.DynamicForm.create({
items: [{
name: "symbol",
title: "Stock Symbol",
editorType: "comboBox",
autoFetchData: true,
optionDataSource: "nasdaqSymbols",
pickListWidth: 450,
pickListFields: [{ name: "symbol"}, { name: "name" }],
displayField: "name",
valueField: "symbol",
sortField: "symbol",
changeOnKeypress: false,
changed : "stockChart._updateData(value, item.getDisplayValue(value))",
defaultToFirstOption: true,
clearValue : function () {
this.Super("clearValue", arguments);
stockChart._updateData(this.getValue(), this.getDisplayValue());
}
}]
});
isc.VLayout.create({
width: "100%",
height: "100%",
margin: 5,
membersMargin: 20,
members: [symbolForm, stockChart]
});