Calculating Avg/Geomean of the selected range using NumberRangeFilter

[Priyanka Mandadi]

Hi all,

This is the first time i am using Google charts.

Please find the attached html file in which i am able to select age and roolNumber ranges using 2 NumberRangeFilter sliders. And the graphs are showing only the row values that fall within this range.

Now i want to calculate the Average and geomean of Age values which fall within the selected range and display them on the webpage instead of drawing the chart for all individual rows.

Thanks in advance.

[asgallant]

This is fairly easy to do.  Set up a 'ready' event handler for the Table that gets the DataTable used by the Table, and then group on this data to get the average and geometric mean of the data.  See an example here: http://jsfiddle.net/asgallant/rEhUp/ 

If you don't want to show the charts, then you can drop all but one from the visualization, and hide the div that the last one resides in.  See example here: http://jsfiddle.net/asgallant/rEhUp/1/ 

[Priyanka Mandadi]

Thanks a lot for the solution that you have provided with examples. 

It worked out well.

One small issue that i am seeing here is the there is delay in the display of average and geomean values after any of the selection criteria is changed. Any idea to make this faster? I don't see this in the example that you have sent. 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/4u3twqDW1OUJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

I ran the script you posted through FF, Chrome, IE 8, and IE 9 and didn't see any performance problems.

On Thursday, July 12, 2012 2:43:42 AM UTC-4, kp wrote:

Thanks a lot for the solution that you have provided with examples. 

It worked out well.

One small issue that i am seeing here is the there is delay in the display of average and geomean values after any of the selection criteria is changed. Any idea to make this faster? I don't see this in the example that you have sent. 

On Wed, Jul 11, 2012 at 9:17 PM, asgallant <drew_g...@abtassoc.com> wrote:

This is fairly easy to do.  Set up a 'ready' event handler for the Table that gets the DataTable used by the Table, and then group on this data to get the average and geometric mean of the data.  See an example here: http://jsfiddle.net/asgallant/rEhUp/ 

If you don't want to show the charts, then you can drop all but one from the visualization, and hide the div that the last one resides in.  See example here: http://jsfiddle.net/asgallant/rEhUp/1/ 

On Wednesday, July 11, 2012 1:40:50 AM UTC-4, kp wrote:

Hi all,

This is the first time i am using Google charts.

Please find the attached html file in which i am able to select age and roolNumber ranges using 2 NumberRangeFilter sliders. And the graphs are showing only the row values that fall within this range.

Now i want to calculate the Average and geomean of Age values which fall within the selected range and display them on the webpage instead of drawing the chart for all individual rows.

Thanks in advance.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/4u3twqDW1OUJ.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[Priyanka Mandadi]

i was actually trying out on a hosted server. Later I have copied the file tried to open in the browser locally using windows path and found that it was fast. 

Hence the slowness issue that i was seeing, should be purely because of server speed and not related to the code.

Thanks for the help :) 

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/VV0GGxf7BEsJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[Priyanka]

In the same example (PFA html file), i have calculated geomean values for 3 coulms and now i am trying to draw a bar chart for the calculated geomean values dynamicaly. 

For this i have created a new DataTable 'data_geo' and i have added calulated geomean values to it using data_geo.setcell . Now when i am using  draw() for data_geo but i am not able to draw a bar chart. Also i need to export the table values to excel on button click.

Can someone please help? 

Thanks for your time!

On Thursday, July 12, 2012 10:49:15 PM UTC+5:30, Priyanka wrote:

i was actually trying out on a hosted server. Later I have copied the file tried to open in the browser locally using windows path and found that it was fast. 

Hence the slowness issue that i was seeing, should be purely because of server speed and not related to the code.

Thanks for the help :) 

On Thu, Jul 12, 2012 at 10:18 PM, asgallant <drew_g...@abtassoc.com> wrote:

I ran the script you posted through FF, Chrome, IE 8, and IE 9 and didn't see any performance problems.

On Thursday, July 12, 2012 2:43:42 AM UTC-4, kp wrote:

Thanks a lot for the solution that you have provided with examples. 

It worked out well.

One small issue that i am seeing here is the there is delay in the display of average and geomean values after any of the selection criteria is changed. Any idea to make this faster? I don't see this in the example that you have sent. 

On Wed, Jul 11, 2012 at 9:17 PM, asgallant <drew_g...@abtassoc.com> wrote:

This is fairly easy to do.  Set up a 'ready' event handler for the Table that gets the DataTable used by the Table, and then group on this data to get the average and geometric mean of the data.  See an example here: http://jsfiddle.net/asgallant/rEhUp/ 

If you don't want to show the charts, then you can drop all but one from the visualization, and hide the div that the last one resides in.  See example here: http://jsfiddle.net/asgallant/rEhUp/1/ 

On Wednesday, July 11, 2012 1:40:50 AM UTC-4, kp wrote:

Hi all,

This is the first time i am using Google charts.

Please find the attached html file in which i am able to select age and roolNumber ranges using 2 NumberRangeFilter sliders. And the graphs are showing only the row values that fall within this range.

Now i want to calculate the Average and geomean of Age values which fall within the selected range and display them on the webpage instead of drawing the chart for all individual rows.

Thanks in advance.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/4u3twqDW1OUJ.
To post to this group, send email to google-visualization-api@googlegroups.com.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

[asgallant]

There were a couple of things here that needed fixing:

1) you are trying to use the BarChart class without loading the corechart package; switching to a ChartWrapper fixes the problem (as would loading "corecharts" alongside "controls" if you would prefer that way).

2) the data_geo dataTable needs to have its columns defined outside the 'ready' event handler (otherwise, every time someone moves the sliders, it will add new columns to the DataTable, and will throw an error

It's also better to define the bar chart outside the 'ready' event handler, as otherwise you will be creating new chart objects every time.  See implementation here: http://jsfiddle.net/asgallant/MqERY/1/

[Priyanka]

Thank you so much for the solution for bar chart. 

Also i would like to directly export table data to excel/csv. I dont want to use/store data using google spreadsheet here.

Is there any way to do this?  Any help is much appreciated. 

[asgallant]

Do you want users to be able to download a CSV of the data, or do you want to be able to use one as a data source?

[Priyanka]

I want the users to be able to download a CSV of the table with filtered data that we currently on the webpage. 

[Priyanka]

Also i want to have hyperlinks to column values in the table chart for the same example.

For example when i click on Name 'Michael', it should take me to say http://google.com

lly when i click on name 'Elisa', it should take me to say http://facebook.com etc.

i have used allowHtml for table options as shown below:

var table = new google.visualization.ChartWrapper({

  'chartType': 'Table',

  'containerId': 'chart2',

  'options': {

    'width': '1200px',

    'allowHtml': true

  },

  'view' : {

      'columns': [0,1,3]

    }

});

i am trying to use style (read in one of the docs) for values to var data = google.visualization.arrayToDataTable to insert hyperlinks within that but i was not successful.

Can you please help ?

[asgallant]

Ok, I wrote a hack to download the data in CSV format without invoking a call to a server: http://jsfiddle.net/asgallant/MqERY/3/ 

It's not perfect, as there is no way to specify the name of a file in a URI string (hence the popup when you click the button), but it is functional.

[asgallant]

Added in links to the table via custom formatting with calculated columns: http://jsfiddle.net/asgallant/MqERY/4/ 

If all of the entries in a column will have links, it might be easier to use a pattern format on the column and use a calculated column to return the formatted value to the table.

[Priyanka]

Hi Asgallant,

Thankq for the solutions. I will try and let you know if i see any issues.

Regd hyperlinks,in my case all the entries for a specific column will have their corresponding hyperlinks. I have already tried using Pattern Format but was unsuccessful in my attempt. Can you please give me some small example on how this can be used?

Thanks for your time! 

[asgallant]

There's an example here: https://code.google.com/apis/ajax/playground/?type=visualization#pattern_formatter 

and updated jsfiddle here: http://jsfiddle.net/asgallant/MqERY/5/ 

Note that I changed some of the HTML, as there was a weird effect where the positioning of the bar chart's div was overlapping the table, preventing interaction.

[Priyanka]

Hi Asgallant,

Thankyou for the solution. This works!

Couple of other questions that i have here are: 

How do i get the value of what has been selected using category filter. i can see that there is an option to set a default value but i need to reverse.

What i need here is i need to have a dropdown (category filter) below the barchart which will have the option for GeoMean and avaerage. Based on the value selected, if geomean is selected the barchart should draw/display the values for geomean. elseif average is selected, the barchart should display the values for averages.  

Is this possible in google charts?

Thank you !!

[asgallant]

You can use this to get the selected values:

var sel = categoryPicker.getState().selectedValues;

[Priyanka]

Thankyou Asgallant.