Glowing Rhandsontable - Custom Renderer - Apply color based on factor (Palette)

I have successfully generated a dataset where I assigned color codes to a column based on values from another column.

 colourCount = length(unique(Desc.File$VARIABLECODE))
getPalette = colorRampPalette(brewer.pal(9, "Set1"))
Colors <- getPalette(colourCount) 

Desc.File$ColorCode <- factor(Desc.File$VARIABLECODE, labels = Colors)

The result is a list of HEX color codes:

"#E41A1C" "#D42229" "#C52B37" "#B63445" "#A73D52" "#974560" "#884E6E" "#79577C" "#6A6089" "#5B6997" "#4B71A5" "#3C7AB2" "#3880B1" "#3A85A8" "#3C899E" "#3E8D94" "#3F918B" "#419681" "#439A77" "#459E6E" "#47A364" "#49A75A"

My goal now is to utilize these colors in a plot and also apply them as the background/text color in Rhandsontable.

color_renderer = "function(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);

clr   = instance.params.ColorCode

td.style.background=  hex(clr[row])
}
"

colnames(Summary.tab) <- c("Code", "Brand", "Type", "Description", "Metric", "ColorCode", "Execution", "Cost")
Summary.tab <- data.frame(Check=rep(TRUE, n),Summary.tab)
DT = rhandsontable(Summary.tab, readOnly = FALSE, rowHeaders= NULL, useTypes= TRUE, selectCallback = TRUE) %>% hot_col("Code", renderer=color_renderer)

I am attempting to use the renderer to extract colors from the color column in the dataset and assign them as the background color, however, it does not seem to be functioning as expected. (I am new to JavaScript coding so I might be missing something)

Please provide assistance :)

javascriptrshinyrhandsontable

Answer №1

To ensure proper functionality in a rhansontable, it is essential to provide the ColorCode parameter which can then be utilized within the renderer function. Below is an example demonstrating how this can be implemented:

library(shiny)
library(rhandsontable)

color_renderer = "
    function(instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        if (instance.params) {
            clr = instance.params.ColorCode
            clr = clr instanceof Array ? clr : [clr]
            td.style.background =  clr[row]
        }

    }"

set.seed(12345)
Desc.File <- data.frame(VARIABLECODE = sample(letters, 10, replace = TRUE))

colourCount <- length(unique(Desc.File$VARIABLECODE))
getPalette <- colorRampPalette(RColorBrewer::brewer.pal(9, "Set1"))
colors <- getPalette(colourCount) 

Desc.File$ColorCode <- factor(Desc.File$VARIABLECODE, labels = colors)


ui <- fluidPage(
    rHandsontableOutput("table")
)

server <- function(input, output) {

    output$table <- renderRHandsontable({
        rhandsontable(Desc.File, ColorCode = Desc.File$ColorCode) %>% 
            hot_cols(renderer = color_renderer)
    })

}

shinyApp(ui = ui, server = server)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Working with arrays in JavaScript objects

I have an object with arrays nested inside, as shown in the example below: {1: Array(4), 2: Array(4), 3: Array(4)} 1: (4) ["11111", "2020-04-02", "14:07", 1] 2: (4) ["22222", "2020-04-02", "14:07", 2] 3: (4) ["3333333", "2020-04-02", "14:07", 3] (from con ...

javascriptarraysobject

Looking for the final entry in a table using AngularJS

Hey everyone, I'm dealing with a table row situation here <tbody> <tr *ngFor="let data of List | paginate : { itemsPerPage: 10, currentPage: p }; let i = index"> <td>{{ d ...

javascriptangulartypescript

Exploring the benefits of utilizing TypeScript's async await feature within the Node

I've encountered a challenge trying to accomplish the following tasks simultaneously: Developing in Node.js Coding in TypeScript Implementing async await Facilitating debugging Background: In my TypeScript-based Node.js project, I am incorporating ...

javascriptnode.jstypescriptasync-awaittranspiler

What is the best way to link the roll button to a specific video URL?

I am currently working on a project that involves assigning specific videos to 6 roll buttons for continuous play. For instance, I want the first roll button to display a yellow dice and the second button to show a blue dice, and so on. As of now, I have ...

javascripthtmlcss

Tips for altering the color of a chosen node or edge in the visNetwork package within R?

I have encountered a similar question on Stack Overflow, but I'm having trouble adapting it to my code. My goal is to modify the color of nodes and edges using the visNetwork package in R. Specifically, I want to change the color under two conditions: ...

rvisnetwork

Troubleshooting Issues with Implementing JavaScript for HTML5 Canvas

I've encountered an issue with my code. After fixing a previous bug, I now have a new one where the rectangle is not being drawn on the canvas. Surprisingly, the console isn't showing any errors. Here's the snippet of code: 13. var can ...

javascripthtmlcanvashtml5-canvas

Creating dynamic data for Chart.js to display values

I am attempting to utilize dynamic data using ajax, but my current implementation is not functioning correctly. The ajax response returns data in JSON format via PHP. Here is the code snippet: success: function (result) { result = JSON.parse(r ...

javascriptphpjqueryajaxchart.js

Universal PM2 Configuration Settings in JSON Format

My current process involves initiating numerous Node.js processes using pm2. These processes are configured in a JSON file and started by executing pm2 start pm2.json Upon examining the JSON file provided below, it's evident that there is significan ...

javascriptnode.jsnpmnode-modulespm2

transmit FormData containing two files and a text message to the controller

I have encountered an issue while trying to send a FormData object containing text fields, an image file, and a PDF file to an action in the controller. Despite my efforts, the form data is not being sent to the action. I have checked for errors through br ...

javascriptc#ajaxasp.net-coremultipartform-data

How can I modify the value of a CSS animation rule in AngularJS?

I am looking to dynamically change the value assigned to stroke-dashoffset based on a custom input. @-webkit-keyframes donut-chart-1 { to { stroke-dashoffset: 100; } } @keyframes donut-chart-1 { to { stroke-d ...

javascriptangularjscsscss-animations

Objects for requesting and responding

When utilizing express.js, middlewares have the ability to modify both the request object and the response object. This raises the question: what exactly do these request and response objects represent, and what information do they hold? ...

javascriptnode.jsexpress

Tips for optimizing Angular source code to render HTML for better SEO performance

Our web platform utilizes Angular JS for the front-end and node js for the backend, creating dynamic pages. When inspecting the code by viewing the source, it appears like this: For our business to succeed, our website needs to be SEO-friendly in order to ...

javascripthtmlangularseo

Encountering an issue with my node configuration while working on a Discord bot

Attempting to develop my own Discord Bot has presented me with a challenging error that I am struggling to resolve: internal/modules/cjs/loader.js:968 throw err; ^ Error: Cannot find module './commands/${file}' Require stack: - C:\Users&bso ...

javascriptnode.jsdiscord.js

Does AngularJS really allow for seamless event communication between modules?

I am in search of a solution to effectively send an event from one Angular module to another. After browsing through various resources, I stumbled upon a thread that perfectly outlines the solution I had in mind. The thread titled How to send message from ...

javascriptangularjsmodule

Troubleshooting Test Failures: The importance of passing $controller in the callback of 'it' function in Angular

As a newcomer to testing, I am attempting to write Jasmine/Karma tests for a controller. Given a sample test to use as a starting point, the issue arises when passing the $controller in the argument of the it block. The test passes successfully with this s ...

javascriptangularjstestingjasminekarma-runner

Difficulty with SailsJS Transmitting Information to View Template

I've been trying to establish a connection for hours but haven't had any luck. All I want to do is transfer some data from a controller to a view template. When I navigate the route without specifying a view template, the browser displays the da ...

javascriptmysqltemplatessails.js

Making a Jquery 1.10.2 cross-domain request

I am in need of assistance with the following code snippet: function doPoolPartyGetChildrenAjaxRequest(parent) { return $.ajax({ url: "http://127.0.0.1:8086/PoolParty/api/thesaurus/1DCE2E49-7DD8-0001-524C-1A1B14A0141A/childconcepts", data: {lan ...

javascriptjqueryajaxtomcat

Checking for the existence of data in a MySQL table using Node.js resulted in an error message: "TypeError: res.send is

I am currently attempting to verify the existence of data in a mysql table. Upon doing so, I encountered an error indicating TypeError: res.send is not a function. The mysql table contains ample data with three columns, each specified as varchar(45), alon ...

javascriptjquerymysqlajaxnode.js

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Below is the code for my jQuery Mobile Grid buttons: <div class="ui-grid-b my-breakpoint"> <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</ ...

javascriptjquerycssjquery-uijquery-mobile

Issue with form validation, code malfunctioning

I am struggling to figure out why this validation isn't working. Here is the HTML code I'm using: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type='text/javascript' src="scripts. ...

javascripthtmlvalidation