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. On Tuesday, April 20, 2021 at 7:16:14 AM UTC-4 stanle...@gmail.com wrote: > 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 ? > > On Monday, September 18, 2017 at 11:13:22 PM UTC+2 Nick Dunbar wrote: > >> 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 >>>> >>>> <https://groups.google.com/d/msgid/google-visualization-api/49cbafdd-7679-4bff-bc98-726c72216f4e%40googlegroups.com?utm_medium=email&utm_source=footer> >>>> . >>>> For more options, visit https://groups.google.com/d/optout. >>>> >>> >>> >>> >>> -- >>> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> >>> dlali...@google.com 5CC, Cambridge MA >>> >> -- 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+unsubscr...@googlegroups.com. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c417aa53-4ad5-4e91-b638-f953a95e13e4n%40googlegroups.com.
