<script type="text/javascript" src="raphael.js"></script>
<script>
var paper = new Raphael("holder", 320, 200);
function testPaper(){
var width10 = paper.width * 0.1;
var height10 = paper.height * 0.1;
var width80 = paper.width * 0.8;
var height80 = paper.height * 0.8
var c = paper.rect( width10, height10, width80, height80, Math.min( width10, height10 ) );
}
</script>
</head>
<body onload = "testPaper()">
<div id="holder"></div>
</body>
What's wrong with the above code? I've been trying to get Raphael working for over an hour now & it always complains:
Uncaught TypeError: Cannot read property 'x' of undefined raphael.js:11
The script that uses Raphael is probably running before the "holder" element has been created.
Either create the Raphael in a ready/onload event or trivially arrange the HTML like so:
<body>
<div id="holder"></div> <!-- also use correct closing tag -->
<script src="raphael.js"></script>
<script>
var paper = new Raphael("holder", 320, 200);
// ..
</script>
</body>
I had the same problem using draw2d library in Angular. I couldn't initialize the canvas. It's worth to note that the element MUST have the same name as the initialized canvas.
Related
I am working in GeoDjango. I am trying to add leaflet group from here. I copied files from the dist folder to my folder with the static files and imported them into HTML file. Anyway I have some problem with this part of code:
//GROUP LAYER
var osm =
'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
var baseLayers = {
"OSM":osm
}
var groupedOverlays = {
"layers": {
"layer1": datasets_buildings,
"layer2": datasets_roads,
"layer3": datasets_railways,
"layer4": datasets_natural
}
};
L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
When I typed this, I don't even get my layers on the map, I get just the empty leaflet map and without this part of the code, I get it.
Also, I would like to make functionality to this layer group which allows only one layer to be active.
This is all my code:
<html lang="en">
{% load static %}
{% load leaflet_tags %}
<head>
{% leaflet_js %}
{% leaflet_css %}
<style type="text/css">
#gis {
width: 100%;
height: 870px;
}
</style>
<link rel="stylesheet" type = 'text/css' href="{% static 'maps/dist/leaflet.groupedlayercontrol.css' %}">
<script type="text/javascript" src="{% static 'maps/dist/leaflet.ajax.js'%}"></script>
<script type="text/javascript" src="{% static 'maps/dist/leaflet.groupedlayercontrol.js' %}"></script>
</head>
<body>
<script type="text/javascript">
function our_layers(map,options){
//buildings
var datasets_buildings = new L.GeoJSON.AJAX("
{% url 'buildings_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
//roads
var datasets_roads = new L.GeoJSON.AJAX("{% url 'roads_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
//railways
var datasets_railways = new L.GeoJSON.AJAX("{% url 'railways_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
//natural
var datasets_natural = new L.GeoJSON.AJAX("{% url 'natural_json_data' %}",{
onEachFeature : function (feature, layer) {
layer.bindPopup(feature.properties.name.toString())
}
});
datasets_natural.addTo(map);
datasets_railways.addTo(map);
datasets_roads.addTo(map);
datasets_buildings.addTo(map);
//GROUP LAYER
var osm = 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
var baseLayers = {
"OSM":osm
}
var groupedOverlays = {
"layers": {
"layer1": datasets_buildings,
"layer2": datasets_roads,
"layer3": datasets_railways,
"layer4enter code here": datasets_natural
}
};
L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
}
</script>
{% leaflet_map "gis" callback="window.our_layers" %}
</body>
</html>
And the error when I get in the console when I go on inspect is:
leaflet.js:5 Uncaught TypeError: Cannot create property '_leaflet_id' on string 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png'
at Object.n [as stamp] (leaflet.js:5)
at e._addLayer (leaflet.groupedlayercontrol.js:131)
at e.initialize (leaflet.groupedlayercontrol.js:26)
at new e (leaflet.js:5)
at Function.L.control.groupedLayers (leaflet.groupedlayercontrol.js:373)
at Object.our_layers [as callback] ((index):96)
at Function.L.Map.djangoMap (leaflet.extras.js:234)
at loadmap ((index):112)
Thank you in advance :)
I found a mistake. I knew it was stupid, but I lost so much time on this and I posted a question..
Anyway, the line:
var osm = 'http://{s}.tile.openstreetmap.org/{z}{y}{x}.png';
should be replace with this line:
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}{y}{x}.png');
i am new here and trying add a image slider in my webpage. but i have tried several codes, the problem is my IE just showing only first image. then there is no image. MY IE is IE 11 and i am using netbeans8.0.2 and xampp.
what is the problem of not showing all the images in the slide?
here is the code:
<!DOCTYPE html>
<html>
<head>
<title>image slider!</title>
<script type="text/javascript">
var im1 = new Im();
im1.src = "1.jpg";
var im2 = new Im();
im2.src = "2.jpg";
var im3 = new Im();
im3.src = "3.jpg";
var im4 = new Im();
im.src = "4.jpg";
var im5 = new Im();
im5.src = "5.jpg";
</script>
</head>
<body>
<center>
<img src="slides/1.jpg" name="slider1" width=800 height=380 />
<script type="text/javascript">
var i=1;
function slidimage()
{
document.images.slider1.src = eval("im"+i+".src");
if (i<5)
{
i++;
}
else
{
i=1;
}
setTimeout("slidimage()",2000);
}
slidimage();
</script>
</center>
</body>
</html>
i have got this code from another post in stackoverflow by amin
sorry for the copy.
I am trying to use Raphael and jQuery UI. A very simple example of my problem involves a simple button which opens a jQuery dialog.
Inside that dialog I am using a Raphael paper to draw a list of texts from an array, overlaid by some transparent rectangles assigned with a click event.
I don't know how to create a jsfiddle for this example, therefore pasting my code below.
First, the html part:
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.theme.min.css"/>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.3.min.js"></script>
<script type="text/javascript" src="js/raphael-2.1.2.min.js"></script>
<script type="text/javascript" src="js/jscode.js"></script>
</head>
<body>
<div><button id="fireit">Open</button></div>
<div id="content"></div>
</body>
</html>
Next, the jscode.js part:
$( function() {
$("#content").dialog({
position: {my: "left top", at: "left+5px top+40px", of: window},
title: "A title",
width: 350,
height: 375,
resizable: false,
closeOnEscape: true,
autoOpen: false
});
var paper_content = Raphael("content", 300, 30);
var info = ["foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo", "foo"];
paper_content.setStart();
var texts = paper_content.setFinish();
function print_texts() {
texts.remove();
var i;
var row = 10;
paper_content.setStart();
for (i = 0; i < info.length; i++) {
paper_content.text(25, row, info[i])
.attr({'text-anchor': 'start', 'font-size': '14px'});
row += 20;
}
row = 10;
var somerect;
for (i = 0; i < info.length; i++) {
somerect = paper_content
.rect(5, row - 10, 500, 20)
.attr({fill: "#acadea", 'stroke-opacity': '0.5', 'fill-opacity': 0.5});
somerect.id = i;
somerect.click(function() {
alert(info[this.id]);
})
row += 20;
}
texts = paper_content.setFinish();
}
$("#fireit").click(function() {
print_texts();
$(paper_content.canvas).height(texts.getBBox().height + 20);
$("#content").dialog("open");
})
});
The click function triggers the print_texts() function, and since what Raphael printed is taller than the paper, the paper canvas gets resized.
The problem appears when firing the button: the texts printed by Raphael are not where they were supposed to be...!
A second click on the button magically arranges them in the right order.
Now the question: how can I overcome this? I need to have the correct order from the first click.
Thanks in advance for any hint,
Adrian
As usual, once obtaining a minimal example, the answer pops up by itself.
The point was to first open the dialog and only then to run the other instructions:
$("#fireit").click(function() {
$("#content").dialog("open");
print_texts();
$(paper_content.canvas).height(texts.getBBox().height + 20);
})
I am trying to get the selected value of a Google Table Chart. When the chart content is not filtered using the string filter, it returns the index of the selected row according to the DataTable, but when it is filtered using the string filter, it doesn't returns the correct issue.
To replicate the issue please do the following code
1. Run the below code
Select Aaron in the table. A message box will display its index as 5.
Type letter 'A' in the string filter. Now select the Aaron, it will return 0 which is a bug.
It should return the index of the row in the data table for 'Aaron' which is 5
<!DOCTYPE html>
<html>
<head>
<title>Google Developers</title>
<link rel="stylesheet" type="text/css" href="/_static/07491c0cdc/css/screen-docs.css" />
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400" type="text/css">
<script src="/_static/07491c0cdc/js/prettify-bundle.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script id="jqueryui" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" defer async></script>
<script src="http://www.google.com/jsapi?key=AIzaSyCZfHRnq7tigC-COeQRmoa9Cxr0vbrK6xw"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="/_static/07491c0cdc/js/framebox.js"></script>
</head>
<body class="docs slim framebox_body">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="stringFilter_dashboard_div" style="border: 1px solid #ccc">
<div id="stringFilter_control_div" style="padding-left: 2em"></div>
<div id="stringFilter_chart_div"></div>
</div>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart', 'table', 'gauge', 'controls']});
google.setOnLoadCallback(apiLoaded);
function apiLoaded() {
drawStringFilter();
}
function drawStringFilter() {
var dashboard = new google.visualization.Dashboard(
document.getElementById('stringFilter_dashboard_div'));
var control = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'stringFilter_control_div',
'options': {
'filterColumnIndex': 0
}
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'stringFilter_chart_div',
'options': {'height': '25em', 'width': '20em'}
});
google.visualization.events.addListener(chart,'select',tableSelectHandler);
function tableSelectHandler(){
var selectedItem = chart.getChart().getSelection()[0];
alert(selectedItem.row);
}
var data = google.visualization.arrayToDataTable([
['Name', 'Age'],
['Michael' , 12],
['Elisa', 20],
['Robert', 7],
['John', 54],
['Jessica', 22],
['Aaron', 3],
['Margareth', 42],
['Miranda', 33]
]);
dashboard.bind(control, chart);
dashboard.draw(data);
}
</script>
<script>
devsite.github.Link.convertAnchors();
window.prettyPrint();
</script>
</body>
</html>
This should work:
function tableSelectHandler(e){
var selectedItem = chart.getChart().getSelection()[0];
var true_selected = chart.getDataTable().getTableRowIndex(selectedItem.row)
alert(true_selected);
}
getTableRowIndex traces the row back to the datatable
Expanding on juvian's answer, you should test the selection length before trying to access any elements in the array, as the array may be empty (or contain multiple elements if more than one row is selected):
function tableSelectHandler(e){
var selection = chart.getChart().getSelection();
var dt = chart.getDataTable();
for (var i = 0; i < selection.length; i++) {
// colIndex is the index of the column you want to get data from
var value = dt.getValue(selection.row, colIndex);
}
}
How do you get the jqplot to resize the min and max and ranges like it would on an inital plot?
Right now it replots but the new data goes off the screen.
<body>
<input type=button onClick=replot() value=replot><br>
<div id="chart1" style="height:400px;width:600px; "></div>
</body>
</html>
<script>
var plot1;
function replot(){
alert(plot1);
alert(plot1.data);
plot1.series[0].data=[[0,1],[0,2],[1,4]];
alert(plot1.data);
plot1.replot();
}
// Some simple loops to build up data arrays.
var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.4){
cosPoints.push([i, Math.cos(i)]);
}
$(document).ready(function(){
plot1 = $.jqplot('chart1', [cosPoints], {
title: 'Google, Inc.'
});
});
after some investigation I found the following fix
plot1.replot( { resetAxes: true } );
Now it works.