ChartRangeFilter and distribution of data

[Bassa Safa]

Hi,

I would like to make a chartRangeFilter which depicts the distribution
of the data... such as Google finance does at http://www.google.com/finance#stockscreener.

I've tried a couple of hours but I dont seem to understand "chartview"
in "ControlWrapper". The documentation of how you can use "chartview"
is incomprehensible... at least for me. =)

'chartView': {
'columns': [
10,

{ 'calc': function(dataTable, rowIndex) {
return dataTable.getValue(rowIndex, 10);
},
'type': 'number'
}]


Anyone know how to depict the distribution like Google Finance?

best regards
bassa

[asgallant]

Basically, you use this to tell the control what to draw in the range filter control.  The columns property takes an array of column indices or objects describing calculated columns (as per the DataView#setColumns method: http://code.google.com/apis/chart/interactive/docs/reference.html#DataView_setColumns).  In the example code you posted, it would attempt to draw a chart with the data from column 10 as the first (domain) column and (via a calculated column) the second column as well (equivalent to having "columns: [10, 10]").

What do you mean when you say "like Google Finance"?  Last I knew there were many features of Google Finance that were proprietary to GF and not (easily) duplicatable in the Visualization API.

[Bassa Safa]

Haha I see. If its proprietary to GF then I will try another approach.
=) Thanks for your reply! =)

On 23 mar, 14:56, asgallant <drew_gall...@abtassoc.com> wrote:
> Basically, you use this to tell the control what to draw in the range
> filter control.  The columns property takes an array of column indices or
> objects describing calculated columns (as per the DataView#setColumns

> method:http://code.google.com/apis/chart/interactive/docs/reference.html#Dat...).

>  In the example code you posted, it would attempt to draw a chart with the
> data from column 10 as the first (domain) column and (via a calculated
> column) the second column as well (equivalent to having "columns: [10,
> 10]").
>
> What do you mean when you say "like Google Finance"?  Last I knew there
> were many features of Google Finance that were proprietary to GF and not
> (easily) duplicatable in the Visualization API.
>
>
>
>
>
>
>
> On Thursday, March 22, 2012 5:33:09 PM UTC-4, Bassa Safa wrote:
>
> > Hi,
>
> > I would like to make a chartRangeFilter which depicts the distribution
> > of the data... such as Google finance does at

> >http://www.google.com/finance#​stockscreener<http://www.google.com/finance#stockscreener>.

[asgallant]

What you want may be proprietary to GF.  There are some GF features that the Viz API does have, and some that we can jerry-rig a work around for.  So what GF feature(s) do you want?

[Bassa Safa]

Hi again =)

Tried to google "Viz api" but the links just went back to google
chart. So I guess thats something Google Charts use under the shells?

What I'm building right now is exactly a stock screener... just as
google finance have. I've uploaded a picture and marked in red what im
interested in: http://i41.tinypic.com/wcn80w.png

At the bottom they have a table with stocks having different data...
for instance "Market Cap". At the top they have something that seems
like a ChartRangeFilter that has the statistical distribution of the
Market Caps of all companies. In regular(?) ChartRangeFilter, the X-
axis should depict the Market Cap... which in some sense it does...
but they have transformed the data into a distribution, instead of
distinct data-rows (that a dataview-function requires). It seems like
they have two tables?? 1 to depict the ChartRangeFilter and 1 for the
datatable??

If my text above seems difficult to understand... its probably because
i dont fully understand myself at this point =)

best regards
bassa


On 23 mar, 16:08, asgallant <drew_gall...@abtassoc.com> wrote:
> What you want *may* be proprietary to GF.  There are some GF features that

> the Viz API does have, and some that we can jerry-rig a work around for.
>  So what GF feature(s) do you want?
>
>
>
>
>
>
>
> On Friday, March 23, 2012 10:41:24 AM UTC-4, Bassa Safa wrote:
>
> > Haha I see. If its proprietary to GF then I will try another approach.
> > =)  Thanks for your reply! =)
>
> > On 23 mar, 14:56, asgallant <drew_gall...@abtassoc.com> wrote:
> > > Basically, you use this to tell the control what to draw in the range
> > > filter control.  The columns property takes an array of column indices
> > or
> > > objects describing calculated columns (as per the DataView#setColumns
> > > method:

> >http://code.google.com/​apis/chart/interactive/docs/​reference.html#Dat...<http://code.google.com/apis/chart/interactive/docs/reference.html#Dat...>).

>
> > >  In the example code you posted, it would attempt to draw a chart with
> > the
> > > data from column 10 as the first (domain) column and (via a calculated
> > > column) the second column as well (equivalent to having "columns: [10,
> > > 10]").
>
> > > What do you mean when you say "like Google Finance"?  Last I knew there
> > > were many features of Google Finance that were proprietary to GF and not
> > > (easily) duplicatable in the Visualization API.
>
> > > On Thursday, March 22, 2012 5:33:09 PM UTC-4, Bassa Safa wrote:
>
> > > > Hi,
>
> > > > I would like to make a chartRangeFilter which depicts the distribution
> > > > of the data... such as Google finance does at

> > > >http://www.google.com/​finance# <http://www.google.com/finance#>
> > ​stockscreener<http://​www.google.com/finance#​stockscreener<http://www.google.com/finance#stockscreener>>.

[asgallant]

That looks like it provides the functionality of the numberRangeFilter control to me.  Looking at the underlying HTML code, it is definitely unique (the histogram is actually a table with td's containing divs of varying heights).  If you are willing to do some heavy work, I bet we can hack together something that looks and acts similar, though.

Off the top of my head, I can think of 2 ways to go about this, depending on exactly what you want:

Method 1 - creates something that looks visually most similar to the GF controls

1) build a DataTable for the histogram chart (maybe the google.visualization.data.group() function will help: http://code.google.com/apis/chart/interactive/docs/reference.html#google_visualization_data_group).  The histogram must be organized with values in a linear fashion; this won't work with log scale (or other non-linear scale) methods as the numberRangeFilter Control doesn't support them.

2) modify the style for the numberRangeFilter Control (the ui.cssClass option will help with this)

3) draw the control (as a part of the whole dashboard)

4) draw a Column Chart without title, labels, legend, interactivity disabled, etc based on the histogram DataTable inside or under the control (inside is easier to position, but under might be necessary to avoid interfering with the control)

Method 2 - easier to do, but the histogram must be displayed as a LineChart, AreaChart, or ScatterChart (as chartRangeFilter controls can't use ColumnCharts for the control itself)

1) build a DataTable object like in Method 1, but there is no restriction on scaling

2) define a Line/Area/Scatter Chart to act as a dummy for the control

3) define a chartRangeFilter control (using a Line/Area/Scatter chart)

4) create a 'stateChange' event handler for the control, which takes the start and end positions of the control and uses them to filter the base DataTable used for the main part of the visualization, redraws the main part of the visualization using a filtered DataView

4) create a dashboard to hold the control and dummy chart

5) set up a 'ready' event handler for the dashboard that hides the containing div of the dummy chart (so it won't be seen by users)

6) draw the dashboard and the main part of your visualization.

Method 2 is probably easier to do than Method 1.

BTW: "Viz API" is short for Visualization API, which is what you are here for  >;o)

[Bassa Safa]

Asgalliant, I love it when you talk dirty to me about heavy hacking
work! =) And I must say that's most generous of you wanting to help
me! And im very appreciate! =) Even though I love hardcore hacking...
Ive decided to make this as simple as possible... just using
NumberRangeFilter instead. Hacking is lots of fun and reminds me of my
college days... but simple (out-of-the-box) solutions tend to be more
economic =) Thanks a million for all your support! I wish you
happiness, love, health and laughter.

best regards
bassa =)

On 23 mar, 19:53, asgallant <drew_gall...@abtassoc.com> wrote:
> That looks like it provides the functionality of the numberRangeFilter
> control to me.  Looking at the underlying HTML code, it is definitely
> unique (the histogram is actually a table with td's containing divs of
> varying heights).  If you are willing to do some heavy work, I bet we can
> hack together something that looks and acts similar, though.
>
> Off the top of my head, I can think of 2 ways to go about this, depending
> on exactly what you want:
>
> Method 1 - creates something that looks visually most similar to the GF
> controls
>
> 1) build a DataTable for the histogram chart (maybe the

> google.visualization.data.group() function will help:http://code.google.com/apis/chart/interactive/docs/reference.html#goo...).

> > interested in:http://i41.tinypic.com/wcn80w.​png<http://i41.tinypic.com/wcn80w.png>

> > http://​code.google.com/apis/chart/​interactive/docs/reference.​html#Dat..<http://code.google.com/apis/chart/interactive/docs/reference.html#Dat..>.>).

>
> > > > >  In the example code you posted, it would attempt to draw a chart
> > with
> > > > the
> > > > > data from column 10 as the first (domain) column and (via a
> > calculated
> > > > > column) the second column as well (equivalent to having "columns:
> > [10,
> > > > > 10]").
>
> > > > > What do you mean when you say "like Google Finance"?  Last I knew
> > there
> > > > > were many features of Google Finance that were proprietary to GF and
> > not
> > > > > (easily) duplicatable in the Visualization API.
>
> > > > > On Thursday, March 22, 2012 5:33:09 PM UTC-4, Bassa Safa wrote:
>
> > > > > > Hi,
>
> > > > > > I would like to make a chartRangeFilter which depicts the
> > distribution
> > > > > > of the data... such as Google finance does at

> > > > > >http://www.google.com/​​finance# <http://www.google.com/​finance#<http://www.google.com/finance#>>
>
> > > > ​stockscreener<http://​www.​google.com/finance#<http://www.google.com/finance#>

[asgallant]

On Friday, March 23, 2012 5:06:20 PM UTC-4, Bassa Safa wrote:

Asgalliant, I love it when you talk dirty to me about heavy hacking 
work! =) 

Hahahahaha!  I snarfed soda all over my keyboard and monitor when I read that  >;o)

Thanks a bunch, I needed a laugh.