jvectormap map and markers - javascript

This is my default html file for web app project. I get error:
JavaScript runtime error: '$' is undefined
I presume that there is a problem with jquery. This is my first time dealing with html and java script, all advice appritiated.
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery-jvectormap-2.0.3.min.js" type="text/javascript"></script>
<script src="jquery-jvectormap-world-mill.js" type="text/javascript"></script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
$(function () {
$('#world-map-markers').vectorMap({
map: 'world_mill',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: [
{ latLng: [41.90, 12.45], name: 'Vatican City' },
{ latLng: [43.73, 7.41], name: 'Monaco' },
{ latLng: [-0.52, 166.93], name: 'Nauru' }
]
});
});
</script>
</body>
</html>
Thanks in advance.

Related

How to change line color when loading static csv data into Highcharts Highstock graph?

The following code plots static csv into Highstock chart in my browser. How do I change the color of the plot lines? The lines show up in the legend with labels ADJ_HIGH and ADJ_LOW.
<html>
<head>
<title>
Chart
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
</head>
<body>
<div id="chart-container" style="min-width: 400px; height: 600px; margin: auto"></div>
<pre id="csv" style="display: none">DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.63
2018-04-30,167.26,161.84
2018-05-01,169.20,165.27
2018-05-02,177.75,173.80
2018-05-03,177.50,174.44
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container', {
chart: {
type: 'line'
},
title: {
text: 'Chart'
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left'
},
credits: {
enabled: false
},
data: {
csv: document.getElementById('csv').innerHTML
}
});
</script>
</body>
</html>
To change the color of the line you should use the following code:
series: [{
color: '#FFFF00',
lineColor: '#FF0000'
}]
so change your script into following:
<html>
<head>
<title>
Chart
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
</head>
<body>
<div id="chart-container" style="min-width: 400px; height: 600px; margin: auto"></div>
<pre id="csv" style="display: none">DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.63
2018-04-30,167.26,161.84
2018-05-01,169.20,165.27
2018-05-02,177.75,173.80
2018-05-03,177.50,174.44
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container', {
chart: {
type: 'line'
},
title: {
text: 'Chart',
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left'
},
credits: {
enabled: false
},
data: {
csv: document.getElementById('csv').innerHTML
},
series: [{
color: '#FFFF00',
lineColor: '#FF0000'
}]
});
</script>
</body>
</html>

Use mapquest api into DIV inside of DIV html

I'm new in mapquest, i want to create a web page where we can see a map. My example work's fine if i use a single "div", but if i use a "div" inside a "div", the maps don't loads compleatly.
working sample:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Hello World!</title>
<style type="text/css">
#mapa{ width: 800px; height: 600px;font-family:Arial }
</style>
</head>
<body >
<div id="mapa"></div>
<script type="text/javascript">
L.mapquest.key = 'KEY';
map= L.mapquest.map( 'mapa' , {
center: [38.58778619815616,-9.041748046875],
layers: L.mapquest.tileLayer('hybrid'),
zoom: 18
});
L.marker([38.58778619815616,-9.041748046875], {
icon: L.mapquest.icons.marker(),
draggable: false
}).bindPopup('Denver, CO').addTo(map);
L.circle([38.8339, -104.8214], { radius: 20000 }).addTo(map);
var denverLatLngs = [
[36.99, -102.05],
[37, -109.05],
[41, -109.05],
[41, -102.05]
];
L.polygon(denverLatLngs, {color: 'red'}).addTo(map);
</script>
</body>
And i want to put it inside a container:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Hello World!</title>
<style type="text/css">
#mapa{ width: 800px; height: 600px;font-family:Arial }
</style>
</head>
<body >
<div id="container">
<div id="mapa"></div>
</div>
<script type="text/javascript">
L.mapquest.key = 'KEY';
map= L.mapquest.map( 'mapa' , {
center: [38.58778619815616,-9.041748046875],
layers: L.mapquest.tileLayer('hybrid'),
zoom: 18
});
L.marker([38.58778619815616,-9.041748046875], {
icon: L.mapquest.icons.marker(),
draggable: false
}).bindPopup('Denver, CO').addTo(map);
L.circle([38.8339, -104.8214], { radius: 20000 }).addTo(map);
var denverLatLngs = [
[36.99, -102.05],
[37, -109.05],
[41, -109.05],
[41, -102.05]
];
L.polygon(denverLatLngs, {color: 'red'}).addTo(map);
</script>
</body>

EON Chart not visible on page load

I have a working EON chart that is not displaying on initial page load resulting in a blank page. If I switch to another browser tab, and then straight back to the graph tab, the graph then shows.
Here is the HTML / JavaScript and the CSS.
Your help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<link rel="stylesheet" type="text/css" href="poolstyle.css">
<head>
</head>
<body>
<script type="text/javascript">
var pubnub = PUBNUB.init ({publish_key: 'xxx',
subscribe_key: 'xxx',
error: function (error) {console.log('Error:', error)}});
var GraphChannel = "xxx";
var h = true;
charttemp = eon.chart({
pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});
</script>
</br>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>
</body>
</html>
Here is the CSS:
.outer {
margin: 0 auto;
width:1500px;
}
.inner{
display: table;
float: left;
width: 30%;
}
Couple things going on here:
move your library references to inside the <head> tags
but the real issue: your EON code is referencing #charttemp but it is not rendered yet because the that <div> is below the EON script and that is why it requires a tab lose focus/gain focus to render first time. So just move your <div>'s above your EON script.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<!-- <link rel="stylesheet" type="text/css" href="poolstyle.css"> -->
</head>
<body>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>
<script type="text/javascript">
var pubnub = PUBNUB.init ({
publish_key: 'pubkey', subscribe_key: 'subkey',
error: function (error) {console.log('Error: ', error)}});
var GraphChannel = "a";
var h = true;
charttemp = eon.chart({
pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});
</script>
</br>
</body>
</html>

orgchart getOrgChart not a function

i'm trying to use the getOrgChart library in my page, but my browser keeps insisting it is not a function:
Here's the code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="getorgchart.js"></script>
<link rel="stylesheet" src="getorgchart.css">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script>
$("#orgStaffing").getOrgChart({
theme: 'vivian',
primaryColumns: ['name','division','project','email'],
imageColumn: 'image',
gridView: true,
Add a quote before the second email 'jdoe#company.com'
I have tried to replicate your issue
$("#orgStaffing").getOrgChart(
{
theme: 'vivian',
primaryColumns: ['name','division','project','email'],
imageColumn: 'image',
gridView: true,
dataSource: [
{id: 1, parentId: null, name: 'John Smith', division: 'Inbound', project: 'West', email: 'jsmith#company.com', image: 'johnsmith.jpg'},
{id: 2, parentId: 1, name: 'Jane Doe', division: 'Inbound', project: 'West', email: 'jdoe#company.com', image: 'janedoe.jpg'}
]
});
html, body {margin: 0px; padding: 0px;height: 100%; overflow: hidden; }
#people {width: 100%;height: 100%; }
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.getorgchart.com/GetOrgChart/getorgchart/getorgchart.css">
<div id="orgStaffing"></div>
It works
Please make sure that the dataSource is valid JSON object.

Google Charts External Javascript Issue

My Problem is, when i put js code of any google chart in an external javascript file. it start loading page and dosen't display any thing. in case of inline javascripts its working fine.
following is my HTML code "google barchart.html"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<input type="button" id="btn" value="Show Graph" />
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</body>
</html>
and this is my js file "test.js"
$(document).ready(function() { $('#btn').click(function() { //alert("hi");
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
//title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
} }); });
*NOTE: it also working fine in external js when this piece of code is not in any js function. but i want to use this in Javascript function.
Thnx in advance.
Moaz
I fixed up your code into 2 working solutions you may use (tested working with IE, Chrome and Mozilla).
JavaScript loads with index page
JavaScript loads after button click
.
Solution 1: JavaScript loads with index page
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<input type="button" id="btn" value="Show Graph">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test.js
google.load('visualization', '1', {'packages':['corechart']});
$(document).ready(function() {
$("#btn").click(function() {
$("#chart_div").load("", function(){
var data = google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip: {trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
});
});
Solution 2: JavaScript loads after button click
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
function loadjsfile(filename, filetype)
{
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
document.getElementsByTagName("head")[0].appendChild(fileref)
}
</script>
</head>
<input type="button" id="btn" value="Show Graph" onclick="loadjsfile('test2.js','js')">
<div id="chart_div" style="width: 441px; height: 300px;"></div>
</html>
test2.js
$("#chart_div").load("",function(){
var data = new google.visualization.arrayToDataTable([
['', 'Your Restaurant', 'Other Restaurants'],
['Question1', 5, 4],
['Question2', 4, 5],
['Question3', 3, 2],
['Question4', 5, 1]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Questions', titleTextStyle: {color: 'red'}},
vAxis: {title: '1 = POOR, 5 = EXCELLENT', titleTextStyle: {color: '#FF0000'}, maxValue:'5', minValue:'1'},
tooltip:{trigger: 'hover'}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options)
});

Categories

Resources