Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Problem with getting x coordinate of date field on chart

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

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

    #2
    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
    }

    Comment


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

      Comment


        #4
        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:

        Code:
            this.getXCoord(this.data[100].date)
        use:

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

        Comment


          #5
          Thank you. Works great.

          Comment

          Working...
          X