CODEWITHSUNDEEP
rvis.js-timeline
Rami Jaschek
Rami Jaschek

Reputation: 41

How do I change the color of the points in the timeline visualization using timevis?

I am trying to generate a condensed view of a single timeline so I can fit many of those on one page. To maximize content delivery without labels (allows to push more points on), I want to use color coding on the points to indicate event type. I am adding the style column to my data frame, but all that it affects is the label. How can I affect the color of the point itself

I have investigated the resulting HTML and see that the style is appended to the definition of the element containing both the point and the text, but it seems the text has it's own style:

<div class="vis-item vis-point vis-readonly" style="border-color: red; color: red; left: 343.741px; top: 5px;">
    <div style="margin-left: 16px;" class="vis-item-content">point1</div>
    <div style="top: 11px; left: 4px;" class="vis-item vis-dot vis-readonly"></div>
</div>

Code to reproduce:

data = data.frame (
    content = c ("point1", "point2", "point3"),
    start   = c ("2010-03-28", "2012-01-17", "2013-12-15"),
    end     = c ("2010-03-28", "2012-01-17", "2013-12-15"),
    type    = c ("point", "point", "point"),
    style   = c ("border-color: red; color: red;", "border-color: blue; color: blue", "border-color: red; color: red;"))

ui <- fluidPage(
    timevisOutput("timeline")
)

server <- function (input, output, session) {
    output$timeline <- renderTimevis ({
            timevis (data = data, options = list(stack = FALSE))
    })
}

shinyApp(ui = ui, server = server)

How do I affect the color per point?

Upvotes: 1

Views: 1501

Answers (1)

Rami Jaschek
Rami Jaschek

Reputation: 41

Got this to work. The style segment affects only the text, but if you add a className column, you get to define a style and then you can add a CSS that will actually control the point. See below for working example:

Example <- function ()
{
    data = data.frame (
            content     = c ("point1", "point2", "point3"),
            start       = c ("2010-03-28", "2012-01-17", "2013-12-15"),
            end         = c ("2010-03-28", "2012-01-17", "2013-12-15"),
            type        = c ("point", "point", "point"),
            style       = c ("color: red;", "color: blue;", "color: red;"),
            className   = c ("red_point", "blue_point", "red_point"))

    ui <- fluidPage(
        title = "Rami is testing styles",
        tags$head(
            tags$style(HTML("
                        .red_point  { border-color: red;    }
                        .blue_point { border-color: blue;   }
                        "))),
        timevisOutput("timeline")
    )

    server <- function (input, output, session) {
        output$timeline <- renderTimevis ({
            timevis (data = data, options = list(stack = FALSE))
        })
    }
    shinyApp(ui = ui, server = server)
}

Upvotes: 1

Related Questions