Drawing trendline on a scatter graph

[senordhuff]

Hi,

We are trying to draw a trendline on a scatter graph using this example:

http://www.smartclient.com/docs/8.3/a/system/reference/SmartClient_Explorer.html#scatterPlotCharting

Here is the code I'm using so far. I can't figure out how we are supposed to control the x coordinate of the startPoint and endPoint though. And, your feature explorer example only gives a basic example of using this.getChartLeft() and (this.getChartLeft() + this.getChartWidth())?

isc.FacetChart.create({
    ID: "multiScatterChart",
    title:"Multi Scatter",
    chartType: "Scatter",
    width:700,
    showScatterDataLabels:true,

    chartBackgroundDrawn : function() {

        var values = this.getFacetData().getProperty(["value"]);
        var sum = 0;

        for(var i = 0, l = values.length;i < l;i++) {
		    sum = sum + parseFloat(values[i]);
        }
        

       // beginLineX = this.getXCoord(1);
       //endLineX = this.getXCoord(7);
     
        beginLineY = this.getYCoord(0.2);
        endLineY = this.getYCoord(1.2);


        isc.DrawLine.create({
            drawPane: this,
            startPoint: [this.getChartLeft() , beginLineY ],
            endPoint : [this.getChartLeft() + this.getChartWidth(), endLineY ],
            autoDraw: true
        }, {
            lineWidth: 4,
            lineColor: "red",
            linePattern: "dash"
        });
    },

    valueProperty:"value",
    facets: [
       { id:"metric",
         inlinedValues:true,
         values:[{id:"value"}, {id:"Time"}]
       },
       { id:"animal" }
    ],
    data: [
       {
           "Time":0.033,
           "value":0.02
           ,animal:"Moose"
       },
       {
           "Time":0.083,
           "value":0.15
           ,animal:"Moose"
       },
       {
           "Time":0.25,
           "value":0.77
           ,animal:"Moose"
       },
       {
           "Time":0.5,
           "value":0.87
           ,animal:"Moose"
       },
       {
           "Time":1,
           "value":1.15
           ,animal:"Moose"
       },
       {
           "Time":2,
           "value":1.15
           ,animal:"Moose"
       },
       {
           "Time":4,
           "value":0.71
           ,animal:"Moose"
       },
       {
           "Time":5,
           "value":0.67
           ,animal:"Moose"
       },
       {
           "Time":6,
           "value":0.61
           ,animal:"Moose"
       },
       {
           "Time":7,
           "value":0.41
           ,animal:"Moose"
       },
       {
           "Time":8,
           "value":0.22
           ,animal:"Moose"
       },
       {
           "Time":0.033,
           "value":0.02
           ,animal:"Platypus"
       },
       {
           "Time":0.083,
           "value":0.28
           ,animal:"Platypus"
       },
       {
           "Time":0.25,
           "value":0.71
           ,animal:"Platypus"
       },
       {
           "Time":0.5,
           "value":0.81
           ,animal:"Platypus"
       },
       {
           "Time":1,
           "value":1.06
           ,animal:"Platypus"
       },
       {
           "Time":2,
           "value":1.06
           ,animal:"Platypus"
       },
       {
           "Time":4,
           "value":0.52
           ,animal:"Platypus"
       },
       {
           "Time":8,
           "value":0.10
           ,animal:"Platypus"
       }
    ]
});

[Isomorphic]

This draws a line as expected, from the left side of the chart rect to the right. You are already successfully providing x and y coordinates. What is the issue?

[senordhuff]

We want to be able to control the startX and the endX. We don't always want them to go from left border to right border. I'm attaching the sample we sent you when we first discussed the feature sponsorship showing this. Is this additional functionality that needs to be built into the product? If so, we'll need to talk about an estimate to get that done so please contact me off list.

[Isomorphic]

If you want to start the line at the first point, just use getXCoord() to discover where it's drawn. There's also getNearestDrawnValue().

[senordhuff]

We are running a method called "linear least square" to generate the line coordinates. Here is an example: http://dracoblue.net/dev/linear-least-squares-in-javascript/159/


It dynamically generates an x value that is meant to act as the start point and dynamically generates an x value that is meant to act as the end point. So, we need to be able to have control over the x coordinate just like we have control over the y coordinate.

[Isomorphic]

Something not getting across here.. you realize that getChartLeft() is returning a number which is a coordinate right? So if you add 5 to that, your line will start 5 pixels to the right.

So you already have control over the X coordinate, and the chart seems to have APIs that give you everything you could conceivably need to know about where points have been rendered, where the boundaries of the chart are, etc.

[senordhuff]

Ok, can you show me with the example I posted how we can make the trendline start at x coordinate associated with an x value of 1.5 and stop at x coordinate associated with a value of 5.5 as an example.

If you can show me how to do that, we are good. I couldn't figure that out and that is why I asked the question.

[Isomorphic]

This could be off in details, but here's the general idea:

            startPoint: [this.getChartLeft() + this.getXCoord(1.5), beginLineY ],
            endPoint : [this.getChartLeft() + this.getXCoord(5.5), endLineY ],

[senordhuff]

That looks promising. But, when I try it in the example, it doesn't work and no trendline shows up. Can you help figure out what is wrong?


http://www.smartclient.com/docs/8.3/a/system/reference/SmartClient_Explorer.html#scatterPlotCharting

isc.FacetChart.create({
    ID: "multiScatterChart",
    title:"Multi Scatter",
    chartType: "Scatter",
    width:700,
    showScatterDataLabels:true,

    chartBackgroundDrawn : function() {

        var values = this.getFacetData().getProperty(["value"]);
        var sum = 0;

        for(var i = 0, l = values.length;i < l;i++) {
		    sum = sum + parseFloat(values[i]);
        }
        

       beginLineX = this.getChartLeft() + this.getXCoord(1.5);
       endLineX =  this.getChartLeft() + this.getXCoord(7);

     
        beginLineY = this.getYCoord(0.2);
        endLineY = this.getYCoord(1.2);


        isc.DrawLine.create({
            drawPane: this,
  startPoint: [beginLineX, beginLineY ],
            endPoint : [endLineX, endLineY ],           
 autoDraw: true
        }, {
            lineWidth: 4,
            lineColor: "red",
            linePattern: "dash"
        });
    },

    valueProperty:"value",
    facets: [
       { id:"metric",
         inlinedValues:true,
         values:[{id:"value"}, {id:"Time"}]
       },
       { id:"animal" }
    ],
    data: [
       {
           "Time":0.033,
           "value":0.02
           ,animal:"Moose"
       },
       {
           "Time":0.083,
           "value":0.15
           ,animal:"Moose"
       },
       {
           "Time":0.25,
           "value":0.77
           ,animal:"Moose"
       },
       {
           "Time":0.5,
           "value":0.87
           ,animal:"Moose"
       },
       {
           "Time":1,
           "value":1.15
           ,animal:"Moose"
       },
       {
           "Time":2,
           "value":1.15
           ,animal:"Moose"
       },
       {
           "Time":4,
           "value":0.71
           ,animal:"Moose"
       },
       {
           "Time":5,
           "value":0.67
           ,animal:"Moose"
       },
       {
           "Time":6,
           "value":0.61
           ,animal:"Moose"
       },
       {
           "Time":7,
           "value":0.41
           ,animal:"Moose"
       },
       {
           "Time":8,
           "value":0.22
           ,animal:"Moose"
       },
       {
           "Time":0.033,
           "value":0.02
           ,animal:"Platypus"
       },
       {
           "Time":0.083,
           "value":0.28
           ,animal:"Platypus"
       },
       {
           "Time":0.25,
           "value":0.71
           ,animal:"Platypus"
       },
       {
           "Time":0.5,
           "value":0.81
           ,animal:"Platypus"
       },
       {
           "Time":1,
           "value":1.06
           ,animal:"Platypus"
       },
       {
           "Time":2,
           "value":1.06
           ,animal:"Platypus"
       },
       {
           "Time":4,
           "value":0.52
           ,animal:"Platypus"
       },
       {
           "Time":8,
           "value":0.10
           ,animal:"Platypus"
       }
    ]
});

[Isomorphic]

The code should really be:

       beginLineX = this.getXCoord(1.5) - this.getChartLeft();
       endLineX =  this.getXCoord(7) - this.getChartLeft();

Because the XCoord includes chart left. However, this works in 4.0, but doesn't work in 3.1 specifically for Scatter plots. We'll get that fixed.

[senordhuff]

Ok, we use SmartClient and not SmartGWT. So, does this need to be fixed in the latest 8.3 nightlies before we can try it there?

[Isomorphic]

Sorry, corresponding versions are 3.1 -> 8.3, 4.0 -> 9.0. So yes, this needs to be fixed in 8.3p nightlies.

[Isomorphic]

Correction: you do not need to wait for a new nightly, getXCoord() has been working in 8.3 since the Dec 8th build. It's just the public Showcase where this API would not work as expected.

[senordhuff]

Looks better thanks. Looks like you do not subtract getChartLeft() from getXCoord though?

[Isomorphic]

Right, no need to subtract. That was something that seemed to be needed when were looking at the version that still had a bug in getXCoord().