ScatterCharts and Threshold Marker

[Arshia]

Hi Fellaz,
As always a newbie here and I'm wondering what has happened to the markers(as what it was called in deprecated imagecharts). I'm trying to create a scatter chart with a threshold but can't find a solution yet. I tried the combo charts but there is only line, bar and area combination available so far.
I appreciate if you can think of any solution.
Cheers,
Arshia

[asgallant]

I'm not familiar with a 'threshold marker' - describe what it is you are looking for, and I'll see if I can come up with something to do that in the Viz API.

[Arshia]

Heyo asgallant,

Well, I have to confess that writing the question, was half way to my solution. I kinda developed my answer right after I post this.
Threshold Description: A Horizontal or Vertical line parallel (or non) to X or Y Axis that shows the Average figure. So here when talking based on scatter charts, it means a crossing that shows the average of X figures and Y figures.

[Arshia]

Aha, I forgot the half way solution:

So if I do a For-Loop code in my DATATABLE , Then I can create those lines, but Still have to calculate the X and Y of average. In this case I don't need to approach "Combo Charts" (Which still doesn't support scatter), yet have to manually calculate the Average X and Y and pass it to my array table.

I appreciate if you can share your thoughts with me.

-Arshia

[asgallant]

If you calculate your thresholds, you can add them to the scatter chart by adding two more series to your DataTable, something like this:

​var data =  new google.visualization.DataTable();

data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addColumn('number', 'Avg X');
data.addColumn('number', 'Avg Y');

/* populate X,Y data
 *
 *
​ */​

// calculate average, max, and min of X and Y
var avg = google.visualization.data.group(data, [], [{
    column: 0,
    type: number,
    aggregation: google.visualization.data.average
}, {
    column: 0,
    type: number,
    aggregation: google.visualization.data.max
}, {
    column: 0,
    type: number,
    aggregation: google.visualization.data.min
}, {
    column: 1,
    type: number,
    aggregation: google.visualization.data.average
}, {
    column: 1,
    type: number,
    aggregation: google.visualization.data.max
}, {
    column: 1,
    type: number,
    aggregation: google.visualization.data.min
}]);

data.addRows([
    [avg.getValue(0, 0), null, avg.getValue(0, 4), null],
    [avg.getValue(0, 0), null, avg.getValue(0, 5), null],
    [avg.getValue(0, 1), null, null, avg.getValue(0, 3)],
    [avg.getValue(0, 2), null, null, avg.getValue(0, 3)],
]);

var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, {
    series: {
        1: {
            lineWidth: 1,
            pointSize: 1
        },
        2: {
            lineWidth: 1,
            pointSize: 1
        }
    }
}​​​​); 

I haven't tested it, so you're probably going to have to play with it some.  I suspect that the #group call might throw an error for not passing it a key column, and I may have messed up the placement of data in the array (I'm feeling a tad bit dyslexic at the moment), but the basic idea is what you need.

[Arshia]

Brilliant idea mate, I'm going to give it a shot as soon as I find a sec free. My only concern is, using viz.scatterchart lib parrently doesn't like the linewidth option.

[asgallant]

The lineWidth option works just fine in ScatterCharts, just make sure you use that name exactly: options are caSe SensITiVe.