The spiderweb plot created using the code below renders well within the Rstudio plot panel as shown below.
However, it appears as line plot when rendered using Shiny as below.
library(rCharts)
shinyServer(function(input,output){
output$plot <- renderChart2({
plot <- Highcharts$new()
table = data.frame(id = c("a1","g3","k5","y9","z11"),
value = c(252,345,421,189,236))
plot$chart(polar = TRUE, type = "line")
plot$xAxis(categories=table$id, tickmarkPlacement= 'on', lineWidth= 0)
plot$yAxis(gridLineInterpolation= 'polygon', lineWidth= 0, min= 0)
plot$series(data = toJSONArray2(table[,c("id","value")], json = F, names = F),
name = "Series", pointPlacement="on")
plot
})
})
HTML:
<head>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="shared/shiny.css" type="text/css" />
<script src="shared/shiny.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
</head>
<body>
<div id="plot" class="shiny-html-output rChart highcharts" style="width: 4px; height: 60px"></div>
<body>
Any ideas to have the plot displayed in Shiny as it should be? The plot is rendered ok according to related post but the difference is that in my case the UI is built entirely using HTML while they use ui.R instead.
What is needed is to add
<script src="js/highcharts-more.js" type="text/javascript"></script>
and it now works.
Related
code below.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['information technology'],
['web'],
['development']
]
);
var options = {
wordtree: {
format: 'implicit',
// word: ''
}
};
var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
</body>
</html>
issue:
expected three items to be rendered, however, we now have four including an erroneous "technology" while view source indicates correct rendering.
tested browser; firefox and chrome.
I'm having trouble specifying a custom SRID with django-leaflet.
The documentation on projections isn't very detailed, and mentions only briefly:
By default, django-leaflet will try to load the spatial reference from
your static files at “proj4js/{{ srid }}.js”. If it fails, it will
eventually rely on spatialreference.org.
I followed the django-leaflet installation guidelines, and added the SRID used in my data in PostGIS as follows:
LEAFLET_CONFIG = {
'SRID': 2056, # See http://spatialreference.org
'DEFAULT_CENTER': (46.800663464, 8.222665776),
'DEFAULT_ZOOM': 7,
'MIN_ZOOM': 1,
'MAX_ZOOM': 20,
}
But this raises the following errors in Chrome:
uncaught exception: Leaflet and proj4 must be loaded first
The script from “http://127.0.0.1:8000/static/proj4js/2056.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
Loading failed for the <script> with source “http://127.0.0.1:8000/static/proj4js/2056.js”.
uncaught exception: No projection definition for code EPSG:2056
I have leaflet in INSTALLED_APPS, and also load proj4.js and proj4leaflet.js in my page's head.
<!DOCTYPE html>
{% load static %}
{% load leaflet_tags %}
<html lang="en">
<head>
{% leaflet_js %}
{% leaflet_css %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4leaflet/1.0.2/proj4leaflet.min.js"></script>
<meta charset="utf-8">
<style>
.leaflet-container {
width: 600px;
height: 400px;
}
#specialbigmap {
height: 800px;
}
.django-leaflet-raw-textarea {
width: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
function map_init_basic (map, options) {
$.getJSON( "http://127.0.0.1:8000/en/api/mydata/?name=my_data1", function( data ) {
mygeojson = data.results
L.geoJSON(mygeojson).addTo(map);
});
}
</script>
{% leaflet_map "my_django_leaflet_map" callback="window.map_init_basic" %}
</body>
</html>
I tried running collectstatic as suggested here, but the errors persist (and I doubt whether collectstatic should even be used in development). Any suggestions to make this work?
I've got a simple Cycle2 slideshow that reads images from a server folder and displays them full height and centered on a web page. The images are loaded through an Ajax call which returns any new files it finds, it's called at page load and subsequently at programmed intervals. I use a session variable to keep track of the currently used files. I use the Cycle2 "add" command and the "Center" add-on as I have different sized images to display.
It works nicely except that after 'cycle' initialization any new slides added are not centered...
I know that Cycle2 adds inline styling but it only centers the images on initialization. It should be possible to call the centerHoriz and centerVert programatically when adding the new slides but can't work out how to at the same time as the 'add' command? Here is my code:
<?php
/*
* Template Name: Slideshow
*/
?>
<?php
session_start();
$_SESSION['curfiles'] = array();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slideshow</title>
<style type="text/css">
.slideshow {
width: 80%;
margin: auto;
border: 1px solid #bbb;
background: #ffc;
}
#media screen and (max-width: 1164px) {
.label {font-size: 2vw;}
.textbox {font-size: 1.5vw;}
.cycle-slide {width:100%;}
.slideshow {width: 95%;}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
<script type="text/javascript">
function loadSlides() {
$.ajax({
type: "GET",
url: "load.php"
}).done(function(response) {
var temp_images = eval("(" + response + ")");
for(ti in temp_images){
$('.slideshow').cycle('add','<img src="/files/display/' + temp_images[ti] + '" alt="">');
}
});
}
window.setInterval(function(){loadSlides()}, 5000);
jQuery(document).ready(function($){
loadSlides();
$('.slideshow').cycle(
{
next: '.slideshow'
});
});
</script>
</head>
<body>
<div class="slideshow"
data-cycle-fx="scrollHorz"
data-cycle-timeout="800000"
data-cycle-speed="700"
data-cycle-center-horz="true"
data-cycle-center-vert="true"
data-cycle-pause-on-hover="true"
>
</div>
</body>
</html>
Can the following href="#" be called automatically?
<a id="loadBtn" href="#">Do stuff</a></p>
Thanks!
(Update) In the following facebook gallery launcher:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<script type="text/javascript">
$(document).ready(function () {
$('#loadBtn').click(function () {
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
return false;
});
});
</script>
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<p><a id="loadBtn" href="#">Get photo</a></p>
<div id="albumsContainer"></div>
</body>
</html>
Essentially to get to the action faster rather than having msc bits of text to click first.
you can set href attribute with whatever value you want as per below code:
$('#loadBtn').attr('href','#');
Not sure whether the href='#' is just for example purposes or what you're putting in your final code.
(1) If you want to scroll to the top of the page, you can either use $('body').scrollTop(0) or animate it a bit with something like $('html, body').animate( {scrollTop : 0 }, 200); (If you want to animate it, just attach it to #loadBtn's click event and be sure to return false, so the anchor won't jump to the top and override your animation.)
If you want, you can also set window.location.hash so the hash location will be recorded.
(2) If you want to simulate a click on the link, you can use .trigger(), e.g.: $('#loadBtn').trigger('click');
I think following code will work for you:
$("#loadBtn").ready(function(){
$(this).click();
});
Also try this in your onload function:
document.getElementById('yourLinkID').click();
// Automatically href will be called
Thanks for your pointers. It lead me to the idea of just rearranging the javascript so that the code was executed without need to click anything:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<!--p><a id="loadBtn" href="#">Get photo</a></p-->
<div id="albumsContainer"></div>
<script type="text/javascript">
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
</script>
</body>
</html>
I've tried xtk release 2 as well as built xtk.js from source and there seems to be an issue (that wasn't there in release 1) when xtk is used alongside jquery.
No matter what I do, I always get a
"Uncaught Error: Could not find the given container or it has an undefined size."
in the javascript console.
To reproduce the issue, I modified the sample html page on the xtk wiki, reported here for convenience:
<html>
<head>
<title>XTK TEST COMPILED!</title>
<script type="text/javascript" src="xtk.js"></script>
<script type="text/javascript">
var run = function() {
var r = new X.renderer('r');
r.init();
var cube = new X.cube([0,0,0],10,10,10);
r.add(cube);
r.render();
};
</script>
<body onload="run()">
<!-- the container for the renderer -->
<div id="r" style="background-color: #000000; width: 100%; height: 100%;"></div>
</body>
and changed it to
<html>
<head>
<title>XTK TEST COMPILED!</title>
<script type="text/javascript" src="xtk.js"></script>
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var r = new X.renderer('r');
r.init();
var cube = new X.cube([0,0,0],10,10,10);
r.add(cube);
r.render();
});
</script>
<body>
<!-- the container for the renderer -->
<div id="r" style="background-color: #000000; width: 100%; height: 100%;"></div>
</body>
If you test this page (I tried Chrome and Firefox), you'll get the error reported above.
Any ideas on how to tackle this? I'm investigating...
I am glad it works now! You could check out the (unreleased) demo where we use JQuery as well:
http://demos.goxtk.com/evl/
Just for a test: are you sure it worked different with XTK r1? I don't think anything changed on that level..