i want embed a nplot into shiny, the server.R like
shinyServer(function(input, output) {
output$testChart <- renderChart2({
n1<-nPlot(Freq ~ Var1, data=speedTable, type="discreteBarChart", color="blue")
n1$xAxis(axisLabel = "Heading")
n1$yAxis(axisLabel = "label", width = 40)
n1$set(title = "Title")
n1$addParams(dom = 'testChart')
return(n1)
})
})
and my index.html like this:
<html>
<head>
<script src="shared/jquery.js" type="text/javascript"></script>
<script src="shared/shiny.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<body>
<br />
<br />
<hr />
<div class="rChart nvd3" id="testChart"></div>
</body>
</html>
but in the page dosenot show anything?
Your help will be much appreciated
Hi you have to download D3 and NVD3 and include those into your HTML :
<script src="d3.min.js"></script>
<link href="nv.d3.min.css" rel="stylesheet">
<script src="nv.d3.min.js"></script>
And for the graph do something like that :
<div id="testChart" class="shiny-html-output rChart nvd3"></div>
<style>.nvd3-svg { margin: 0px; padding: 0px; height: 100%; width: 100%; }</style>
Related
How can I use Ace text editor to open local files with extensions such as HTML, CSS, and js? I imagine there is a way to set up a button that opens your file selector, you can open one, and it opens the file for you to edit. Here is the code I use right now for Ace.
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
// editor.setTheme("ace/theme/themeHere")
// editor.session.setmode("ace/mode/languageHere")
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<!-- Put editor language e.g.: Ace HTML Editor -->
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
<!-- Defines character set -->
<link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shorcut icon" href="../Other/html5favicon.ico">
<!-- Favicon -->
<script type="text/javascript" src="../JavaScript/index.js"></script>
<!-- JavaScript Index -->
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="button" id="openbtn" onclick="openCode()" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<input type="button" id="togglebtn2" onclick="toggleVisibility2()" value="Toggle">
<div id="editor"><!DOCTYPE html>
<html>
<head lang="">
<meta charset="">
<link type="text/css" rel="stylesheet" href="">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="">
<!-- Favicon -->
<title></title>
</head>
<body>
<p>Ace HTML Editor</p>
</body>
</html></div>
<!-- In this div, put filler text -->
<!-- use < for < -->
<script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
You can use the file input element as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 3em;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="file" id="openbtn" onchange="openCode(this.files)" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<div id="editor"></div>
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajaxorg.github.io/ace-builds/src/ext-modelist.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor", {
theme: "ace/theme/monokai",
mode: "ace/mode/html",
placeholder: "choose file to edit"
});
function openCode(files) {
var file = files[0]
if (!file) return;
var modelist = ace.require("ace/ext/modelist")
var modeName = modelist.getModeForPath(file.name).mode
editor.session.setMode(modeName)
reader = new FileReader();
reader.onload = function() {
editor.session.setValue(reader.result)
}
reader.readAsText(file)
}
</script>
</body>
</html>
I'm using angular to make page identification before access to the app main,
in the templateUrl: login.html i cant do anything !
note: when I called the ng-app="myApp" will give this error :
Uncaught Error: [$injector:modulerr]
here my code JS:
angular.module('training')
.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.when('/login',{
templateUrl: 'login.html',
controller: 'loginCrtl'
});
})
.controller('loginCrtl',['$scope','$timeout','apiservice','$routeProvider', function($scope,$timeout,apiservice,$routeProvider){
$scope.ppp= function(){
alert('ok');
}
}])
.controller('mainCtrl'......
here my login.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.min.js"></script> -->
<script src="controllers/app.js"></script>
<script src="services/apiService.js"></script>
<script src="controllers/mainCrtl.js"></script>
</head>
<body ng-controller="loginCrtl">
<div class="center" style="width: 500px; height: 300px; background-color: #e5e5e5;">
Veuillez authentifier:<br><br>
Login: <input type="text" id="login"><br><br>
Password: <input type="text" id="pass">
<br><br>
<button id="ValidAccess" ng-click="ppp()">ok</button>
</div>
</body>
<style >
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</html>
my index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Planni</title>
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap.min.css">
<link rel="stylesheet" href="mystyle/bootstrap-datepicker.css">
<link rel="stylesheet" href="mystyle/jquery-ui.css">
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="public/bootstrap-datepicker.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/moment/min/moment-with-locales.min.js"></script>
<script src="public/daypilot/daypilot-all.min.js"></script>
<script src="public/bootstrap-tokenfield.js"></script>
<script src="public/bootstrap.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.js"></script> -->
<script src="controllers/app.js"></script>
<script src="services/apiService.js"></script>
<script src="controllers/mainCrtl.js"></script>
</head>
<body data-ng-app="training" data-ng-controller="mainCtrl">
....
</body>
</html>
Where your ng-app ? module of you is training call ng-app ='training' not ng-app='myApp'
Promblem of you is not setting it use like this
angular.module('training',['ngRoute'])
Here is set a module
angular.module('training',[])
and here is get a module
angular.module('training')
EDIT
You use like this
angular.module('training',['ngRoute'])
.controller('mainCtrl',mainCtrl)
.controller('loginCtrl',loginCtrl)
function mainCtrl(){
//
}
function loginCtrl(){
//
}
or if you have another module contain loginctr use like this
angular.module('anothermodule',[])
.controller('loginCtrl',loginCtrl)
function loginCtrl(){
//
}
And in training app include it
angular.module('training',['ngRoute','anothermodule'])
first of all, you need to add the ng-app directive to your html file. my recommendation is to add it inside html tag
<html ng-app="training">
then in the js, when you are initializing the module, need to add empty square brackets to the module
angular.module('training',[])
I assume for the router you are using ngRoute. in that case, you need to inject the route module to your training module
angular.module('training',['ngRoute'])
I'm trying to create a map inside a bootbox dialog. Here is the code.
bootBox.dialog({ title:"test", message = "<div><google-map latitude='37.77493' longitude='-122.41942'></google-map></div>" });
It creates the dialog, creates the maps box with Google logo at bottom but do not load the map. It remains gray.
I found that if I open or close Chrome Developer Tools after the dialog has displayed the map is rendered.
Any suggestion?
Edit after comments:
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/global/plugins/bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/global/plugins/bootbox/bootbox.min.js"></script>
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<button onclick="ft()">Open Map</button>
<script>
var ft = function(){
bootbox.dialog({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'});
}
</script>
</body>
Set the height of google-map for it to appear:
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'})
</script>
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
</head>
<body>
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({
title: 'test',
message: '<div><google-map latitude="37.77493" longitude="-122.41942"></google-map></div>'
})
</script>
</body>
codepen
I am trying to plot a dynamic map with leaflet on a shiny app using an HTML interface but when i get the map it is static
When doing it the simple way using only the R interface it works fine
Is there a way of showing the map dynamically using index.html and not ui.r?
This is what I am trying to get using only the R interface
app <- shinyApp(
ui <- fluidPage(leafletOutput('myMap')),
server <- function(input, output) {
map <- your.map
output$myMap <- renderLeaflet(map)
}
)
print(app)
This is my "index.html" file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="application/shiny-singletons"></script>
<script type="application/html-dependencies">json2[2014.02.04];jquery[1.11.1];shiny[0.12.2];htmlwidgets[0.5];leaflet[0.7.3];leafletfix[1.0.0];leaflet-label[0.2.2];leaflet-binding[1.0.1.9000];bootstrap[3.3.1]</script>
<script src="shared/json2-min.js"></script>
<script src="jquery-1.11.1/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>
<script src="htmlwidgets-0.5/htmlwidgets.js"></script>
<link href="leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<script src="leaflet-0.7.3/leaflet.js"></script>
<link href="leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
<link href="leaflet-label-0.2.2/leaflet.label.css" rel="stylesheet" />
<script src="leaflet-label-0.2.2/leaflet.label.js"></script>
<script src="leaflet-binding-1.0.1.9000/leaflet.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<script src="shared/bootstrap/shim/html5shiv.min.js"></script>
<script src="shared/bootstrap/shim/respond.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="myMap" style="width:100%; height:400px" class="leaflet html-widget html-widget-output"></div>
</div>
</body>
</html>
OK I worked it out
Should om made my server function reactive
I have seen similar posts ..I have modified my code and currently using this Code to add color to Hyperlink Text..My Hyperlink generates at runtime in HTML output..I have multiple css ..I think css effects are overriding
a:link
{
color: red;
color: inherit;
text-decoration:underline;
}
also tried this one :
a:link
{
color: #fff;
text-decoration:underline;
}
My Script:
function (response) {
obj =response.d;
var output = "<table class='table'><tr><th>Serial No.</th><th>UFZillaID</th><th>MZillaID</th><th>Status</th></tr>";
for (var x = 0; x < obj.length; x++) {
output += "<tr><td >" + obj[x].EMID + "</td></tr>";
}
output += "</table>";
$("#result").append(output);
this is my markup
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="UFZillaErrorStatus.aspx.cs"
Inherits="Dashboard.Web.UFZillaErrorStatus" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>UFZillaErrorStatus</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800|Open+Sans+Condensed:300,700"
rel="stylesheet" />
<link href="css/home.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/themes/ui-lightness/jquery-ui-1.10.1.custom.css" rel="stylesheet"
type="text/css" />
<link href="css/assets/style.css" rel="stylesheet" type="text/css" />
<link href="js/common/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="js/common/jquery.jqGrid-4.5.4/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/common/jquery/json2.js" type="text/javascript"></script>
<script src="js/common/jquery/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/common/jquery.jqGrid-4.5.4/plugins/grid.postext.js" type="text/javascript"></script>
<script src="js/JqueryFileupload/jquery.fileupload.js" type="text/javascript"></script>
<script src="js/JqueryFileupload/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="js/common/jquery/jquery.alphanumeric.js" type="text/javascript"></script>
<script src="js/dashboard/UFZillaErrorStatus.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="content1" style="background: 0 0 0 #FFFFF">
<div id="uferrdivs" align="center">
<table>
<tr>
<td>
Product
</td>
</tr>
<tr>
<td>
<select id="proselct">
</select>
</td>
</tr>
</table>
<center>
<div>
<div id="result" style="background-color: #F5F5F5; width: 800px; margin-top: 50px;">
</div>
</div>
</center>
</div>
</div>
</form>
</body>
</html>
..Underline effect appears..But color not changing ..I have tried other method .But Not working ...
Any Suggestion would be helpful
Remove:
color: inherit;
As this is overriding your colour that you want.
Ensure that your tag contains
href="#"
At minimum.
Try simplest way
use this css
a, a * {
color: #FFF !important; // important will avoid if any other css try to override it
}
If your background color is WHITE, link will not be visible. Because you set the same color for link
color: #FFF;
Try with different color
Try to remove
color: inherit;
and see it will work.
Simple demo of both
Fiddle Demo using inherit
Fiddle Demo without using inherit