do you have a type of "half gauge", that show the trends on top of it?like in this picture:enter image description here
For business purpose, so we are open to buy the licence
Yes, you can create the required chart with AnyChart library. We have prepared a similar sample, you can check it below.
For purchasing AnyChart, please, contact us by email - sales#anychart.com
var data = [45, 67, 56];
var axisMaximum = 100;
data.push(axisMaximum);
var dataSet = anychart.data.set(data);
anychart.onDocumentReady(function () {
var stage = anychart.graphics.create("container");
var circularGauge = anychart.gauges.circular();
circularGauge.data(dataSet);
circularGauge.fill('#fff')
.stroke(null)
.padding(0)
.startAngle(270)
.sweepAngle(180);
var circularAxis = circularGauge.axis().radius(100).width(1).fill(null);
circularAxis.scale()
.minimum(0)
.maximum(axisMaximum);
circularAxis.labels().enabled(false);
circularAxis.ticks().enabled(false);
circularAxis.minorTicks().enabled(false);
circularGauge.bar(0).dataIndex(0)
.radius(100)
.width(15)
.fill('red')
.stroke(null)
.zIndex(5);
circularGauge.bar(1).dataIndex(3)
.radius(100)
.width(15)
.fill('#cecece')
.stroke(null)
.zIndex(3);
// marker
circularGauge.marker(0)
.axisIndex(0)
.dataIndex(1)
.size(7)
.stroke(null)
.fill('blue')
.type("triangle-down")
.position("outside")
.radius(108);
// marker
circularGauge.marker(1)
.axisIndex(0)
.dataIndex(2)
.size(7)
.stroke(null)
.fill('green')
.type("triangle-down")
.position("outside")
.radius(108);
var circularLabel0 = circularGauge.label(0);
circularLabel0
.enabled(true)
.anchor('center-bottom')
.useHtml(true)
.hAlign("center")
.text("<p style='color:red; font-size:20'>30 %</p><br>" +
"<p style='color:black; font-size:20; text-decoration:overline;'>% of Gross sales</p>");
var circularLabel1 = circularGauge.label(1);
circularLabel1
.enabled(true)
.anchor('center-top')
.padding(15)
.fontSize(20)
.fontColor('black')
.text('Product 1.1');
var circularTitle = circularGauge.title();
circularTitle.enabled(true)
.text('Division 1')
.fontColor('black')
.fontSize(25);
circularGauge.container(stage).draw();
});
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<link href="https://cdn.anychart.com/releases/8.2.1/fonts/css/anychart-font.min.css" rel="stylesheet"/>
<link href="https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-circular-gauge.min.js"></script>
<div id="container"></div>
Related
new to openlayers, i am currently trying to grab all tiles at certain zoom level within the view extent and add a feature/icon to each tile location, i can grab tile coords using
src.getSource().getTileGrid().forEachTileCoord
problem is it returns Z,X,Y tile coords (ie [16, 31689, 20858]) and i cant find anyway to either set icons location with these coords or convert them to lon/lat (eg 'EPSG:4326'[-5.928909184411161, 54.5921176536682]
iv tried
ol.proj.toLonLat
but it returns 0.00014373044545912343, 0.284665959233962, 20858.
as im new i may have something fundamentally wrong with my setup, or im completely missing something,thanks
To get actual coordinates you can use getTileCoordExtent / getCenter. This will get you the center coordinates for each tile.
By default the coordinate format is EPSG:3857 and no conversion should be needed to add a Feature.
const zDirection = 0;
const tileLayer = new ol.layer.Tile({
source: new ol.source.TileDebug({
zDirection: zDirection,
})
});
const style = new ol.style.Style({
image: new ol.style.Circle({
radius: 70,
fill: new ol.style.Fill({color: 'rgba(255, 0, 0, .2)'}),
}),
});
const layer = new ol.layer.Vector({
style: style,
});
const map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 5000000],
zoom: 2,
}),
layers: [tileLayer, layer],
});
map.on('moveend', function () {
const view = map.getView();
const tileGrid = tileLayer.getSource().getTileGrid();
const extent = view.calculateExtent();
const zoom = tileGrid.getZForResolution(view.getResolution(), zDirection);
const features = [];
tileGrid.forEachTileCoord(extent, zoom, function (tileCoord) {
const center = ol.extent.getCenter(tileGrid.getTileCoordExtent(tileCoord));
features.push(new ol.Feature(new ol.geom.Point(center)));
});
layer.setSource(new ol.source.Vector({features: features}));
});
html, body {
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: stretch;
height: 100vh;
width: 100vw;
}
#map {
flex: 1;
}
<head>
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers#v6.14.1/src/ol/ol.css" rel="stylesheet"/>
</head>
<body>
<div id="map"></div>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.14.1/build/ol.js"></script>
</body>
I want to display a drop-down list of buttons in the left panel, one button for one "need".
Later, the user will be able to add a new need-button to the list.
I use a panel with "itemArray" binding.
But the button is not displayed when sentence: addNeed("My new need"); is executed.
I checked with the "dynamicPorts sample but I can't understand why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta name="minimumCode" content="width=device-width, initial-scale=1">
<title>minimumCode</title>
<meta name="description" content="Iso prototype Leon Levy" />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<span id="diagramEventsMsg" style="color: red"></span>
<script id="code">
var ellipseStrokeWidth=3;
var ellipseWidth = 80;
var ellipseHeight = 25;
var myFont = "16px sans-serif";
var myFontMedium = "23px sans-serif";
var myFontLarge = "30px sans-serif";
var needWidth = 170;
var needHeight = 20;
var needStrokeWidth = 0;
var needColor = 'purple';
var portSize = new go.Size(8, 8);
function init() {
var $ = go.GraphObject.make; //for conciseness in defining node templates
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
});
myBannerNeeds =
$(go.Diagram, "myBannerNeedsDiv",
{ layout: $(go.GridLayout, { wrappingColumn: 1, alignment: go.GridLayout.Position
})}
);
myBannerNeeds.nodeTemplate =
$(go.Node,
$(go.Panel, "Vertical", //needs list buttons
{ alignment: new go.Spot(0, 0), row: 0, column: 0},
new go.Binding("itemArray", "needsDataArray"),
{ itemTemplate:
$(go.Panel,
$(go.Shape, "Rectangle",
{ stroke: "red", strokeWidth: 2,
height: 30, width: 30}
),
$(go.TextBlock, { text: "...", stroke: "gray" },
new go.Binding("text", "key"))
) // end itemTemplate
}
) // end Vertical Panel
);
// Add a button to the needs panel.
function addNeed(newNeedName) {
myDiagram.startTransaction("addNeed");
var button = $('Button',
$(go.Shape, "Rectangle",
{ width: needWidth, height: needHeight, margin: 4, fill: "white",
stroke: "rgb(227, 18, 18)", strokeWidth: needStrokeWidth}),
$(go.TextBlock, newNeedName, // the content is just the text label
{stroke: needColor, font: myFont }),
{click: function(e, obj) { needSelected(newNeedName); } }
);
var needsNode = needsDataArray; //document.getElementById("ForNeeds");
if (needsNode) { showMessage("needsNode is true; " + button)}
else {showMessage("needsNode is false")};
myDiagram.model.insertArrayItem(needsNode, -1, button);
myDiagram.commitTransaction("addNeed");
}// end function addNeed
var needsDataArray = [];
var linksNeedsDataArray = []; // always empty
myBannerNeeds.model = new go.GraphLinksModel( needsDataArray, linksNeedsDataArray);
myDiagram.grid.visible = true;
myDiagram.model.copiesArrays = true;
myDiagram.model.copiesArrayObjects = true;
addNeed("My new need");
function needSelected(e,obj) {
alert("e:" + e + "; obj:" + obj + ' selected')
}; //end function flowTypeSelected
function showMessage(s) {
document.getElementById("diagramEventsMsg").textContent = s;
}
}// end function init
</script>
</head>
<body onload="init()">
<div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ; height: 800px; width:1080px; font-size:0; position: relative; ">
<div id="ForNeeds">
<div id="myBannerNeedsDiv" style="display: inline-block; width: 200px; min-height: 400px; background: whitesmoke; margin-right: 0px; border: solid 1px purple;">
</div>
</div>
<div id="myDiagramDiv" style="flex-grow: 1; width: 804px;height: 100%; border: solid 1px black;">
</div>
</div>
</body>
</html>
Here's a basic demonstration of what I think you are asking for:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: "white" }),
$(go.Panel, "Vertical",
$(go.TextBlock,
{ margin: 4 },
new go.Binding("text")),
$(go.Panel, "Vertical",
new go.Binding("itemArray", "buttons"),
{
itemTemplate:
$("Button",
$(go.TextBlock, new go.Binding("text", "")),
{
click: function(e, button) {
alert(button.data);
}
}
)
}
)
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", buttons: ["one", "two"] },
{ key: 2, text: "Beta", buttons: ["one"] }
],
[
{ from: 1, to: 2 }
]);
}
function test() {
myDiagram.commit(function(diag) {
diag.selection.each(function(n) {
if (n instanceof go.Node) {
diag.model.addArrayItem(n.data.buttons, "another");
}
})
})
}
</script>
</head>
<body onload="init()">
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<button onclick="test()">Test</button>
</body>
</html>
Select a Node and then click the HTML "Test" Button. It will add an item to the node's data.buttons Array, which causes a copy of the Panel.itemTemplate to be added to that Panel. In this case, that item template is just a GoJS "Button" which when clicked calls alert with the value of the item, a string.
Note how the value added to the JavaScript Array in the data is just a simple object -- in this case just a string, although it is commonplace to have each Array item be a JavaScript Object with various properties. I think your problem is that you are trying to add GraphObjects to the Array. That's a no-no -- you should not be mixing the Diagram's GraphObjects with the Model data.
I'm using google charts with this code:
<?php
function testing($chartId, $chartFunc, $chartTitle, $xAxisTitle, $chartData, $chartType)
{
$pageMeat =<<<EOD
<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($chartFunc);
function $chartFunc() {
var data = google.visualization.arrayToDataTable($chartData);
var options = {
title: '$chartTitle',
hAxis: {title: '$xAxisTitle', titleTextStyle: {color: 'red'}}
};
EOD;
if($chartType == "line") {
$pageMeat .=<<<EOD
var chart = new google.visualization.LineChart(document.getElementById('$chartId'));
EOD;
}
else if($chartType == "pie") {
$pageMeat .=<<<EOD
var chart = new google.visualization.PieChart(document.getElementById('$chartId'));
EOD;
}
else {
$pageMeat .=<<<EOD
var chart = new google.visualization.ColumnChart(document.getElementById('$chartId'));
EOD;
}
$pageMeat .=<<<EOD
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="$chartId" style="width: 900px; height: 500px;"></div>
</body>
</html>
EOD;
echo $pageMeat;
}
$gChartId = "vertColumns";
$gChartFn = "columnChart";
$gChartTitle = "Company Performance";
$gXAxisTitle = "Year";
$gChartData[] = array('Year', 'Sales', 'Expenses');
$gChartData[] = array('2004', 1000, 400);
$gChartData[] = array('2005', 1170, 460);
$gChartData[] = array('2006', 660, 1120);
$gChartData[] = array('2007', 1030, 540);
testing($gChartId, $gChartFn, $gChartTitle, $gXAxisTitle, json_encode($gChartData), "column");
?>
It works with line, pie and columncharts but when i try to use a table chart https://developers.google.com/chart/interactive/docs/gallery/table
It doesn't seem to work, how can i use a array with this table chart?
Thank you for help
you need to include the table package...
packages:["corechart", "table"] // <-- include table package here
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 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>