I am trying to create a map which allows a person to enter a zip code and a radius and will draw a radius around that point. The codeAddress function seems to work, but the drawCircle function is not working. Perhaps someone can pinpoint the error
see code below:
<!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: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
</script>
<script type= "text/javascript">
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function drawCircle() {
var radius=document.getElementById("radius").value;
geocoder.geocode( { 'address': address}, function(results, status){
if (status==google.maps.GeocoderStatus.OK){
var latlng=results[0].geometry.location;
var latitude=latlng.lat();
var longitude=latlng.lng();
}
else{
alert("Geocode was not successful for the following reason: " + status);
}
});
// Degrees to radians
var d2r = Math.PI / 180;
// Radians to degrees
var r2d = 180 / Math.PI;
// Earth radius is 3,963 miles
var cLat = (radius / 3963) * r2d;
var cLng = cLat / Math.cos(latitude * d2r);
//Store points in array
var points = [];
// Calculate the points
// Work around 360 points on circle
for (var i=0; i < 360; i++) {
var theta = Math.PI * (i/16);
// Calculate next X point
circleX = longitude + (cLng * Math.cos(theta));
// Calculate next Y point
circleY = latitude + (cLat * Math.sin(theta));
// Add point to array
points.push(new GPoint(circleX, circleY));
};
//Add points to map
var sColor=003F87;
var stroke=.5;
map.addOverlay(new GPolyline(points, sColor, stroke));
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:460px;
-moz-outline-radius:20px; -moz-box-sizing:padding-box; -moz-outline-style:solid ;-moz-outline-color:#9FB6CD;
-moz-outline-width:10px;"></div>
<div>
Zip Code: <input id="address" type="textbox" value="">
Radius:<input id="radius" type="textbox" value="">
<input type="button" value="Find" onclick="codeAddress() ">
<input type="button" value="Draw Radius" onclick= "drawCircle() ">
</div>
</body>
</html>
Related
I was just wondering if there was a way to use the free ordnance survey contour line data and generate DEM data using it. I’ve seen plenty of people converting DEM data to contour line data but not the other way around, could anyone help me out here?
I would also add more relevant tags to this question, though I do not have the reputation, nor do the tags exist
OS Terrain 50 is available as ASCII grid as well as contours. This OpenLayers example reads the unzipped ASCII files directly to produce a single zoom level EPSG:27700 tiled DEM (using the Mapbox RGB encoding method), but you could use similar logic in VB to create and save a PNG tile grid.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.5.0/css/ol.css" type="text/css">
<style>
html, body, .map {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.map {
width: 100%;
height: calc(100% - 20px);
}
</style>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.5.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.0/proj4.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div>
<label>
Elevation
<span id="info">0.0</span> meters
</label>
</div>
<script type="text/javascript">
proj4.defs('EPSG:27700', '+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs ');
ol.proj.proj4.register(proj4);
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
var imgData = ctx.createImageData(200, 200);
var layer = new ol.layer.Tile({
source: new ol.source.XYZ({
projection: 'EPSG:27700',
tileGrid: new ol.tilegrid.TileGrid({
tileSize: 200,
resolutions: [50],
extent: [0, 0, 700000, 1300000],
origin: [0, 0]
}),
crossOrigin: '',
imageSmoothing: false,
tileUrlFunction: function (tileCoord, pixelRatio, projection) {
var bounds = this.getTileGrid().getTileCoordExtent(tileCoord);
var x = (Math.round(bounds[0]/10)/10) + 10000;
var y = (Math.round(bounds[1]/10)/10) + 5000;
var a1y = (4 - (Math.floor(y/5000)%5))*5;
var a2y = (4 - (Math.floor(y/1000)%5))*5;
var y1 = Math.floor(y/100)%10;
a1y += (Math.floor(x/5000)%5);
a2y += (Math.floor(x/1000)%5);
var x1 = Math.floor(x/100)%10;
var tile500km = String.fromCharCode(a1y + Math.floor((a1y+17)/25) + "A".charCodeAt(0));
var tile100km = tile500km + String.fromCharCode(a2y + Math.floor((a2y+17)/25) + "A".charCodeAt(0));
var tile10km = tile100km + x1 + y1;
return 'https://mikenunn.net/data/terr50/grid/' + tile100km.toLowerCase() + '/' + tile10km + '.asc';
},
tileLoadFunction: function(tile, src) {
var xhr = new XMLHttpRequest();
xhr.addEventListener('loadend', function (evt) {
var data = this.response;
if (data !== undefined) {
var rows = data.split('\n');
if (rows.length >= 205) {
for (var j = 0; j < 200; j++) {
var values = rows[j + 5].split(' ');
for (var i = 0; i < 200; i++) {
var pixel = (parseFloat(values[i]) * 10) + 100000;
var index = (j * 200 + i) * 4;
imgData.data[index] = (pixel >> 16) & 0xFF;
imgData.data[index+1] = (pixel >> 8) & 0xFF;
imgData.data[index+2] = (pixel >> 0) & 0xFF;
imgData.data[index+3] = 0xFF;
}
}
ctx.putImageData(imgData, 0, 0);
tile.getImage().src = canvas.toDataURL();
}
} else {
tile.setState(3);
}
});
xhr.addEventListener('error', function () {
tile.setState(3);
});
xhr.open('GET', src);
xhr.send();
}
})
});
var map = new ol.Map({
target: 'map',
layers: [layer],
view: new ol.View({
projection: 'EPSG:27700',
center: ol.proj.fromLonLat([0, 51.5], 'EPSG:27700'),
zoom: 14
})
});
var showElevations = function(evt) {
if (evt.dragging) {
return;
}
map.forEachLayerAtPixel(
evt.pixel,
function(layer, pixel) {
var height = -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1;
info.innerHTML = height.toFixed(1);
},
{
layerFilter: function(candidate) {
return layer === candidate;
}
}
);
};
map.on('pointermove', showElevations);
</script>
</body>
</html>
I want to filter according to the materials in the room in the project. For example: if checked TV checkbox show the rooms on the TV. if checked tv and wifi checkbox just list rooms that are both TV and WiFi. My example shows the TV ones but when I press the wifi button the rooms with TV are still listed even though it is not WiFi.
This is: Fiddle
angular.module('hotelApp', [])
.controller('ContentControler', function ($scope, $timeout) {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.location_name = "";
$scope.names = [{
prop_Name: 'Location 1',
lat: 43.7000,
long: -79.4000,
amenities: '3'
}, {
prop_Name: 'Location 2',
lat: 40.6700,
long: -73.9400,
amenities: '2'
}, {
prop_Name: 'Location 3',
lat: 41.8819,
long: -87.6278,
amenities: '4'
}, {
prop_Name: 'Location 4',
lat: 34.0500,
long: -118.2500,
amenities: '2'
}, {
prop_Name: 'Location 5',
lat: 36.0800,
long: -115.1522,
amenities: '2, 3'
}];
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.prop_Name
});
marker.content = '<div class="infoWindowContent"><ul>' + '<li>' + info.prop_Desc + '</li>' + '<li>' + info.prop_Addr + '</li>' + '<li>' + info.prop_Price + '</li>' + '<li>' + info.prop_Dist + '</li>' + '</ul></div>';
google.maps.event.addListener(marker, 'click', function () {
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
for (i = 0; i < $scope.names.length; i++) {
createMarker($scope.names[i]);
}
$scope.openInfoWindow = function (e, selectedMarker) {
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
//PROBLEM FILTER HERE
$scope.am_en = function()
{
x = $(".hosting_amenities input:checkbox:checked").map(function(){return $(this).val();}).get();
$scope.ot_Filter = function (location) {
var shouldBeShown = false;
for (var i = 0; i < x.length; i++) {
if (location.amenities.indexOf(x[i]) !== -1) {
shouldBeShown = true;
break;
}
}
return shouldBeShown;
};
}
$scope.$watch('nas',
function (newValue, oldValue) {
for (jdx in $scope.markers) {
$scope.markers[jdx].setMap(null);
}
$scope.markers = [];
for (idx in $scope.nas) {
createMarker($scope.nas[idx]);
}
}, true);
});
#map {
height: 220px;
width: 400px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom: 0;
margin-top: 0;
}
#total_items
{
margin:0px auto;
padding:0px;
text-align:center;
color:#0B173B;
margin-top:50px;
border:2px dashed #013ADF;
font-size:20px;
width:200px;
height:50px;
line-height:50px;
font-weight:bold;
}
#amount
{
color:#DF7401;
font-size:18px;
font-weight:bold;
}
#slider-range
{
margin:0px auto;
padding:0px;
text-align:center;
width:500px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<div ng-app="hotelApp" ng-controller="ContentControler">
<div id="map"></div>
<div id="class" ng-repeat="marker in markers"></div>
<ul>
<li ng-repeat="x in nas = (names | filter:{prop_Name:location_name} | filter:pmaxFilter | filter:ot_Filter)">{{ x.prop_Name }}</li>
</ul>
<div class="hosting_amenities">
<h3>Filter:</h3>
<input type="checkbox" name="more_filter[]" value="1">WIFI
<input type="checkbox" name="more_filter[]" value="2">TV
<input type="checkbox" name="more_filter[]" value="3">Cable TV
<input type="checkbox" name="more_filter[]" value="4">Klima
<button ng-click="am_en();">Submit</button>
</div>
With your current script, when you select 2 elements, like TV and WiFi, you are showing the rooms that have TV or WiFi. You should change your code in order to select only the rooms that have TV and WiFi, so your inner function $scope.ot_Filter will be as follows:
$scope.ot_Filter = function (location) {
var shouldBeShown = true;
for (var i = 0; i < x.length; i++) {
if (location.amenities.indexOf(x[i]) === -1) {
shouldBeShown = false;
break;
}
}
return shouldBeShown;
};
I've modified your script, adding WiFi to a location, here
You only check if something is checked and then set shouldBeShown to true and break. So you check for "OR" and not for "AND" with your checkboxes.
See your $scope.am_en = function():
for (var i = 0; i < x.length; i++) {
if (location.amenities.indexOf(x[i]) !== -1) {
shouldBeShown = true;
break;
}
}
return shouldBeShown;
You need to modify your if-statement to check ALL checked checkboxes/filters. Maybe you can think about using binary information for amenities.
Example:
00 = no amenity
01 = only WiFi
10 = only TV
11 = TV and WiFi
Then you can store:
0 for nothing
1 for only WiFi
2 for only TV
3 for TV and Wifi
...
This would make a check easier as you can use the modulo operator.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# page import="java.sql.*" %>
<%# page import="java.util.*" %>
<%# page import="java.io.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GMap</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDF4xc24ce0hMfmjiTdtDhDhuH0b9fvs5c&sensor=false">
</script>
<div id="googleMap" style="width:1100px;height:580px;"></div>
<script type="text/javascript">
var myCenter=new google.maps.LatLng('17.241704110314977','74.98103292570762')
var mapProp = {
center:myCenter,
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap") ,mapProp);
var marker;
var flightPlanCoordinates=new Array();
function initialize(point,imei,speed,altitude)
{
var x=point;
{
var marker = new google.maps.Marker({
position:x,
map: map
});
var cnt;
var contentString;
var j=2;
var arrayinfo=new Array();
for(cnt=1;cnt<point.length;cnt++)
{
contentString = '<div id="content">'+
'<font color="purpal"><b>Sr no : </b></font>';" +j+ "+ '<br /> ' +
'<font color="purpal"><b>imei: 352840065108626</b></font>';"+imei+" +'<br /> ' +
'<font color="purpal"><b>Speed : </b></font>';"+speed+" + '<br /> ' +
'<font color="purpal"><b>Altitude : </b></font>';"+altitude+"+ '<br /> ' + '</div>';
arrayinfo.push(arrayinfo);
j++;
return arrayinfo;
}
var infowindow = new google.maps.InfoWindow({
content: arrayinfo,
maxWidth: 400
});
}
marker.addListener('click', function() {
infowindow.open(arrayinfo, marker);
});
flightPlanCoordinates.push(marker.getPosition());
var flightPath = new google.maps.Polyline({
map: map,
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
}
<%
String url = "jdbc:mysql://localhost:3306/tracking_hpcl";
try{
String driver = "com.mysql.jdbc.Driver";
Class.forName(driver).newInstance();
Connection conn;
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/tracking_hpcl", "root","root");
Statement s = conn.createStatement ();
s.executeQuery ("select * from data_yday where imei='352840065108626' and gpsdatetime between '2016-09-30 07:00:00' and '2016-09-31 07:00:00' order by gpsdatetime asc;");
ResultSet rs = s.getResultSet ();
out.print("var speed=new Array();");
out.print("var altitude=new Array();");
out.print("var imei=new Array();");
int i = 0;
int size=0;
/* rs.last();
size=rs.getRow();
rs.beforeFirst(); */
out.print("var arr=new Array();");
while(rs.next())
{
String lat = rs.getString ("lat");
String lng = rs.getString ("lng");
String imei=rs.getString ("imei");
System.out.println("\n imei="+imei);
out.print("var imeiinarr='"+imei+"';");
out.print("imei.push(imeiinarr);");
/* Timestamp datetime=rs.getString("datetime");
System.out.println("\n datetime="+datetime);
out.print("var datimeind='"+new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(datetime)+"';");
out.print("datetime.push(datimeind);");*/
String speed=rs.getString("speed");
System.out.println("\n speed="+speed);
out.print("var speedinarr='"+speed+"';");
out.print("speed.push(speedinarr);");
/* String battery=rs.getString("battery");
System.out.println("\n battery="+battery);
out.print("var batteryind='"+battery+"';");
out.print("battery.push(batteryinarr);"); */
String altitude=rs.getString("altitude");
System.out.println("\n altitude="+altitude);
out.print("var altitudeinarr='"+altitude+"';");
out.print("altitude.push(altitudeinarr);");
out.print("var point = new google.maps.LatLng("+lat+","+lng+","+imei+","+speed+","+altitude+");\n");
out.print("arr.push(point);\n");
out.print("initialize(point,arr,imei,speed,altitude);");
i++;
}
rs.close ();
s.close ();
}
catch (Exception e)
{
e.printStackTrace();
}
%>
</script>
</html>
I am working on a web application with Java EE and I would like to dynamically add markers to the Google map placed on my JSP page with coordinates from my database. I have the following code, but I can't pinpoint the issue
I made my chart Responsive , but what i noticed was on resize the line of x,y axis was disappearing .
I am sharing the
var app = angular.module('chartApp', []);
app.controller('LineGraphCtrl', ['$scope','$http',
function($scope,$http){
$scope.lineGraph={
72:{company:{ais_time:0},user:{ais_time:0}},
73:{company:{ais_time:3},user:{ais_time:2}},
74:{company:{ais_time:2},user:{ais_time:1}},
75:{company:{ais_time:2},user:{ais_time:3}},
76:{company:{ais_time:3},user:{ais_time:4}},
77:{company:{ais_time:1},user:{ais_time:1}},
78:{company:{ais_time:2},user:{ais_time:0}},
79:{company:{ais_time:4},user:{ais_time:3}}};
console.log($scope.lineGraph);
$scope.lineaGraphData=[];
$scope.UservsCompanyAIData=[];
for(var i in $scope.lineGraph) {
console.log(i);
for (var j in $scope.lineGraph[i]) {
if(j=="company") {
$scope.lineaGraphData.push({
"week": i,
"AI": $scope.lineGraph[i].company.ais_time,
"key": "company"
});
} else {
$scope.lineaGraphData.push({
"week": i,
"AI": $scope.lineGraph[i].user.ais_time,
"key": "user"
});
}
}
}
function getDateOfISOWeek(w, y) {
var simple = new Date(y, 0, 1 + (w - 1) * 7);
var dow = simple.getDay();
var ISOweekStart = simple;
if (dow <= 4)
ISOweekStart.setDate(simple.getDate() - simple.getDay() + 1);
else
ISOweekStart.setDate(simple.getDate() + 8 - simple.getDay());
return ISOweekStart;
};
for(var i=0;i<$scope.lineaGraphData.length;i++){
var weekStart=getDateOfISOWeek($scope.lineaGraphData[i].week,2015);
$scope.UservsCompanyAIData.push({"Date":weekStart,"Label":$scope.lineaGraphData[i].key,"AIvalue":$scope.lineaGraphData[i].AI});
}
console.log($scope.UservsCompanyAIData);
}]);
app.directive('userVsCompanyAI', function($parse, $window){
return{
restrict:'EA',
scope: {data: '=data'},
link: function(scope, element, attrs) {
scope.$watch('data', function (data) {
if (data) {
var data = scope.data;
//Dimensions of the Graph
var margin={top:30,right:20,left:50,bottom:80},
width=800-margin.left -margin.right,
height=400-margin.top-margin.bottom;
var color = d3.scale.category10();
var parseDate =d3.time.format("%d/%m").parse;
//Range of the Graph
var x = d3.time.scale().range([0,width]);
var y = d3.scale.linear().range([height,0]);
//Defining the Axis
var xAxis=d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%d/%m")).ticks(5);
var yAxis=d3.svg.axis().scale(y).orient("left").ticks(5);
//Defining the line for user & company's Avg
var AILine =d3.svg.line()
.x(function (d){return x(d.Date)})
.y(function (d) {return y(d.AIvalue)});
var el = element[0];
//Adding the SVG to the Graph
var UserVsCompanyAILineChart=d3.select(el)
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 900 400")
//class to make it responsive
.classed("svg-content-responsive", true)
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");
data.forEach(function (d) {
d.Date=d.Date;
d.AIvalue=+d.AIvalue;
});
//Setting the Domain of Scales based on Data
x.domain(d3.extent(data,function (d) {
return d.Date;
}));
y.domain([0,d3.max(data,function (d) {
return d.AIvalue;
})]);
var dataNest=d3.nest()
.key(function (d) {
return d.Label;
})
.entries(data);
var legendRectSize = 16;
var legendSpace = (width)/dataNest.length;
dataNest.forEach(function (d,i) {
UserVsCompanyAILineChart.append("path")
.attr("class","line")
.style("stroke", function() {
return d.color = color(d.key); })
.attr("d",AILine(d.values));
UserVsCompanyAILineChart.append("text")
.attr("x", (legendSpace/2)+i*legendSpace)
.attr("y", height + (margin.bottom/2)+ 30)
.attr("class", "WizUservsCompanyAvgReportLegend")
.style("fill", function() {
return d.color = color(d.key); })
.text(d.key);
UserVsCompanyAILineChart.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.attr("x", ((legendSpace/2)-30)+i*(legendSpace))
.attr("y", height + (margin.bottom/2)+ 15)
.style('fill', function() {
return d.color = color(d.key); })
.style('stroke', function() {
return d.color = color(d.key); });
});
UserVsCompanyAILineChart.append("g")
.attr("class","x axis")
.attr("transform","translate(0,"+height+")")
.call(xAxis)
UserVsCompanyAILineChart.append("g")
.attr("class","y axis")
.call(yAxis)
}
})
}
};
});
/* Styles go here */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}
/*SVG Responsive*/
.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
/*SVG Responsive Ends*/
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" type="text/css" />
</head>
<body>
<script src="angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="script.js"></script>
<div ng-app="chartApp">
<div class="panel panel-default" data-toggle="modal" data-target="#myModal" ng-controller="LineGraphCtrl" style="height: 30%;width: 30%;float:right">
<div class="panel-body">
<div user-vs-company-a-i="" data="UservsCompanyAIData"></div>
</div>
</div>
<div class="panel panel-default" data-toggle="modal" data-target="#myModal" ng-controller="LineGraphCtrl" style="height: 70%;width: 70%;float:right" >
<div class="panel-body" >
<div user-vs-company-a-i data="UservsCompanyAIData"></div>
</div>
</div>
</div>
</div>
</body>
</html>
link here .
There are 2 charts one with smaller size , other with bigger one . Here u can see that the chart with bigger size is showing x,y axis line but in the smaller graph the x,y axis line is not visible . Is there any possible way in which we can make the chart responsive but still the x,y axis line will be viible .
Any help is appreciated .
Thanks in advance .
To stop them disappearing, make them thicker.
At the moment the stroke-width setting for your axes is 1. The main graph is at roughly 1:1 scale, so they axis lines are approximately one pixel in width. In your small scale version the axis lines are being drawn with a correspondingly smaller thickness - less than half a pixel. You can't draw half a pixel, so the browser draws the lines with a light grey colour instead, making them barely visible.
To fix, make the axis lines thicker:
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 2;
shape-rendering: crispEdges;
}
If "2" is too thick for you, you can use an intermediate value, such as 1.5.
The Solution
I suggest to redraw the chart when the browser is resized - simply by registering a listener to the window resize event. Don't forget to debounce / throttle the event so that redrawing just happens once (i.e. debouncing) (or only a few times, i.e. throttling) the browser has finished resizing.
Another hack would be to make the stroke-width thicker, but in my opinion this leads to results that look good in some resolution and bad in other. Plus, when the chart with a thicker stroke-width is rendered in a mobile-sized browser window, you end up with awkwardly looking thick axis.
So in my opinion, the best option is to redraw the chart on resize.
The Reason
When the browser is resized to a smaller size, the already rendered SVG scales down. As the first answer already pointed out, the line with a stroke-width=1 at some point becomes less than 0.5 from its original thickness and the browser decides to not draw it anymore.
I've just stumbled upon the new famous 0.5 release and things seem to be quite different (looking good). I want to implement a draggable element with inertia, but I can't figure it out by looking at the new docs.
Can anyone give me some tip on how to do this?
Here is a simple example of using the GestureHandler to track the start, move and end of a drag in the famous engine. The Position component will place our node with respect to the delta of our drag event. Notice how the node is passed to the GestureHandler to track our drag events.
Warning: As of this posting, the engine is still in Beta (0.5.2), so there is an edge case issue with trying to drag too close to the outside of the element. It may have to do with the default interval of render updates.
var rootScene = FamousEngine.createScene('body');
var rootNode = rootScene.addChild();
rootNode.setAlign(0.5, 0.5);
function Draggable(root) {
this.node = root;
this.node
.setProportionalSize(0.5, 0.5)
.setMountPoint(0.5, 0.5);
this.position = new Position(this.node);
console.log(this.position);
var base = (Math.random() * 360) | 0;
this.el = new DOMElement(this.node, {
properties: {
'textAlign': 'center',
'color': 'white',
'fontSize': '30px',
'lineHeight': '40px',
'background': 'hsl(' + ((base += 37) % 360) + ',40%,50%)',
'cursor': 'pointer'
}
});
this.el.setContent('Drag Me');
var gestures = new GestureHandler(this.node, [{
event: 'drag',
callback: drag.bind(this)
}]);
function drag(e) {
//console.log('drag', e.status, e);
switch (e.status) {
case 'start':
console.log('start drag', this.position.getValue());
break;
case 'end':
console.log('end drag', this.position.getValue());
break;
case 'move':
var d = e.centerDelta;
console.log('move drag', this.position.getValue(), d);
var pos = this.position.getValue();
this.position.set(pos.x + d.x, pos.y + d.y, pos.z);
break;
}
}
}
var dragger = new Draggable(rootNode);
FamousEngine.init();
Run the snippet example
var DOMElement = famous.domRenderables.DOMElement;
var Position = famous.components.Position;
var FamousEngine = famous.core.FamousEngine;
var GestureHandler = famous.components.GestureHandler;
var rootScene = FamousEngine.createScene('body');
var rootNode = rootScene.addChild();
rootNode.setAlign(0.5, 0.5);
function Draggable(root) {
this.node = root;
this.node
.setProportionalSize(0.5, 0.5)
.setMountPoint(0.5, 0.5);
this.position = new Position(this.node);
console.log(this.position);
var base = (Math.random() * 360) | 0;
this.el = new DOMElement(this.node, {
properties: {
'textAlign': 'center',
'color': 'white',
'fontSize': '30px',
'lineHeight': '40px',
'background': 'hsl(' + ((base += 37) % 360) + ',40%,50%)',
'cursor': 'pointer'
}
});
this.el.setContent('Drag Me<hr>');
var gestures = new GestureHandler(this.node, [{
event: 'drag',
callback: drag.bind(this)
}]);
function drag(e) {
//console.log('drag', e.status, e);
switch (e.status) {
case 'start':
console.log('start drag', this.position.getValue());
break;
case 'end':
console.log('end drag', this.position.getValue());
break;
case 'move':
var d = e.centerDelta;
console.log('move drag', this.position.getValue(), d);
var pos = this.position.getValue();
this.position.set(pos.x + d.x, pos.y + d.y, pos.z);
break;
}
}
}
var dragger = new Draggable(rootNode);
FamousEngine.init();
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
body {
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-webkit-perspective: 0;
perspective: none;
overflow: hidden;
}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
<meta name="description" content="Draggable Famous#0.5.2">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.famo.us/famous/0.5.2/famous.min.js"></script>