We Keep Coding

google pie charts with label(change the color of line of labels)

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

Draw a line chart dynamically using sql server database using highchart.js

Not able to generate dynamic line chart with x-axis and series dynamically
I want month wise count for different destination.
I have done like this
function GetDestinationData() {
$.ajax({
async: false,
type: "POST",
url: "DataAnalysis.aspx/getDestination",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: OnSuccess1_,
error: OnErrorCall1_
});
}
function OnSuccess1_(response) {
var Xaxis = [];//skapa tre olika array
var dataseries = [];
for (var i = 0; i < response.d.length; i++) {
var items = response.d[i];
var XcategoreisItem = items.Month;
var seriesData = items;
if ($.inArray(XcategoreisItem, Xaxis) == -1) {
Xaxis.push(XcategoreisItem);
}
dataseries.push(seriesData);
// console.log(dataseries);
}
drawLineChart(Xaxis, dataseries);
}
function drawLineChart(Xaxis, dataseries) {
//categories = seriesData.map(function (a) { return a.x; });
//categories = categories.filter(function (v, i) { return categories.indexOf(v) == i; });
var chart = Highcharts.chart('container', {
chart: {
type: 'line',
//zoomType: 'xy',
//panning: true,
//panKey: 'shift'
},
//chart: {
// renderTo: 'container',
// type: 'line',
// marginRight: 130,
// marginBottom: 25
//},
title: {
text: 'Destination Count Month Wise'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y}',
}
}
},
xAxis: {
categories: Xaxis
},
yAxis: {
labels: {
formatter: function () {
return this.value ;
}
},
plotLines: [{
//value: 0,
width: 1,
color: '#808080'
}]
},
series: [{
//name: 'Id',
data: dataseries
}],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
});
for (var i = 0; i < dataseries.length; i++) {
//dataseries = dataseries.filter(function (e) {
// return e.Month == dataseries[i].Month
//}
//);
chart.addSeries({
name: dataseries[i].destination,
data: [dataseries[i].A1ResultCount]
});
//chart.series[i].setData(dataseries[i].data);
}
//chart.redraw();
}
Rendered Chart

Maybe consider using a web-component that handles dynamic data?
Using highcharts-chart you could do:
const chart = $('#Chart')[0]
function OnSuccess1_(response) {
var Xaxis = [];//skapa tre olika array
var dataseries = [];
for (var i = 0; i < response.d.length; i++) {
var items = response.d[i];
var XcategoreisItem = items.Month;
var seriesData = items;
if ($.inArray(XcategoreisItem, Xaxis) == -1) {
Xaxis.push(XcategoreisItem);
dataseries.push({name: items.month, data: items.data_maybe})
}
chart.data = dataseries
}
}
//Example Data
chart.xAxis = {categories: ['Jan','Feb','Mar','Apr','May','Jun']}
chart.data = [43,81,52,84,53,45]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="import" href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/highcharts-chart.html">
<highcharts-chart id='Chart' title='Destination Count Month Wise' type='line' y-label='Destinations' x-label='Month'></highcharts-chart>
Note: Click Run code snippet to see the chart
Edit:
As I was writing this answer, I also realized you were setting categories for a line series? You don't need categories, instead, you need multiple series itself, each with their own name corresponding to the month.

In hight chart how can i show yAxis value on xAxis?

.SetXAxis(new XAxis
{
Categories = xyzList.ToArray(),
Labels = new XAxisLabels
{
// Formatter = "function() { return this.labels; }",
Style = "color: 'Black',fontSize: '10px',fontFamily: 'Arial'",
UseHTML = true,
//formatter with image is
Formatter = "function() { return '<div class=\"ImageDiv\" style=\"height:25px; background-image:url(../../Themes/Images/'+ this.value+'.jpg)\"/>';}",
// Formatter = "function() { return this.y;}",
}
})
i want to display YAxis value in to xAsix but it shows undefined.
How can i access YAxis value on the XAXis?

The answer depends on data format you are using. Possible solution: http://jsfiddle.net/3bQne/1036/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['01/02/2012', '01/03/2012', '01/04/2012', '01/05/2012', '01/06/2012', '01/07/2012'],
labels: {
formatter: function () {
var index = this.axis.categories.indexOf(this.value);
var points = this.axis.series[0].options.data;
return points[index];
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}]
});

C# ASP.NET MVC Project and Google Maps: How to fill JavaScript array with values from C# List<>

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

how to get JSON Results placed on Google Maps?

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 :)