Comments (5)
I am not able to reproduce the problem you have indicated. Here is my code
library(sparkline)
x = sparkline(values = 1:3, type = "bar", tooltipFormat = '${{value}}',
width = 200, height = 30
)
mystyle = "
.jqstooltip {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}"
library(shiny)
ui = bootstrapPage(
tags$style(mystyle),
sparkline:::sparklineOutput('mysparkline', 200, 30)
)
server = function(input, output){
output$mysparkline = sparkline:::renderSparkline(
x
)
}
shinyApp(ui = ui, server = server)
Note that we need the extra css when working with bootstrap to prevent the tooltips from getting cut off. I will be adding it to the sparkline css directly in the future.
from sparkline.
Thanks!
But, how can I call sparkline from the server? For instance, let's say I want to return it to a uiOutput object along with some other HTML code.
Carlos
from sparkline.
In the example above, I am calling sparkline
from the server. You can use sparklineOutput
to place your sparkline at the appropriate location in your UI.
from sparkline.
Hi,
Thanks for your help. I managed to make it work but I get the feeling is not the right way. In order to change the format I had to change {{value}}
by {{y}}
. Anyway, this is a simplified version of my code where I've replaced the icon in a valueBox by a sparkline plot.
library(shiny)
library(sparkline)
library(shinydashboard)
mystyle = "
.jqstooltip {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.spark {
position: absolute;
bottom: 5px;
right: 5px;
margin-bottom: 5px;
}
"
ui = dashboardPage(
dashboardHeader(disable = TRUE),
dashboardSidebar(disable = TRUE),
dashboardBody(
tags$style(mystyle),
valueBoxOutput("sparkBox")
)
)
server = function(input, output){
data <- ceiling(runif(12, 500, 1000))
output$sparkBox <- renderValueBox({
tags$div(class = "col-sm-4",
tags$div(class = "small-box bg-aqua",
tags$div(class = "inner",
h3(data[3]),
p("Best Price")),
tags$div(class = "spark",
sparkline:::sparklineOutput("sprk", 150, 80),
sparkline:::sparkline(outputid = "sprk",
values = data,
tooltipFormat = '${{y}}',
width = 150, height = 80)
)))
})
}
shinyApp(ui = ui, server = server)
How would one implement tooltipValueLookups
to map 0 to January, 1 to February ...? Is this possible?
Thank you very much.
from sparkline.
Hi,
I was able to do what I wanted by using shinyjs along with sparkline. This is a simple example with the tooltip formatted:
ui.R
library(shiny)
library(shinyjs)
library(sparkline)
jsSprk <- "shinyjs.sprk = function() {
var myvalues = [10,8,5,7,4,4,1];
$('#sprkMe').sparkline(myvalues, {
type: 'pie',
width: '200px',
height: '200px',
sliceColors: ['#5d3092', '#4dc9ec', '#9de49d', '#9074b1', '#66aa00', '#dd4477', '#0099c6', '#990099'],
borderWidth: 7,
borderColor: '#f5f5f5',
tooltipFormat: '<span style=\"color: {{color}}\">●</span> {{offset:names}} ({{percent.1}}%)',
tooltipValueLookups: {
names: {
0: 'Automotive',
1: 'Locomotive',
2: 'Unmotivated',
3: 'Three',
4: 'Four',
5: 'Five'
}
}
});
}"
mystyle = "#sprkMe {
visibility: inherit !important;
}
.jqstooltip {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}"
fluidPage(
tags$style(mystyle),
useShinyjs(),
extendShinyjs(text = jsSprk),
h1("JS"),
sparkline:::sparklineOutput(outputId = "sprkMe", 200, 200)
)
server.R
server = function(input, output) {
output$sprkMe <- sparkline:::renderSparkline({
js$sprk()
})
}
Carlos
from sparkline.
Related Issues (20)
- How to use composite bar in markdown? HOT 13
- Additional tooltip info (like date, or values from a x axis) HOT 13
- Add package to CRAN HOT 9
- Add helper function for as.character(as.tags(sparkline())) HOT 1
- Add helper functions to add sparkline dependencies
- Add formattable to suggests HOT 1
- Preface sparkline helpers and functions with spk
- Create vignette to show sparklines with other htmlwidgets HOT 9
- Improve/chage default colors
- Use option colorMap with sparkline HOT 2
- Add x values to sparkline?
- Sparklines only appear on first page of DT table HOT 4
- Fixing sparkline columns with null values HOT 1
- Invalid comparison operator in dependency: >= HOT 1
- Creating Stacked Bar Charts HOT 3
- stacked bar chart HOT 1
- Unavailable plot options - Boxplots with minValue and maxValue HOT 3
- Passing values to tooltipValueLookups
- High Severity Security Vulnerability Detected by Github
- Sparklines fail to render in tableHTML
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sparkline.