Is utilizing R dygraphs for fractional timestamps possible?

Is there a workaround that allows for using the dygraphs package in R Shiny with fractional timepoints? While I know this package is primarily designed for time-series data, I believe it could also be valuable for creating survival plots.

For instance, consider the following dataset:

samp.data <- data.frame(Months=seq(0,10,by=0.5), Surv=seq(1,0,length.out=21))

head(samp.data)

  Months Surv
1    0.0 1.00
2    0.5 0.95
3    1.0 0.90
4    1.5 0.85
5    2.0 0.80
6    2.5 0.75

I am aware of the following approach:

samp.xts <- xts(samp.data[,-1], order.by=as.Date(samp.data[,1]))
dygraph(samp.xts) 

However, this method omits some details and displays the x-axis as a date instead of a numerical value. After exploring the 'dygraphs' javascript library, I have noticed that it supports non-time-series data as well. Unfortunately, I have not yet discovered any functionality related to the R package. Is there a way to invoke a javascript code from within the function?

Answer №1

When you mention "fractional timepoints," I assume you are referring to intra-day data. Utilizing dygraphs with data indexed on POSIXct enables you to pinpoint points within a day.

In the scenario you provided, converting the index to Date results in losing any timestamp information from the data.

Have you experimented with the following approach?

samp.xts <- xts(samp.data[,-1], order.by=as.POSIXct(samp.data[,1]))
dygraph(samp.xts) 

It's crucial to utilize as.POSIXct.

Answer №2

Upon experimenting with it extensively, I believe I have finally cracked the code. One must pass javascript functions to both the valueFormatter and the axisLabelFormatter.

samp.data <- data.frame(Months=seq(0,10,by=0.5), Surv=seq(1,0,length.out=21))
samp.xts <- xts(samp.data[,-1], order.by=as.POSIXct(10*samp.data[,1],origin=as.Date("1970-01-01")))

Behold, behold the creation of the graph:

dygraph( samp.xts ) %>%
  dyAxis(name="x",
         valueFormatter="function(d){ var date = new Date(d); return (date.getSeconds()/10) }",
         axisLabelFormatter="function(d){ return (d.getSeconds()/10) }"
  )

Although a bit of a workaround, this method does deliver the desired outcome. It's important to note that while valueFormatter yields a value, axisLabelFormatter produces a date.

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

React Material-UI: Trouble with Checkbox Toggle

I'm encountering an issue with my React code where the checkbox is not toggling when clicked. Here is the link to the codesandbox: https://codesandbox.io/s/inspiring-kirch-q6p4h The checkbox state initialization looks like this: const [checkbox, set ...

Ant Design's EditableRow feature fails to update the buttons appropriately from "edit" to "save" and "cancel" prompts

Having some trouble with my code while using the Antd library. Can't seem to locate the bug. Here is my EditableTableCell component: import React, {Component} from 'react'; import { Form } from '@ant-design/compatible'; import &ap ...

Rotating objects in Three.js: Aligning with a target point and orienting towards another location

I'm a beginner when it comes to three.js and 3d programming, so forgive me if this question sounds basic. I'm hoping for an answer that can help me grasp the core concepts. Currently, I have an object that needs to face another point (in this ca ...

How can a list be returned from an async callback in NodeJS?

Essentially, I am performing a database query to retrieve all posts with a specific id, then adding them to a list before returning. However, the list is being returned before the callback function has finished executing. How can I ensure that the list is ...

Developing a histogram displaying relative frequencies and overlaying a bell curve representing a normal distribution

When trying to plot a relative frequency histogram, I keep encountering an issue where the y-axis values exceed one, making the visualization incorrect. Additionally, I'm attempting to overlay a normal distribution on the histogram but have been unsuc ...

Unable to utilize Bootstrap inside the Shadow DOM of Custom Elements

I am currently in the process of developing a web component using plain JavaScript and implementing Bootstrap 5 for styling purposes. While the Bootstrap styling is functioning correctly, I am encountering issues with the event listeners for the Bootstrap ...

Struggling to style a nested table using CSS

Please take a look at this JSFiddle example for reference. I am currently working with tablesort and its associated CSS to achieve alternating row colors for the rows containing first and last names. Additionally, I want the rows within the sub-table disp ...

Eliminate all the key/value pairs in an array of objects using underscores

Is there a more efficient way to remove all key/value pairs from an array of objects? For example, consider the following array: var arr = [ { q: "Lorem ipsum dolor sit.", c: false }, { q: "Provident perferendis veniam similique!", c: fal ...

Modifying various records in MongoDB (rmongodb)

During my exploration of the update function (mongo.update()), I encountered some challenges. Note Considering my current learning phase with MongoDB and the rmongodb package, any issues illustrated here could be due to my limited knowledge ;-) Prepar ...

How can I assign a default value for a multiple select dropdown list in AngularJS?

I am currently facing an issue with my multiselect dropdown. The code for the dropdown is as follows: <select id="year" multiple ng-model="type" ng-disabled="!type1" > <option value="all" selected>all</option>; <option value= ...

"SyntaxError: import statements can only be at the top level of a module" is the error message that I keep encountering.`

For the complete code, click here: https://github.com/vscodr/axios_issue After spending some time away from JavaScript working in Python, I decided to come back and try to tackle similar tasks using JS. However, I seem to be stuck at a very basic issue! D ...

Most efficient method to retrieve a specific element from an array without the need for iteration

Within one of the controllers in my Angular application, I have set a variable like this: SomeService.get({}, function(data){ // This assigns xyz as the data list retrieved from the // resource within the controller's scope $scope.xyz = ...

Is there a more efficient method for coding this switch/case in TypeScript?

I'm working on a basic weather application using Angular and I wanted some advice on selecting the appropriate image based on different weather conditions. Do you have any suggestions on improving this process? enum WeatherCodition { Thunderstorm ...

Getting URL parameters dynamically without reloading the page

Here's a particular issue I'm encountering: I've implemented the following function to fetch the GET Parameters from a URL. $(document).ready(function() { function getParam(variable) { var query = window.location.search.sub ...

Auto-suggest dropdown menu with pre-populated options

I am looking to implement a feature where users can click on an icon and a dropdown menu will appear, allowing them to search through data. To better illustrate this concept, here is an image: Users will be able to input their quiz names in the first sect ...

Continuous scrolling generates new pagination links as I continue to scroll

Thanks to the helpful comment from lharby on my previous post, I finally figured out how to implement Infinite Scrolling. Big thank you! The only issue now is that the script starts generating a new pagination link after scrolling past 15 posts (which i ...

Pressing the submit button will trigger the execution of a .php script, which will then generate a popup on the screen and refresh a specific part of

I have a select form and submit button on my page, which are dynamically generated based on entries in the database. Here is the HTML output: <div id="structures"> <h1>Build</h1> <form name="buildForm" id="buildForm" method="POST" ons ...

Update the background color when a selectable option is chosen and not disabled

I am searching for a solution to modify the color of a select box if one of the disabled options is not chosen. Here is an example of the dropdown: <select class="selectoption" name="desc[]"> <option disabled="disabled" selected="sel ...

In TypeScript, an interface property necessitates another property to be valid

In the scenario where foo is false, how can I designate keys: a, b, c, bar as having an undefined/null/optional type? Put simply, I require these properties to be classified as mandatory only when foo is true. interface ObjectType { foo: boolean; a: nu ...

Displaying elements in Angular based on their height

I'm currently working on a paragraph that adjusts its length based on the maximum height. I'm interested in finding a way to display or hide the anchor element if the height exceeds a specific limit. Essentially, I only want to show "more..." whe ...