is there something i'm missing in displaying plotOutput() (bs4Dash) - bs4dash

library(shiny)
library(gapminder)
library(bbplot)
library(tidyverse)
library(bs4Dash)
year_range <- range(gapminder[["year"]])
ui <- dashboardPage(
header = dashboardHeader(
title = dashboardBrand(
title = "LE",
color = "gray"
)
),
sidebar = dashboardSidebar(
width = ,
skin = "light",
sidebarMenu(
id = "sidemenu",
menuItem(
"plotme",
tabName = "plotme",
icon = icon("sliders")
)
)
),
body = dashboardBody(
tabItem(
tabItem(
tabName = "plotme",
fluidRow(
column(
width = 12,
plotOutput("plotme")
)
)
)
)
),
controlbar = dashboardControlbar(
collapsed = FALSE,
pinned = TRUE,
skin = "light",
controlbarMenu(
id = "plotme",
controlbarItem(
title = "Filter:",
selectInput("continent", "Continent",
choices = unique(gapminder$continent)),
selectInput("country", "Country",
choices = NULL),
sliderInput("year",
"Select The Year Range:",
min = year_range[[1]],
max = year_range[[2]],
value = c(year_range[[1]], year_range[[2]]),
sep = "",
step = 1)
)
)
),
)
server <- function(input, output, session) {
continent_data <- reactive({
gapminder %>%
filter(continent == input$continent
& year >= input$year[[1]] | year <= input$year[[2]])
})
observeEvent(continent_data(), {
freezeReactiveValue(input, "country")
choices <- unique(continent_data()$country)
updateSelectInput(session, "country", choices = choices)
})
country_data <- reactive({
req(input$continent)
continent_data() %>%
filter(country == input$country
& year >= input$year[[1]] & year <= input$year[[2]])
})
output$plot <- renderPlot({
req(input$country)
ggplot(country_data(), aes(year, lifeExp)) +
geom_line(colour = "#1380A1", size = 1) +
geom_hline(yintercept = 0, size = 1, colour="#333333")
}, res = 96)
}
shinyApp(ui = ui, server = server)
I have checked the reactive elements and it seems fine. My guess is the issue might be from the menuItems() or from dashboardcontrolbar()
The UI is displaying alright but the plotOutput is not showing
I have checked the reactive elements and it seems fine. My guess is the issue might be from the menuItems() or from dashboardcontrolbar()
The UI is displaying alright but the plotOutput is not showing

I didn't try the app but maybe the problem is with the id's.
You are using plotOutput("plotme") in the UI and output$plot in the server function.

Related

Getting the cell given the cell value in google sheets using app script

I'm trying to write a script that tracks payment dates in google sheets (shows a different colour (either FontColor or Background) three days before payment, another colour on the day of payment and a totally different colour after the payment date.I'd appreciate if there's anyone with know how on how to use those values to get the cell name and use it to change the FontColor or alternatively if there's a better solution
Here is my google sheet
[![enter image description here][1]][1]
This is the code I've written to get the dates into a list
function myFunction() {
let spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
let lastRow = spreadsheet.getLastRow();
let lastCol = spreadsheet.getLastColumn();
var dataRange = spreadsheet.getActiveSheet().getRange(2, 11, lastRow, lastCol)
dataRange.setFontColor("green")
var data = dataRange.getDisplayValues();
let dates=[];
for (let i=0; i < dates.length; i++ ) {
// console.log(dates[i])
if (dates[i] === new Date().toLocaleDateString()) {
dataRange.setBackground('pink')
} else if (dates[i]) {
// do sth
} else {
// maintain the current state
}
}
}
Does it need to be with scripts?? With conditional formatting that would be MUCH faster, easier and uploads constantly.
You can apply it to the entire sheet or to a specific range. Use this custom formula (change A1 with the top left formula of your range)
=if(A1="",FALSE,(A1 - Today()) < 0)
Get sure to set these conditions in the correct order (in these case it would be preferrable to be the past dates, the actual date and the close future dates). Like this:
Here you have a link to play with:
https://docs.google.com/spreadsheets/d/1zhEFRQwOyAYQwXfv5lYTjI7B-6fIfz1rgdCt3MGvzmI/edit?usp=sharing
Payment Tracker
function paymentTracker() {
const ss = SpreadsheetApp.getActive();
const sh = ss.getActiveSheet();
const rg = sh.getRange(2, 11, sh.getLastRow() - 1, sh.getLastColumn() - 10);
rg.setFontColor("black")
const vs = rg.getDisplayValues();
const d = new Date();
//Logger.log('y: %s,m: %s,d: %s', d.getFullYear(), d.getMonth(), d.getDate());
const dt = new Date(d.getFullYear(), d.getMonth(), d.getDate());
const dtv = dt.valueOf();
const dt3 = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 3);
const dt3v = dt3.valueOf();
vs.forEach((r, i) => {
let ds = r.map(ds => {
let t = ds.split('/');
//Logger.log(JSON.stringify(t))
let v = new Date(Number(t[2]), Number(t[1]) - 1, Number(t[0])).valueOf();
let diff3 = dt3v - v;
if (dt3v == v) {
return "purple";
} else if (dtv == v) {
return "green";
} else {
return "pink";
}
});
sh.getRange(i + 2, 11, 1, ds.length).setBackgrounds([ds]);
})
}

How do I leave the clicked point highlighted in dygraphs?

I am using the selected shapes to draw a larger diamond shape on my graph. When a user clicks a point. I display the data in another div, but I want to leave the clicked point highlighted. In other words, I want to 'toggle' data behind the points on and off and the clicked points need to show if they are included in the dataset. I believe I have seen this somewhere but I cannot find it. Is there a 'standard' way of leaving a clicked point in the 'highlight' state when you mouse away after clicking?
Here is my code. The pointClickCallback is getting the data through ajax and displaying it in another div. That part works. I just want to leave the point highlighted so I know which points I have clicked on.
I also need the point to revert back to normal when I click a second time. This is a toggle that allows me to select and unselect points.
EDIT: I found the interaction model example but when I add it to my code I lose my pointClickCallback functionality. I saw the call to captureCanvas and the interaction model structure.
var g = new Dygraph(document.getElementById('rothmangraph'), lines, {
//showRangeSelector: true,
title: "Personal Wellness Index (PWI)",
labels: ['Date', 'Index'],
color: ['#006699'],
valueRange: [0, 101],
axisLabelFontSize: 12,
drawPoints: true,
gridLineColor: "#aaaaaa",
includeZero: true,
strokeWidth: 2,
rightGap: 20,
pointSize: 4,
highlightCircleSize: 8,
series : {
Index: {
drawHighlightPointCallback : Dygraph.Circles.DIAMOND
},
},
axes: {
y: {
pixelsPerLabel: 20,
},
x: {
valueFormatter: function(ms) {
return ' ' + strftime('%m/%d/%Y %r',new Date(ms)) + ' ';
},
axisLabelWidth: 60,
axisLabelFormatter: function(d, gran) {
return strftime('%m/%d %I:%M %p',new Date(d.getTime())) ;
}
}
},
underlayCallback: function (canvas, area, g) {
var warning = g.toDomCoords(0,41);
var critical = g.toDomCoords(0,66);
// set background color
canvas.fillStyle = graphCol;
canvas.fillRect(area.x, area.y, area.w, area.h);
// critical threshold line
canvas.fillStyle = "#cc0000";
canvas.fillRect(area.x,warning[1],area.w,2);
// warning threshold line
canvas.fillStyle = "#cccc00";
canvas.fillRect(area.x,critical[1],area.w,2);
},
pointClickCallback: function(e,point) {
var idx = point.idx;
var line = lines[idx];
var sqltime = strftime('%Y-%m-%d %H:%M:%S',new Date(line[0]));
var dispdate = strftime('%m/%d %r',new Date(line[0]));
_secureAjax({
url: '/ajax/getDataPoint',
data: {'patient_id': pid, "rdate": sqltime},
success: function (result) {
// parse and add row to table if not exists.
var data = JSON.parse(result);
var aid = data['id'];
var indexCol = "#a9cced"
if (line[1] <= 65) indexCol = "#ede1b7";
if (line[1] <= 40) indexCol = "#e5bfcc";
var headerinfo = '<th class="'+aid+'"><span class="showindex" style="background-color:'+indexCol+'">'+line[1]+'</span></th>';
var fixdate = dispdate.replace(' ','<br>');
var headerdate = '<th class="'+aid+'">'+fixdate+'</th>';
// skip if already exists
var found = false;
var whichone = false;
$('#headerdate tr th').each(function(idx, item) {
if (fixdate == $(this).html()) {
found = true;
whichone = idx;
}
});
if (!found) {
$.each(data, function (idx, item) {
$('#' + idx).append('<td class="'+aid+'" style="width:70px">' + item + '</td>');
});
$('#headerdate tr').append(headerdate);
$('#headerinfo tr').append(headerinfo);
} else {
$('tr').each(function() {
$('.'+aid).remove();
});
}
}
});
}
});
}

syncfusion chart background line will be dotted line

I want my chart backgroud line will be dotted. Which property can i use for dotted in syncfusion? I tried but i coudn't do this. I don't know exactly which propertly will use for dotted line.
Here is my code:
control.AutoTempFileCleanUp = true;
control.OutputFormat = ImageProviderOutputFormat.DiskFile;
control.Model.Series.Clear();
ChartModel chartModel = new ChartModel();
ChartSeries chart = new ChartSeries(yAxisBar1LegendName, ChartSeriesType.Column);
chart.Text = yAxisBar1LegendName;
control.ChartArea.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode;
// = string.Format("");
control.ChartArea.PrimaryXAxis.Labels.Add(new ChartAxisLabel("", Color.Black, new Font("Arial", 10), 0, "", ChartValueType.Custom));
int counter = 1;
DoubleRange dr = new DoubleRange(1, 100);
foreach (DataRow row in ds.Tables[0].Rows)
{
double bar1Value = Convert.ToDouble(row[yAxisValueColumn1]);
chart.Points.Add(counter, bar1Value);
control.ChartArea.PrimaryXAxis.Labels.Add(new ChartAxisLabel(row["ModuleCode"].ToString(), Color.Black, new Font("Arial", 10), counter, "", ChartValueType.Custom));
counter++;
}
chart.PrepareStyle += new ChartPrepareStyleInfoHandler(series_PrepareStyle);
control.ChartArea.PrimaryXAxis.DrawGrid = false;
control.PrimaryXAxis.GridLineType.ForeColor = Color.DarkGray;
control.PrimaryYAxis.GridLineType.ForeColor = Color.DarkGray;
control.PrimaryXAxis.LineType.ForeColor = Color.DarkGray;
control.PrimaryYAxis.LineType.ForeColor = Color.DarkGray;
control.Text = chartHeader;
control.ChartArea.PrimaryYAxis.Title = yAxisText;
control.ChartArea.PrimaryXAxis.Title = xAxisText;
control.ChartArea.PrimaryXAxis.TitleAlignment = StringAlignment.Center;
control.ChartArea.PrimaryXAxis.IsVisible = true;
control.ChartArea.PrimaryXAxis.LabelAlignment = StringAlignment.Center;
control.ChartArea.PrimaryXAxis.VisibleRange.Min = 0;
control.ChartArea.PrimaryXAxis.VisibleRange.Max = counter;
control.ChartArea.PrimaryXAxis.VisibleRange.Interval = 1;
control.ChartArea.PrimaryYAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Center;
control.ChartArea.PrimaryYAxis.GridDrawMode = ChartAxisGridDrawingMode.Default;
//control.PrimaryXAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Center;
control.PrimaryXAxis.Font = new Font("Arial", 10F);
control.PrimaryYAxis.Font = new Font("Arial", 10F);
counter = 0;
foreach (ChartSeries series in control.Series)
{
Color color;
if (counter == 0)
{
color = Color.Green;
else
{
color = Color.Red;
}
series.Style.Interior = new BrushInfo(color);
series.Style.Border.Color = Color.DarkGray;
series.Style.Font.Bold = true;
series.Style.TextColor = Color.Black;
series.Style.TextOrientation = ChartTextOrientation.Left;
series.Style.TextFormat = "{0}";
counter++;
}
control.Width = 650;
control.Series3D = false;
control.ShowLegend = false;
control.BorderStyle = BorderStyle.None;
control.BorderAppearance.SkinStyle = ChartBorderSkinStyle.None;
//control.Legend.Alignment = ChartAlignment.Far;
}
Here is my chart image:
Thanks for using syncfusion products.
We have analyzed your query. If you want to customize the grid lines in axis, then you can use the “DashStyle” property in GridLineType which property is used to change the line style. And you can also specify the grid line style as Dash, DashDot, DashDotDot, Dot, Solid in axis.
And please find the below code snippet
this.ChartWebControl1.PrimaryYAxis.GridLineType.DashStyle = System.Drawing.Drawing2D.DashStyle.DashDot;
And we have also prepared a sample for your reference in ASP.NET classic platform and attached in the below location.
Sample Link : http://www.syncfusion.com/downloads/support/directtrac/160606/ze/Sample1273790903
Please find the output of the sample below:
And also we wish to let you know that the above mentioned property is also applicable for chart control in windows forms, ASP.NET classic and ASP.NET MVC classic platforms.
Please contact us via syncfusion support, if you have any queries related to using syncfusion products.

Unity3d Windows Phone Live Tile

How do we implement live tile in Unity3d Windows Phone??
I want the live tile show the current high score.
I have tried this:
#if UNITY_METRO
UnityEngine.WSA.Tile liveTile = Tile.main;
//then we update the tile with our latest high score
//the first three strings are for images (medium,wide,large)
//the last string is for text to display
//you can also pass in an XML file to describe the tile
liveTile.Update("","","", "Best round time: " + PlayerPrefs.GetInt("angka", 0));
#endif
I don't work for Prime 31. I attended the Unity 5 Roadshow and found out Prime 31 is giving away their Windows Phone and Store plug-ins for free (not sure for how long, they have a deal with Microsoft).
prime31.com
They do have support for titles in their Metro Essentials Plugin
Here is the code that is included in the demo...
if( GUILayout.Button( "Update Application Live Tile (standard)" ) )
{
// first, create the tile data
var tileData = new StandardTileData();
tileData.backContent = "I'm on the back";
tileData.backTitle = "BACK TITLE";
tileData.title = "Live Tile Title";
tileData.count = 12;
// now update the tile
Tiles.updateApplicationTile( tileData );
}
if( GUILayout.Button( "Create Live Tile (Flip)" ) )
{
// first, create the tile data
var tileData = new FlipTileData();
tileData.backContent = "Back of the Tile";
tileData.backBackgroundImage = "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Breastfeeding-icon-med.svg/202px-Breastfeeding-icon-med.svg.png";
tileData.backTitle = "Back Title Here";
tileData.backgroundImage = "http://cdn.memegenerator.net/instances/250x250/38333070.jpg";
tileData.smallBackgroundImage = "Assets/Tiles/FlipCycleTileSmall.png";
tileData.title = "Flip Tile Title";
tileData.wideBackBackgroundImage = "http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-91-03-metablogapi/5775.WideTileAfter_5F00_49305C14.jpg";
tileData.wideBackContent = "Wide Back Content";
tileData.wideBackgroundImage = "Assets/Tiles/FlipCycleTileLarge.png";
tileData.count = 3;
// now update the tile
Tiles.createOrUpdateSecondaryLiveTile( "flippy-tile", tileData );
}
if( GUILayout.Button( "Create Live Tile (Iconic)" ) )
{
// first, create the tile data
var tileData = new IconicTileData();
tileData.iconImage = "http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Breastfeeding-icon-med.svg/202px-Breastfeeding-icon-med.svg.png";
tileData.backgroundColor = Prime31.WinPhoneEssentials.Color.colorFromARGB( 255, 40, 255, 40 );
tileData.smallIconImage = "http://cdn.memegenerator.net/instances/250x250/38333070.jpg";
tileData.wideContent1 = "Wide content 1";
tileData.wideContent2 = "Wide content 2";
tileData.wideContent3 = "Wide content 3";
tileData.title = "Live Tile Title";
tileData.count = 3;
// now update the tile
Tiles.createOrUpdateSecondaryLiveTile( "my-tile", tileData );
}

Titanium Appcelerator iPhone App - App crashes when the table view is scrolled close to 1000th record and slows down when it starts scrolling

We have a sample app that loads 10 records each from the db and shows in a table vioew. The next ten records are taken when the scroll reaches the bottom (like the sample of dynamic scroll view in kitchen sink and following the same sample code). However the app scrolling becomes slower and slower when the no of records increases and then crashes when we were showing close to 1000th record. We have even more records to show (10000) and all the rows shows an 50X50 image and two texts.
if (search.value != null && search.value != ''){
dbrows = db.execute('select id, name, scientificname from siteRecords where name like \'%' + search.value + '%\' order by commonname limit 10 offset ' + lastRow);
}else{
dbrows = db.execute('select id, name, scientificname from siteRecords order by name limit 10 offset ' + lastRow);
}
tsEnd = new Date;
var duration = tsBegin.getTime() - tsEnd.getTime();
perfTableView.appendRow({title:"To fetch the record from 0 to " + (lastRow + 20) + " took: " + duration + " ms"});
tsBegin = new Date;
var rowCount = 0;
while (dbrows.isValidRow()) {
var row;
if( dbrows.fieldByName('name')[0] != curheader || initHeader == 0){
initHeader = 1;
curheader = dbrows.fieldByName('name')[0];
row = Ti.UI.createTableViewRow({height:55,backgroundColor:'#ffffff',backgroundSelectedColor:'#eeee33',hasChild:true,className:'birds',header:curheader});
index.push({title:curheader,index:rowNumber });
} else {
row = Ti.UI.createTableViewRow({height:55,backgroundColor:'#ffffff',backgroundSelectedColor:'#eeee33',hasChild:true,className:'birds'});
}
var lblBirdID = Ti.UI.createLabel({
text: dbrows.fieldByName('id'),
color: '#000000',
textAlign:'left',
left:4,
top:8,
height:100,
font:{fontWeight:'bold',fontSize:10},
visible:false
});
row.add(lblBirdID);
media = dbrows.fieldByName('scientificname').replace(' ', '_') + '.jpg';
var path = Titanium.Filesystem.resourcesDirectory + 'Birds/images/'
if (Titanium.Filesystem.getFile(path,media).exists())
{
var f;
if (isAndroid){
f = '../images/' + media;
}else{
f = Ti.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory,'Birds/images/' + media);
}
var imgBird = Ti.UI.createImageView({
image:f,
left:4,
height:50,
width:50
});
row.add(imgBird);
}else{
var f;
if (isAndroid){
f = '../images/no_bird.jpg';
}else{
f = f = Ti.Filesystem.getFile(Titanium.Filesystem.resourcesDirectory,'Birds/images/no_bird.jpg');
}
var imgBird = Ti.UI.createImageView({
image:f,
left:4,
height:50,
width:50
});
row.add(imgBird);
}
var lblBirdName = Ti.UI.createLabel({
text: dbrows.fieldByName('name'),
color: '#000000',
textAlign:'left',
left:60,
top:8,
height:20,
font:{fontWeight:'bold',fontSize:16}
});
row.add(lblBirdName);
var lblBirdScientificName = Ti.UI.createLabel({
text: dbrows.fieldByName('scientificname'),
color: '#000000',
textAlign:'left',
left:60,
top:26,
height:20,
font:{fontSize:11}
});
row.add(lblBirdScientificName);
birdRows[rowNumber] = row;
rowCount = rowCount + 1;
rowNumber = rowNumber + 1;
dbrows.next();
}
dbrows.close();
db.close();
if (rowCount == 20){
lastRow = lastRow + 20;
}else{
lastRow = lastRow + rowCount;
}
birdTableView.setData(birdRows);
birdTableView.index = index;
tsEnd = new Date;
duration = tsBegin.getTime() - tsEnd.getTime();
perfTableView.appendRow({title:"To loop through the DB rows and to create table rows took: " + duration + " ms"});
}
Have you tried unloading items at the top, as items are added to the bottom (and vice versa)? Doing something like this would mean there are never more than say 100 rows at any one time.
Also, if possible, use a standard row instead of a custom row. A standard row is MUCH more performant than a custom one.