heatmap

[Nick Dunbar]

Hi, 

Is there any way of adapting the existing API to produce a heatmap like the attached image? I'm sure this must be possible somehow. 

All suggestions appreciated. 

Nick 

[Daniel LaLiberte]

Hi Nick,

We don't have any direct support for heatmaps in Google Charts.  However, it is similar to a stacked column chart, with bar.gap = 0.  You'd have to specify the color of each cell since it wouldn't do that itself.  We also don't have any colorbar available independent of the few charts that support it.

Another option is to use the Graph3d charts documented here: http://almende.github.io/chap-links-library/js/graph3d/doc/

These use the Google Charts data structures and API for setting up the datatable and options.   Using the 3D surface plot, turn off the perspective, and rotate the view until it is on top of the z axis and you get a heatmap. 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/49cbafdd-7679-4bff-bc98-726c72216f4e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Nick Dunbar]

Thanks Dan, 

for the stacked column route, I am thinking about how to format the dataTable. I suppose the bar height columns are just integers to create the square grid, while the correlations go in the style columns which get turned into RGB values. It is a shame there isn't a colorbar off the shelf that can be used. 

The 3D thing sounds tricky. I have to study that. 

How about you create a heatmap Google chart? Looks like you have already done the heavy lifting!

Nick

On Monday, September 18, 2017 at 7:41:53 PM UTC+1, Daniel LaLiberte wrote:

Hi Nick,

We don't have any direct support for heatmaps in Google Charts.  However, it is similar to a stacked column chart, with bar.gap = 0.  You'd have to specify the color of each cell since it wouldn't do that itself.  We also don't have any colorbar available independent of the few charts that support it.

Another option is to use the Graph3d charts documented here: http://almende.github.io/chap-links-library/js/graph3d/doc/

These use the Google Charts data structures and API for setting up the datatable and options.   Using the 3D surface plot, turn off the perspective, and rotate the view until it is on top of the z axis and you get a heatmap. 

On Mon, Sep 18, 2017 at 2:10 PM, Nick Dunbar <dunba...@gmail.com> wrote:

Hi, 

Is there any way of adapting the existing API to produce a heatmap like the attached image? I'm sure this must be possible somehow. 

All suggestions appreciated. 

Nick 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

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

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/49cbafdd-7679-4bff-bc98-726c72216f4e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA

[Stanley George]

Hi Nick

Just wanted to check with you if you were able to implement this with Stacked Charts ? OR did you find any other better alternative ?

[Ray Thomas]

Given the image looks more like a table and that you can give every cell in a table a CSS class here's something I would try. It looks good in theory and should work.

The example at https://developers.google.com/chart/interactive/docs/examples#custom_table_example gets the classname for the cell from the data but there's no reason you can't step through the dataTable do some sort of logical test on the data and set a classname programmatically. You could even create an array of colors, do the logical test, set the classname and then use IF, SWITCH or a MAP to set the background color from the color array.

If you wanted you can either add new columns to the dataTable that has empty data so the original data that you did the test on doesn't show or even reset the cell's contents to an empty string. Something to start with:

var totalRows = mydata.getNumberOfRows();

var totalCols = mydata.getNumberOfColumns();

for (i = 0; i < totalRows; i++) { 

     for (j = 0; j < totalCols; j++) {

          // logical test, create myclass as the classname

          mydata.setProperty(i,j,"className",myclass);

          mydata.setFormattedValue(i,j,"");

     }

}

Another option might be to use the newish VegaCharts - https://developers.google.com/chart/interactive/docs/gallery/vegachart_examples but I don't know much about those yet.

[Stanley George]

Thanks Ray

I will have a look at the VegaCharts since they are offering an heatmap solution. I hope it should work out for me.