Trying to align google charts with css - javascript

I'm trying to centre the example chart provided by google: https://google-developers.appspot.com/chart/interactive/docs/quick_start
I've used the basic css centering i know (margin-right: auto;margin-left: auto;), But nothing seems to work. I've only been working with text and images up to this point, so any help would be greatly appreciated.
Here is the basic code I'm laying around with (including the google charts javascript)
<!DOCTYPE html> <html> <head> <style>
div.chart_div {
margin-left: auto;
margin-right: auto;
width: 800px; }
</style>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head> <body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body> </html>

Stovroz is totally right!
In CSS you define div.chart_div as a class; but in HTML you define as a div#chart_div ID.
Following CSS code normally use to center everything in a page..
<style>
body{ text-align: center;}
#chart_div{width: 800px; margin: 0 auto; text-align: left;}
</style>

Your CSS div.chart_div is targeting a div of class="chart_div" but you've got a div of id="chart_div". Use # in CSS to target IDs, i.e. div#chart_div.

Related

Scrolling down a page with a ArcGIS map

I'm using version 4.0 of the ArcGIS API for my maps.
whenever map is loaded, User has to scroll down to see the map. This is the first issue i am facing.
My map is somewhere in the middle of the page so the user has to scroll down to view it.
Then if a certain point was clicked on the map or if a certain area in dragged to zoom in, the pointers the map shows as selection are not the exact points the mouse is pointing at. it points to a location above the mouse pointer.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Add the Compass widget to a basic 2D map - 4.0</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Compass",
"dojo/domReady!"
],
function(
Map,
MapView,
Compass
) {
var map = new Map({
basemap: "national-geographic"
});
var view = new MapView({
container: "viewDiv",
scale: 500000,
center: [26.26, 39.17],
map: map
});
/********************************
* Create a compass widget object.
*********************************/
var compassWidget = new Compass({
view: view
});
// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");
});
</script>
</head>
<body>
<!-- add div for test-->
<div style="height:500px;"></div>
<div id="viewDiv"></div>
</body>
</html>
Note:- Same issue exist on arcgsi js api sample too...
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/sandbox.html?sample=get-started-mapview
If you run this code you'll see if you scroll down and drag an area (by holding shift and dragging the mouse) it will drag an area above your selection.
Well, I noticed this is happening whenever user scrolls.
So I suggest either remove scroll bar or reduce the size of your top header container.
For more detail please refer below running code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Add the Compass widget to a basic 2D map - 4.0</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<script src="https://js.arcgis.com/4.0/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Compass",
"dojo/domReady!"
],
function(
Map,
MapView,
Compass
) {
var map = new Map({
basemap: "national-geographic"
});
var view = new MapView({
container: "viewDiv",
scale: 500000,
center: [26.26, 39.17],
map: map
});
/********************************
* Create a compass widget object.
*********************************/
var compassWidget = new Compass({
view: view
});
// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");
});
</script>
</head>
<body>
<!-- add div for test-->
<div style="height:100px;"></div>
<div id="viewDiv"></div>
</body>
</html>
Hoping this will help you :)
I had posted this in one of the ArcGIS forums and got to know this is a bug with 4.0 and will be fixed in 4.1.

example of mapbox not working with another .geojson file

I'm trying to test mapbox, but I am stuck in trying to visualize some polygons coming from a .geojson file.
Here's my code:
(needs Allow-Control-Allow-Origin Chrome Plugin to work properly).
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Point in polygon</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.state {
position:absolute;
top:10px;
right:10px;
z-index:1000;
}
.state strong {
background:#404040;
color:#fff;
display:block;
padding:10px;
border-radius:3px;
}
</style>
<!--
This example requires jQuery to load the file with AJAX.
You can use another tool for AJAX.
This pulls the file airports.csv, converts into into GeoJSON by autodetecting
the latitude and longitude columns, and adds it to the map.
Another CSV that you use will also need to contain latitude and longitude
columns, and they must be similarly named.
-->
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>
<div id='map'></div>
<div id='state' class='state'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoicmljcmljdWNpdCIsImEiOiIyODdkMTk4YmY5YTllYWQ1ZTk5MWQ5NTEwYmIwMjQ3OSJ9.a2bQbD9hl6dOCI7Om1BcwQ';
var state = document.getElementById('state');
var map = L.mapbox.map('map', 'mapbox.emerald')
.setView([38, -95], 4);
$.ajax({
//url: 'https://www.mapbox.com/mapbox.js/assets/data/us-states.geojson', // correctly show U.S.A
url: 'http://playground.nothingisclear.net/simplified_LW_2015.geojson', // should show some areas in south-west Germany (Baden-Wuttemberg)
dataType: 'json',
success: function load(d) {
console.log(d);
var states = L.geoJson(d).addTo(map);
}
});
</script>
</body>
</html>
My problem is that my geojson –showing polygons in a south west region of Germany– doesn't work (http://playground.nothingisclear.net/simplified_LW_2015.geojson)
while mapbox's example –showing U.S.A.– works (https://www.mapbox.com/mapbox.js/assets/data/us-states.geojson).
I've triple-checked the geojson and it seems to have no errors at all, but somehow it doesn't show the polygons on the map.
Any ideas on how to solve this?
Thank you.
To test: switch on/off the comments where you see url: of the ajax call.
From your GeoJSON file:
"geometry":{"type":"Polygon","coordinates":[[[3519139.557897714,5400906.9684712365]
This GeoJSON file is in a different projection than EPSG:4326, so the coordinates are very far from valid: longitude should be >-180 and <180, latitude >-90 and <90. Reproject your data into EPSG:4326 and your example will work.

Colour change of the line in area chart using google Charts API

I have a line chart created in Google Charts API, Now I want to change the LIne Colour and body colour differently,But when i created a chart i can see line and body colour same , please can any one let me know how to change the colours using google API
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['',''],
['',27],
['',25],
['',60],
['',31],
['',25],
['',39],
['',25],
['',31],
['',26],
['',28],
['',80],
['',28],
['',27],
['',31],
['',27],
['',29],
['',26],
['',35],
['',70],
['',25]
]);
var options = {
backgroundColor: {
stroke: '#4322c0',
strokeWidth: 3},
'is3D':true,
series: {0:{color:'#DF013A',lineWidth:2}},
colors:['#D8D8D8'],
backgroundColor: "transparent",
legend: {position: 'none'}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 300px; height: 300px;"></div>
</body>
</html>
<body>
<div id="chart_div"></div>
</body>
</html>
Please refer the below developer documentation to change the line series color and the background color:
Line series color
BG color

make a KML/KMZ layer transparent/opaque

I have been looking for a while for a simple way to make a KML/KMZ layer transparent/opaque using the Google Map API version 3. There are plenty of example out there, but there doesn’t seem be a simple example of making a KML layer opaque. I have provided an example below, can someone help me out with this???
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Example 2</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// ***Initialize the Map Function ***
function initialize() {
var latlng = new google.maps.LatLng(0,0);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var polyLayerOptions = {
supressInfoWindows: true,
Opacity: 0.15
};
var polyLayer = new google.maps.KmlLayer
('http://gmaps-samples.googlecode.com/svn/trunk/ggeoxml/cta.kml', polyLayerOptions);
polyLayer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
There isn't an opacity flag in the KML options, but you can set the color of objects in your KML to be transparent. Google uses a 32 bit color in the form ABGR, where the first byte is the alpha channel or transparency and the next three bytes are regular colors (though not in the standard RGB order that everyone else uses!). For example, a color of #80FF0000 would be a 50% transparent Blue. There doesn't seem to be a way to modify the transparency on the fly in code like you can in Google Earth, you have to update the KML and repost it to your map.

Render google map in wordpress, based on address custom field

I have a wordpress site with a large number of pages, each page represent a physical location. Now for each page I would like to display a google map based on the address. I know I can do this by installing for instance the Geo Mashup plugin http://wordpress.org/extend/plugins/geo-mashup/ but that requires (I believe) that I manually, for every post, create a location based on the address and add a shortcode to the post/page that results in a google map. This is a LOT of work for this site with hundreds of locations.
I would like to be able to
A: Create an "address-custom-field"
for each post programmatically.
B: In
a page template use that custom field
to render a google map.
A is easy, but B?
You may want to consider using the Google Maps API.
The following example may help you getting started. All you would need to do is to change the JavaScript variable yourAddress with the address of the location feature in your page. "If A is easy", that should be quite straight-forward.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API Demo</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false"
type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<script type="text/javascript">
var yourAddress = 'London, UK';
if (GBrowserIsCompatible()) {
var geocoder = new GClientGeocoder();
geocoder.getLocations(yourAddress, function (locations) {
if (locations.Placemark)
{
var north = locations.Placemark[0].ExtendedData.LatLonBox.north;
var south = locations.Placemark[0].ExtendedData.LatLonBox.south;
var east = locations.Placemark[0].ExtendedData.LatLonBox.east;
var west = locations.Placemark[0].ExtendedData.LatLonBox.west;
var bounds = new GLatLngBounds(new GLatLng(south, west),
new GLatLng(north, east));
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
});
}
</script>
</body>
</html>
The above example would render a map like the one below:
Render google map in wordpress, based on address custom field http://img716.imageshack.us/img716/7267/london.jpg
The map will not show if the Google Client-side Geocoder cannot retreive the coordinates from the address.
This is now obsolete Google removed services for v2.
Use something like this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

Categories

Resources