Problem with getting x coordinate of date field on chart

[senordhuff]

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...

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]
});

[senordhuff]

I looked at the API for getXCoord() and saw that I should use a facetValueMap for a line chart. I tried this and it still didn't work?


var facetXCoordinateValueMap= {
facetId:'date', facetValueId:this.data[100].date
}

[senordhuff]

Hi, let me know when you are able to take a look at this? Hoping to wrap up some development work for a release to our production system by the end of the week.

[Isomorphic]

chartBackgroundDrawn is too early, you need to wait for chartDrawn() since you are looking for information about placement of data points.

As far as the correct FacetValueMap, instead of this:

    this.getXCoord(this.data[100].date)

use:

    this.getXCoord({date: this.data[100].date})

[senordhuff]

Thank you. Works great.