I'm using Kartograph.js to load svg map. But I get the following error when page loads:
Uncaught TypeError: Cannot read property 'getAttribute' of undefined
View.fromXML
Kartograph._mapLoaded
j
k.fireWith
x
b
Here is my Code:
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="kartograph.js"></script>
<script type="text/javascript">
function loadMap(){
var map = kartograph.map('#map', 600, 0);
map.loadMap('World.svg')
}
</script>
</head>
<body onLoad="loadMap()">
<div id="map"></div>
</body>
</html>
You need to define the metadata on the svg file.
For example:
<metadata><views><view h="604.816027229" padding="0" w="1000"><proj id="laea-usa" lat0="45" lon0="-100"/><bbox h="321.76" w="532.88" x="746.23" y="918.78"/></view></views></metadata>
If you created the svg with kartograph.py, you might need to add the layers added in the svg as follow:
function loadMap(){
var map = kartograph.map('#map', 600, 0);
map.loadMap('World.svg', function() {
map.addLayer('your_first_layer');
map.addLayer('your_second_layer');
});
}
To find the name of the layers to be added:
Open your svg file as text, for exemple in Firefox and use rightclick, page inspector.
On the second line you'll see : svg > g#something > ...
The name of one of the layer is the "something" after "g#". In the code it is the "id" of the "g" element.
Hope this might help you...
Related
Trying to create simple svg canvas using D3 but looking at elements in the console nothing shows up. D3 seems to be loading because from the console when I type d3. I get the options and methods available in D3. But the svg canvas is not being drawn. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bar Chart</title>
<style>
</style>
</head>
<body>
<div id="chart"></div>
<script src="d3.v3.js">
var w = 500;
var h = 500;
function drawSVG(s) {
var svg = d3.select("#chart")
.append("svg")
.attr("width",w)
.attr("height",h);
console.log(s);
}
var sampleStr = "hello";
drawSVG(sampleStr);
</script>
</body>
</html>
You've placed your code within the script tag that has its source attribute set to download D3:
<script src="d3.v3.js">
... your code is here
</script>
You need to place your code in its own script tag:
<script src="d3.v3.js"></script>
<script>
... your code should go here
</script>
I'm trying to add a D3.js liquid fill gauge (http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) in a Leaflet popup without succeeding.
Here is my code:
var map = L.map('map').setView([47.261491,-1.549244], 16);
var dataCenterIcon = L.icon({
iconUrl: 'images/datacenter-icon.png',
iconSize: [20, 20] // size of the icon
});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);
d3.json("data/datacentersSigma.json",function (data){L.geoJson(data,{
pointToLayer: function (feature,latlng){return L.marker(latlng,{icon:dataCenterIcon});},
onEachFeature : function (feature, layer) {
var div = $('<div class="popupGraph" style="width: 200px; height:200px;"><svg id="gauge"/></svg></div>')[0];
var popup = L.popup().setContent(div);
layer.bindPopup(popup);
// var svg = d3.select(div).select("svg").attr("width", 200).attr("height", 200);
// svg.append("rect").attr("width", 150).attr("height", 150).style("fill", "lightBlue");
loadLiquidFillGauge("gauge",55);
}}).addTo(map);});
d3.json("data/trajetsFibreDCSigma.json",function (data){
L.geoJson(data, {
style: function(feature){return {color : feature.properties.stroke};}
}).addTo(map);
});
<!DOCTYPE html>
<html>
<head>
<title>Yepee</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/leaflet.css" />
<script src="js/leaflet.js"></script>
<script src="js/d3.js"></script>
<script src="js/liquidFillGauge.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px"></div>
<!-- <svg id="gauge"/>-->
<script src="js/yepee.js" type="text/javascript"></script>
</body>
</html>
When I'm trying to display my map, I can't even see the markers and I've got this error:
TypeError: d3_window(...) is null
I can also load a liquid fill gauge on a svg element which isn't on my map.
I've tried to add just a simple svg square in the popup by following an example (http://jsfiddle.net/2XfVc/132/) and it worked.
The goal is to put that gauge in the leaflet popup and despite searching for a long time, I can't find what the problem is.
Thank you in advance for your answers.
You're trying to initialize the gauge when the actual SVG element isn't added to the DOM yet. Once the popup opens, the content gets added to the DOM, that's when you should initialize the gauge.
// Have same content for all your popups
var content = '<svg id="gauge" width="100" height="100"></svg>'
// Set markers with popup, include content and set value as option
new L.Marker([0, -45]).bindPopup(content, {'value': 33}).addTo(map)
new L.Marker([0, 45]).bindPopup(content, {'value': 66}).addTo(map)
// Catch popup open event
map.on('popupopen', function (e) {
// Initialize the gauge with current popup option's value
loadLiquidFillGauge('gauge', e.popup.options.value);
})
Demo on Plunker: http://embed.plnkr.co/2hMjBt/preview
How can I change the view area for a graph.
I have this example below se code an image
The left axes goes from 0 to 10 because there is data from 0 to 10 , but I still would like to show only 4 to 9, almost like its zoomed.
Is it possible ?
<title>Graf TEST </title>
</head>
<script src="http://127.0.0.1/charts/js/teechart.js" type="text/javascript"> </script>
<script src="http://127.0.0.1/charts/js/teechart-extras.js" type="text/javascript"></script>
<script language="JavaScript">
function draw() {
var Chart1=new Tee.Chart("canvas");
Chart1.title.text="test";
Chart1.applyTheme("minimal");
Chart1.palette.colors[0] ="green";
Chart1.addSeries(new Tee.Line([]) );
var Series1 = Chart1.series.items[0];
Series1.marks.style="value";
Series1.marks.visible=true;
Series1.colorEach="no";
Series1.format.stroke.size=3;
Series1.pointer.visible=true;
Series1.data.values[0]=6;
Series1.data.labels[0] ="Okt";
Series1.data.values[1]=9;
Series1.data.labels[1] ="Nov";
Series1.data.values[2]=10;
Series1.data.labels[2] ="Dec";
Series1.data.values[3]=0;
Series1.data.labels[3] ="Jan";
Chart1.draw();Chart1.toImage("img");canvas.style.display="none";
}
</script>
<p>
<BODY onload="draw()">
<img id="img"><canvas id="canvas" width="800" height="400"></canvas>
</html>
You should do that manually setting axis minimum and maximum values, for example:
Chart1.axes.left.setMinMax(4,9);
I'm making an html page with several examples of charts that I will be using. On the page I have a Dimple line graph, a pie chart, a wordcloud etc. When I try to add a second dimple graph - this time a bar graph, the first dimple line graph that I already have on the page is drawn on top of my bar graph:
My HTML file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Graphs</title>
<link rel="stylesheet" type="text/css" href="_/base.css">
<link rel="stylesheet" type="text/css" href="_/c3CSS.css">
<script type="text/javascript" src="_/d3.min.js"></script>
<script type="text/javascript" src="_/dimple.v2.1.0.min.js"></script>
<script type="text/javascript" src="_/c3.min.js"></script>
<script type="text/javascript" src="_/d3.layout.cloud.js"></script>
</head>
<body>
<div id="chartContainer">
<h1>Hot Topics Line</h1>
<script type="text/javascript" src=CurvyLine.js></script>
</div>
<h1>Hot Topics Pie</h1>
<div id="chart">
<script type="text/javascript" src=Pie.js></script>
</div>
<div id="wordCloud">
<h1>Clickable Word Cloud</h1>
<script type="text/javascript" src=WordCloud.js></script>
</div>
<div id="bar">
<h1>Clickable Word Cloud</h1>
<script type="text/javascript" src=WeekBar.js></script>
</div>
</body>
</html>
Without adding the bar chart at the end, the line graph displays properly at the top of the page above the pie chart. However, with the bar chart added, both the line and bar graph are drawn inside the "bar" div. Can anyone help with this please? Here is my line graph js file:
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("data/tweet_example.tsv", function (data) {
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule("Date");
myChart.addMeasureAxis("y", "Tweets");
var s = myChart.addSeries("Topic", dimple.plot.line);
s.interpolation = "cardinal";
myChart.addLegend(60, 10, 500, 20, "right");
myChart.draw();
});
and here is my bar graph js file:
var svg = dimple.newSvg("#bar", 800, 410);
d3.tsv("data/tweet_example2.tsv", function (data) {
//data = dimple.filterData(data, "Owner", ["Aperture", "Black Mesa"])
var barChart = new dimple.chart(svg, data);
barChart.addCategoryAxis("x", ["Day", "Topic"]);
barChart.addMeasureAxis("y", "Tweets");
barChart.addSeries("Topic", dimple.plot.bar);
barChart.addLegend(65, 10, 510, 20, "right");
barChart.draw();
barChart.draw();
});
Your problem is that you are using the same global name svg to hold references to two different charts. When your second piece of code runs, it overwrites the svg value that you had from the first piece of code, and when the .tsv() callback returns, it finds a reference to the second graph.
Simplest solution: use different names for svg variable in both pieces of code: svg1 and svg2 will be fine.
Most elegant solution: use some kind of namespace management, such as wrapping both pieces of code in immediately called functions:
function() {
// your first chunk of code here
}()
function() {
// your second chunk of code here
}()
This way you will have two svg variables local to their own scopes
I'm looking at the PDF.js project on github and looking at their basic demos I've come up with this (the whole view):
#{
ViewBag.Title = "GetPDFLetter";
Layout = null;
}
<!doctype html>
<html>
<head>
<title>PDF.JS TEST</title>
<!-- PDF.js-specific -->
<script src="#Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/pdf.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/core.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/util.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/api.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/canvas.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/obj.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/function.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/charsets.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/cidmaps.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/colorspace.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/crypto.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/evaluator.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/fonts.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/glyphlist.js")"> </script>>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/image.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/metrics.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/parser.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/pattern.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/stream.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/worker.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/jpg.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/jpx.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/PDFScripts/jbig2.js")"> </script>
<script type="text/javascript">
// Specify the main script used to create a new PDF.JS web worker.
// In production, change this to point to the combined `pdf.js` file.
var url = '#Url.Content("~/PDFScripts/worker_loader.js")';
PDFJS.workerSrc = url;
</script>
</head>
<div>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
<script type="text/javascript">
$(document).ready(function () {
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
//
// See README for overview
//
'use strict';
//
// Fetch the PDF document from the URL using promices
//
PDFJS.getDocument('helloworld.pdf').then(function (pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function (page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
});
</script>
</html>
The File helloworld.pdf is in the same folder as the view, but when I run the project nothing gets rendered, just a small rectangle. Have I missed something? Any special considerations? Thanks for any help.
Figured it out eventually. What an awesome library PDF.js is.
I've taken the liberty of creating a sample MVC3 project using PDF.js. It follows 90% of the PDF.js demo on github, except a tiny, self explanatory (explained in the comments in the code) change in assigning PDF file paths to the viewer.