I have my JSON Results shown below that i have pulled out of my database, Iwant to display this on google maps using a marker which is displayed based on the position here are the results;
{
"user": [{
"name" : "xxxxxxxxx",
"posn" : [53.491314, -2.249451]
}, {
"name" : "xxxxxxxxxx",
"posn" : [54.949231, -1.620483]
}]
}
How do i get the user name and position placed on google maps? Coding for my googlemaps below;
<div id="map_canvas" style="width:800px; height:600px;"></div>
<script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="/Scripts/markermanager.js" type="text/javascript"></script>
<script src="/Scripts/google_northamerica_offices.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
var bounds = new google.maps.LatLngBounds();
var mgr;
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
for (var i = 0; i < 10; i++) {
var latlng = new google.maps.LatLng(Math.random() * 180 - 90, Math.random() * 360 - 180);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
// animation: google.maps.Animation.DROP, // animation disabled because it slows down performance
title: "RedStar Creative Marker #" + i
});
mgr.addMarker(marker, 0);
}
mgr.refresh();
map.fitBounds(bounds);
});
}
$(document).ready(function () {
initialize();
});
</script>
i've tried doing it like this, dont know if its the right way of doing it, first time using JSON;
function setupUserMarkers() {
var markers = [];
for (var j in layer["users"]) {
var place = layer["users"][j];
var title = place["name"];
var posn = new GLatLng(place["posn"][0], place["posn"][1]);
var marker = createMarker(posn,title);
markers.push(marker);
allmarkers.push(marker);
}
mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
}
mgr.refresh();
}
UPDATE: using AJAX i was able to add the two markers based on the JSON Result, trying to figure out how to add a window popup so it will display an image of that person in the window. i know i will need an google.maps.event.addListener and the next bit well its for me to research now, hope the AJAX below will help others who come across a similiar problem to me.
$.ajax({
url: "/Home/GetUser",
context: document.body,
success: function (data) {
for (var i = 0; i < data.user.length; i++) {
var label = data.user[i].name;
var lat = data.user[i].posn[0];
var long = data.user[i].posn[1];
var latlng = new google.maps.LatLng(lat, long);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
title: label
});
In the core of your above the example code is looping 10 times adding random points - you need to replace that with a loop over your points.
Specifically this bit:
// loop over your points
for (var i = 0; i < 10; i++) {
// use your points lat/lng
var latlng = new google.maps.LatLng(Math.random() * 180 - 90, Math.random() * 360 - 180);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
// animation: google.maps.Animation.DROP, // animation disabled because it slows down performance
// use your points name
title: "RedStar Creative Marker #" + i
});
mgr.addMarker(marker, 0);
}
Here is an untested first go, no guarantees, blah blah blah :)
// loop over your points
for (var j in layer["users"]) {
var place = layer["users"][j];
// use your points lat/lng
var latlng = new google.maps.LatLng(place["posn"][0], place["posn"][1]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
// animation: google.maps.Animation.DROP, // animation disabled because it slows down performance
// use your points name
title: place["name"]
});
mgr.addMarker(marker, 0);
}
this is my JSON result i want to be able to get this image in to info window on google maps when user clicks on marker
image":"http://graph.facebook.com/10000090226****/picture?type=large"
here is part of the coding for the google maps
<script type="text/javascript">
var map;
var bounds = new google.maps.LatLngBounds();
var mgr;
function initialize() {
var myOptions = {
zoom: 2,
center: new google.maps.LatLng(53.491314, -2.249451),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
$.ajax({
url: "/Home/GetUser",
context: document.body,
success: function (data) {
for (var i = 0; i < data.user.length; i++) {
var label = data.user[i].name;
var lat = data.user[i].posn[0];
var long = data.user[i].posn[1];
var latlng = new google.maps.LatLng(lat, long);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
title: label
});
mgr.addMarker(marker, 0);
}
//adding google maps window popup...
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
});
mgr.refresh();
map.fitBounds(bounds);
});
}
$(document).ready(function () {
initialize();
});
</script>
at the moment its not opening a window, wont it even open if there is no content inside it? bit confused on trying to get the image inside the content window. I'll have to keep digging around and see if i can manage to get in the URL image in there.
does the adding window popup bit need to come after the refresh of the markers?
UPDATE; sorted the problem, was adding bits of coding in the wrong places, needed some tweaking. whats happening now is when you click the first marker it opens the info window on the second marker and displays the name, but the first marker that was initially clicked does not open an infoWindow.
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
mgr = new MarkerManager(map);
google.maps.event.addListener(mgr, 'loaded', function () {
$.ajax({
url: "/Home/GetUser",
context: document.body,
success: function (data) {
for (var i = 0; i < data.user.length; i++) {
var label = data.user[i].name;
var lat = data.user[i].posn[0];
var long = data.user[i].posn[1];
var latlng = new google.maps.LatLng(lat, long);
bounds.extend(latlng);
map.fitBounds(bounds);
var marker = new google.maps.Marker({
position: latlng,
title: label
});
var infowindow = new google.maps.InfoWindow({ content: data.user[i].name });
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
mgr.addMarker(marker, 1);
FINAL UPDATE: right i can stop panicking, managed to get it working after slapping myself to wake up and read things more than 3 times :)
Related
i created html source with this and get this code from ampchart js to use mobile application if i use pure code from ampchart its work but i want to put my value to this chart where data variable and i have JSON for this this is my json {"country":"31/08/2565","value":42} i find the way for pur this but its not working
htmlSource.Html = #"
<html><head>
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id=""chartdiv""></div>
</body>
<!-- Resources -->
<script src=""https://cdn.amcharts.com/lib/5/index.js""></script>
<script src=""https://cdn.amcharts.com/lib/5/xy.js""></script>
<script src=""https://cdn.amcharts.com/lib/5/themes/Animated.js""></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new(""chartdiv"");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: ""panX"",
wheelY: ""zoomX"",
pinchZoomX:true
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set(""cursor"", am5xy.XYCursor.new(root, {}));
cursor.lineY.set(""visible"", false);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
xRenderer.labels.template.setAll({
rotation: -90,
centerY: am5.p50,
centerX: am5.p100,
paddingRight: 15
});
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: ""country"",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0.3,
renderer: am5xy.AxisRendererY.new(root, {})
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: ""Series 1"",
xAxis: xAxis,
yAxis: yAxis,
valueYField: ""value"",
sequencedInterpolation: true,
categoryXField: ""country"",
tooltip: am5.Tooltip.new(root, {
labelText:""{valueY}""
})
}));
series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
series.columns.template.adapters.add(""fill"", function(fill, target) {
return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});
series.columns.template.adapters.add(""stroke"", function(stroke, target) {
return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});
// Set data
var data = [i i wannt to put my value here];
xAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
}); // end am5.ready()</script></html>";
i think below code fill your needs.
private static object GetChartData()
{
var data= new [] { new {
category= "Research",
value= 1000
}, new {
category= "Marketing",
value= 1200
}, new {
category= "Sales",
value= 850
}};
return data;
}
than use returning value inside your html as data
var chartData = JsonConvert.SerializeObject(GetChartData()) ;
var HtmlSource = #"
<html><head>
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id=""chartdiv""></div>
</body>
<!-- Resources -->
<script src=""https://cdn.amcharts.com/lib/5/index.js""></script>
<script src=""https://cdn.amcharts.com/lib/5/xy.js""></script>
<script src=""https://cdn.amcharts.com/lib/5/themes/Animated.js""></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new(""chartdiv"");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: true,
panY: true,
wheelX: ""panX"",
wheelY: ""zoomX"",
pinchZoomX:true
}));
// Add cursor
// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/
var cursor = chart.set(""cursor"", am5xy.XYCursor.new(root, {}));
cursor.lineY.set(""visible"", false);
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xRenderer = am5xy.AxisRendererX.new(root, { minGridDistance: 30 });
xRenderer.labels.template.setAll({
rotation: -90,
centerY: am5.p50,
centerX: am5.p100,
paddingRight: 15
});
var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0.3,
categoryField: ""country"",
renderer: xRenderer,
tooltip: am5.Tooltip.new(root, {})
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0.3,
renderer: am5xy.AxisRendererY.new(root, {})
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: ""Series 1"",
xAxis: xAxis,
yAxis: yAxis,
valueYField: ""value"",
sequencedInterpolation: true,
categoryXField: ""country"",
tooltip: am5.Tooltip.new(root, {
labelText:""{valueY}""
})
}));
series.columns.template.setAll({ cornerRadiusTL: 5, cornerRadiusTR: 5 });
series.columns.template.adapters.add(""fill"", function(fill, target) {
return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});
series.columns.template.adapters.add(""stroke"", function(stroke, target) {
return chart.get(""colors"").getIndex(series.columns.indexOf(target));
});
// Set data
var data = "+chartData+#"
xAxis.data.setAll(data);
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear(1000);
chart.appear(1000, 100);
}); // end am5.ready()</script></html>";
I am new with Google pie charts. I want to change the style of label like line color of label match with the color of slice if slice is blue then line color should be blue.
And some slice are not showing its label like the yellow and purple slice.
var data3 = google.visualization.arrayToDataTable(ClaimSubmissionStatus);
var options = {
legend: { textStyle: { color: 'black', fontSize: 14 }, position: 'labeled', alignemnt: 'center' },
//is3D: true,
// legend: { position: 'labeled' },
chartArea: { backgroundColor: '#FFFFFF', left: '5%', top: '15', width: '85%' }
};
var charta = new google.visualization.PieChart(document.getElementById('divClaimSubmission'));
charta.draw(data3, options);
google.visualization.events.addListener(charta, 'select', function () {
debugger;
var selectedItem = charta.getSelection()[0];
if (selectedItem) {
var status = data3.getValue(selectedItem.row, 0);
CLAIMSUBMISSIONSTATUSPIECHARTDetail(status);
}
});
there is no documented option for changing the color of the legend marker line,
but you can change manually on the chart's 'ready' event
also, the only solution for ensuring a line exists for each slice is to increase the height of the chart
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['Billed', 19],
['Paid Up', 9],
['Not Billed', 2],
['Ready for Review', 15],
['Not Paid Up', 1]
]);
var options = {
chartArea: {
left: 12,
top: 12,
width: '85%'
},
colors: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b', '#000000', '#ffffff'],
legend: {
position: 'labeled'
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.PieChart(container);
var drawCount = 0;
var drawMax = 100;
google.visualization.events.addListener(chart, 'ready', function () {
var observer = new MutationObserver(function () {
var svg = container.getElementsByTagName('svg');
if (svg.length > 0) {
var legend = getLegend(svg[0]);
// check number of markers
if (legend.length !== data.getNumberOfRows()) {
// increase height & redraw chart
options.height = parseFloat(svg[0].getAttribute('height')) + 32;
drawCount++;
if (drawCount < drawMax) {
chart.draw(data, options);
}
} else {
// change legend marker colors
var colorIndex = 0;
legend.forEach(function (legendMarker) {
legendMarker.path.setAttribute('stroke', options.colors[colorIndex]);
if (legendMarker.hasOwnProperty('circle')) {
legendMarker.circle.setAttribute('fill', options.colors[colorIndex]);
}
colorIndex++;
if (colorIndex > options.colors.length) {
colorIndex = 0;
}
});
}
}
});
observer.observe(container, {
childList: true,
subtree: true
});
});
// get array of legend markers -- {path: pathElement, circle: circleElement}
function getLegend(svg) {
var legend = [];
Array.prototype.forEach.call(svg.childNodes, function(child) {
var group = child.getElementsByTagName('g');
Array.prototype.forEach.call(group, function(subGroup) {
var path = subGroup.getElementsByTagName('path');
if (path.length > 0) {
if (path[0].getAttribute('fill') === 'none') {
var legendMarker = {
path: path[0]
};
var circle = subGroup.getElementsByTagName('circle');
if (circle.length > 0) {
legendMarker.circle = circle[0];
}
legend.push(legendMarker);
}
}
});
});
return legend;
}
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
notes:
1) need to use custom colors in order to keep the slice and line color in sync
2) a MutationObserver is required, the chart will revert on interactions, such as hover or select
3) manual changes will not be reflected when using chart method getImageURI
I am facing problem in drawing polygon using googleapi. Which needs to pass double array for latitude and longitude. JavaScript function is giving error.
For testing pupose I have two Arrays of type double. and values are assigned in code.
var lats = Array.CreateInstance(typeof(double), 4);
var longs = Array.CreateInstance(typeof(double), 4);
lats.SetValue(25.774252, 0);
lats.SetValue(18.466465, 1);
lats.SetValue(32.321384, 2);
lats.SetValue(25.774252, 3);
longs.SetValue(-80.190262, 0);
longs.SetValue(-66.118292, 1);
longs.SetValue(-64.75737, 2);
longs.SetValue(-80.190262, 3);
currBrowser.InvokeScript("drawPloygon", lats, longs);
Then I call a JavaScript function name 'drawPolygon' and pass two separate arrays. Which is working properly if I hardcode the triangleCoords in JavaScript Function 'drawPolygon'.
function drawPloygon(lats,longs) {
try {
var mapOptions = {
center: new google.maps.LatLng(52.483617, -1.889992),
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions)
var length = lats.length;
alert(lats);
alert(longs);
//Define the LatLng coordinates for the polygon's path.
var triangleCoords = [];
for (i = 0; i < length; i++) {
triangleCoords[i] = new google.maps.LatLng(this.javaSerial.Serialize(lats[i]), this.javaSerial.Serialize(longs[i]));
}
}
catch (err) {
alert(err);
}
var bermudaTriangle;
// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
** Below are Hardcoded triangleCoords array wokring perfectly to draw polygon**
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737),
new google.maps.LatLng(25.774252, -80.190262)
];
Any help will be appreciated. Thanks
Use the following process:
Remove this.javaSerial.Serialize calls
Define length as the shorter of the two params:
var length = 0;
if(lats.length && longs.length)
{
length = lats.length > longs.length ? lats.length : longs.length;
}
I have a Class like this:
public class Markers
{
public double latitude { get; set; }
public double longitude { get; set; }
//Constructors and Methods
//(...)
}
On my Controller I have an ActionResult with a List of Markers and I add latitude and longitude like this
List<Markers> listM = new List<Markers>(); //NOTE: this is outside of my ActionResult, no problem with that.
//(...)
listM.Add(new Markers(value[0], value[1])); //NOTE: value[0] is my lat and value[1] is my longitude
//(...)
And at the end i return my list to the View:
return (listM);
Now on the View, I need to access the data and fill an array so I can display the markers on my google map.
How to fill the array with markers in position lat, long from my list?
#using ProjectName.Models
#model List<Markers>
<html>
<head>...</head>
<body>...</body>
<script type="text/javascript">
//How can I add a GoogleMap Marker ?
var markersArray = [];
#foreach(var item in Model)
{
//can't use google.maps.Marker inside this foreach =(
}
</script>
</html>
NOTE: This is how I add a marker on that array with a click on the map.
function addMarker(location) {
var marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: location,
title: 'Bomb',
map: map,
icon: bomb
});
markersArray.push(marker);
}
Question 2:
Markers still doesn't show on map after #Leo Solution!
<script type="text/javascript">
var map;
var geocoder;
var markersArray = [];
var geoMarker;
var bomb = new google.maps.MarkerImage('Content/Images/Pins/bomb.png',
new google.maps.Size(32, 37),
new google.maps.Point(0, 0),
new google.maps.Point(22, 44)
);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(41.287739, -7.738992),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
#foreach(var item in Model)
{
<text>
var locations = google.maps.LatLng('#item.latitude', '#item.longitude', false);
addMarker(locations);
</text>
}
geocoder = new google.maps.Geocoder();
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(map);
}
geoMarker = new GeolocationMarker(map);
geoMarker.setCircleOptions({ fillColor: '#808080' });
google.maps.event.addListenerOnce(geoMarker, 'position_changed', function () {
map.setCenter(this.getPosition());
map.fitBounds(this.getBounds());
});
google.maps.event.addListener(geoMarker, 'geolocation_error', function (e) {
alert('There was an error obtaining your position. Message: ' + e.message);
});
geoMarker.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng);
});
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoomLevel = map.getZoom();
//map.setCenter(myLatLng);
document.getElementById('mapzoom').innerHTML = 'Zoom: ' + zoomLevel;
});
}
function showAddress() {
alert("Vai navegar para outro endereço!");
var address = document.getElementById('txtAddress').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: mp,
position: results[0].geometry.location
});
} else {
alert('error: ' + status);
}
});
}
function addMarker(location) {
var marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: location,
title: 'Bomba',
map: map,
icon: bomb
});
markersArray.push(marker);
}
function setAllMap(map) {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(map);
}
}
function clearMarkers() {
setAllMap(null);
}
function showMarkers() {
setAllMap(map);
}
function deleteMarkers() {
clearMarkers();
markersArray = [];
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
if (!navigator.geolocation) {
alert('Your browser does not support geolocation');
}
</script>
Try this.....
<script>
var markersArray = [];
var _map = null;
var _c = null;
#foreach(var item in Model)
{
<text>
markersArray.push(new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng('#item.latitude', '#item.longitude', false),
title: 'Whatever title',
map: _map
}));
</text>
}
</script>
Second Question
I had to carefully look at your code and found 3 problems...one of them you've already mentioned it. The other ones are that you are duplicating variable names and you are not instantiating a new object. Now change this....
#foreach(var item in Model)
{
<text>
var locations = google.maps.LatLng('#item.latitude', '#item.longitude', false);
addMarker(locations);
</text>
}
to this....
#foreach(var item in Model)
{
<text>
addMarker(new google.maps.LatLng(parseFloat('#item.latitude'), parseFloat('#item.longitude')));
</text>
}
Let me know how it goes
I have this strange bug in my code.
When I use amcharts and I'm trying to show the percentage on each column, every column is 100.00 percent.
AmCharts.ready(function () {
$.ajax({
url: 'Analytics/GetDivergenceByApp?appid=46',
type: 'POST',
contentType: 'application/json;',
//data: JSON.stringify({ id: checkId }),
success: function run(dataset) {
// RADAR CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = dataset;
chart.categoryField = "col";
chart.startDuration = 1;
chart.sequencedAnimation = false;
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = "start";
// VALUE AXIS
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0.15;
valueAxis.minimum = 0;
valueAxis.dashLength = 3;
valueAxis.stackType = "regular";
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "column";
graph.labelText = "[[percents]]%";
graph.valueField = "value";
graph.title = "All Pushes";
graph.fillAlphas = 0.6;
graph.balloonText = "[[value]] os type installations";
chart.addGraph(graph);
// WRITE
chart.write("chartdiv2");
}
});
});
I'm using C# with MVC4 to get the data and I should note it appears fine on the chart.
How do I fix that to show the real percentage?
This won't work, [[percents]] display the percentage of the graph of one series, so it makes sense only if you have more than one graph. In your case you should calculate the percent values manually, add them to your data, with some custom field name like "percentsCalculated" and then display this value in a label: [[percentsCalculated]]