If you look up "Mississauga" on Google Maps, it returns boundaries that look like this:
What I need are the Southwest and Northeast coordinates of the boundary (the red square in the picture above).
However, when I use the Google Maps API, it returns the following bounds:
"bounds": {
"northeast": {
"lat": 43.737351,
"lng": -79.17856599999999
},
"southwest": {
"lat": 43.4173019,
"lng": -79.8101295
}
},
But when you plug these values into a map plotter, it gives the following area:
Which is ridiculously wrong as it includes almost all of Toronto, rather than just Mississauga.
How can I get the proper boundary coordinates of a city? Am I doing something wrong?
You could use a KMZ or KML file that contains the bounds of Mississauga. A search for Mississauga KMZ, returned this link
I edited the file to just contain Mississauga
Displayed on KmlLayer
code snippet:
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"));
var kmlLayer = new google.maps.KmlLayer({
url: "http://www.geocodezip.com/geoxml3_test/kmz/Mississauga.kmz",
map: map
})
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
There's nothing wrong with the Geocoder nor what you're doing.
This bounds from geocoder is covering just enough.
"bounds": {
"northeast": {
"lat": 43.737351,
"lng": -79.17856599999999
},
"southwest": {
"lat": 43.4173019,
"lng": -79.8101295
}
},
It may seem like the Geocoder extended Mississauga's bounds to Toronto, but that is not the real case.
The bounds are extending up to the part of Lake Ontario that belongs to Mississauga, right below the lake part that belongs to Toronto.
The Mississauga area looks something like this when the lake area is also highlighted: http://jsbin.com/xoxevaw/edit?output (Note: The coordinates used for the poly lines which highlights the lake are just approximate)
Related
I'm using the Nivo stacked bar chart to show a score range on the bar. To do this, I've used the markers prop. I've almost got it looking the way I'd like except the markers extend beyond the bar and it's not what I need.
When someone asked the same question on Github, it looks as though there isn't currently an easy way to do this. plouc, the creator of nivo said the following:
short answer, you cannot :/ However you can use an extra layer to achieve the same result, using the layers property and adding an extra component.
The photo attached is from the Nivo documentation on adding a marker (clicking on the Story tab will show basic code).
Here is the source code for the markers item. If you search for width throughout the document, you can see that it's set in the x2 of the line. Scrolling down further, you can see there is a strokeWidth property, but from what I can tell it only controls the thickness of the line, not how wide it is.
Can someone please let me know what I missed?
Here is my code. I am displaying two markers on my bar chart so there are two marker objects passed in. I've removed unrelated Bar props for simplification.
<NivoBar
data={data}
keys={['floor', 'pattern', 'ceiling']}
markers={[
{
axis: 'y',
position: 'right',
legendOffsetX: -34,
legendOffsetY: 0,
value: ceiling,
lineStyle: {stroke: 'red', strokeWidth: 2},
legend: `${ceiling}%`,
legendOrientation: 'horizontal',
textStyle: {fill: 'orange', fontWeight: 'bold'}
},
{
axis: 'y',
position: 'right',
legendOffsetX: -34,
legendOffsetY: 0,
value: floor,
lineStyle: {stroke: 'red, strokeWidth: 2},
legend: `${floor}%`,
legendOrientation: 'horizontal',
textStyle: {fill: 'orange, fontWeight: 'bold'}
}
]}
/>
As i am pretty new to Charting libraries and in my case i have been asked to implement a Chartjs library for my requirement. So i have chosen a chartjs library.
The use case i must want to know if anybody can help me then it would be a great time saver for me. Actually i am googleling since morning for this.
The actual use case is i have doughnut chart in which i am trying to show the data of a single value. As i have gone through the documentation the chartjs works on a array of data values. But my API is having only one value, means in my case its a counter variable. Assume if my maximum counter limit is say 5000 then i have to show that 5000 as a maximum counter and as the current counter is say 100 then i have to show it in the doughnut arc in red color. Means how much the graph has consumed the data something like that.
Assume total runs 5000
If runs became any count like 100 then we need to do minus from total runs - current runs count = 4900 inside the doughnut circle. As the runs increases then we need to show the reduced count runs inside the doughnut circle graph.
Once if the current runs count comes to total runs the show the circle in red color and make the count to 0.
Is this possible using Chartjs? See below picture.
There is no built-in support for doing this in Chart.js, however, it can be achieved using a very simple hack. Look at the code and try to understand, if any issues feel free to comment.
I have used chartjs-datalabels plugin to show datalabels on the pieChart.
Hope it helps!
Fiddle -> http://jsfiddle.net/y6mnkz84/7/
function drawPieChart(value, maxValue) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Consumed"],
datasets: [{
data: [value, maxValue - value],
backgroundColor: ['green', 'red'],
}]
},
options: {
tooltips: {
enabled: false,
},
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
display: function(context) {
var dataset = context.dataset;
var value = dataset.data[context.dataIndex];
return value > 0;
},
color: 'white'
}
}
}
});
}
drawPieChart(5000, 5000);
To track number of visitor comes through which website and do some analysis on the same. We are creating a column chart to show the analysis report in graphical form.
All the things are showing correctly on chart, but we are showing website name on haxis. As website name is too long like "www.google.com", www.facebook.com, this label are being cut off on haxis.
Code to draw chart is given below:
function createTodayChart(chartData){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sources');
data.addColumn('number', 'Total Sales');
for (var i in chartData){
//alert(chartData[i][0]+'=>'+ parseInt(chartData[i][1]));
data.addRow([chartData[i][0], parseInt(chartData[i][1])]);
}
var options = {
legend: {position:'top'},
hAxis: {title: 'Sources', titleTextStyle: {color: 'black'}, count: -1, viewWindowMode: 'pretty', slantedText: true},
vAxis: {title: 'Total Sales (in USD)', titleTextStyle: {color: 'black'}, count: -1, format: '$#'},
colors: ['#F1CA3A']
};
var chart = new google.visualization.ColumnChart(document.getElementById('my_div'));
chart.draw(data, options);
}
Data in chartData variable is in array form as:
var chartData = [];
cartData.push('www.w3school.com', 106);
cartData.push('www.google.com', 210);
Width and height of "my_div" are 350px and 300px respectively. We have also attached screen shot of this issue given below:
Can anyone help me that how can we prevent this cutting issue. Or, Is any method available in google chart API to prevent this?
Waiting for solution.
This is an always recurring issue in google visualization, in my opinion :( There are a few "tricks" one can experiment with : chartArea and hAxis.textPosition. Here is your code in a jsFiddle with the following chartData, reproducing the problem above :
var chartData = [
['www.facebook.com', 45],
['http://www.google.com', 67],
['www.stackoverflow.com', 11]
];
fiddle -> http://jsfiddle.net/a6WYw/
chartArea can be used to adjust the upper "padding" taking space from the legend / hAxis below along with the internal height of the bars (the chart itself without axis and legend). For example
chartArea: {
top: 55,
height: '40%'
}
Will shrink the chartArea, giving room for the legend on the hAxis.
fiddle -> http://jsfiddle.net/Swtv3/
My personal favourite is to place the hAxis legend inside the chart by
hAxis : { textPosition : 'in' }
This will honor both short and long descriptions, and does not make the chart looking too "weird" when there is a few very long strings.
fiddle -> http://jsfiddle.net/7HBmX/
As per comment - move the "in" labels outside the chart. There is to my knowledge no native way to do this, but we can always alter the <svg>. This can be a difficult task, but in this case we know that the only <text> elements who has the text-anchor="middle" attribute is the h-axis labels and the overall h-axis description. So
var y, labels = document.querySelectorAll('[text-anchor="middle"]');
for (var i=0;i<labels.length-2;i++) {
y = parseInt(labels[i].getAttribute('y'));
labels[i].setAttribute('y', y+30);
}
to move the labels outside the chart. demo -> http://jsfiddle.net/970opuu0/
I've got a chart where the legend consists of URLs (there could be many)
I'd like to arrange them in a vertical list or grid and get rid of < >, but can't seem to work out how.
I've had a look through the docs but nothing stands out, any suggestions?
Try this on your code:
var options = {
legend: { position: 'top', maxLines: '6'},
vAxis: {format:'###,###'}
};
Hope to help!
I am generating this Google Line Chart using the Google JS API. As you can see, the labels are very narrow. How do I make it so that the whole label text is visible?
Here are some samples based on the google code playground line charts. Adjusting the chartArea width option gives more space for labels:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
chartArea: {width: '50%'}}
);
If it's an option, you could also position the labels beneath the chart, which gives considerably more space:
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
legend: 'bottom'}
);
Expanding the chartArea option to a width of 100% solved the problem for me. Contrary to the documentation, the chartArea does include the legend. I used a PieChart but the same option is available for the LineChart.
var options = {'title':title,'width':w,'height':h,'chartArea':{left:0,top:10,width:"100%"}};
var chart = new google.visualization.PieChart(document.getElementById(chartDiv));
chart.draw(data,options);
Reference.
None of the previous answers worked well for me. Setting width to less than 100% centers the plot area and leaves too much unused space on the left. Setting it to 100% is not a solution either.
What worked well - see live working fiddle - is setting the right value to accommodate the legend, then adjusting the left value eventually, for the Y axis title and labels. The plot area width will adjust automatically between these two fixed margins:
var options = {
...
legend: { position: 'right' },
chartArea: {
right: 130, // set this to adjust the legend width
left: 60, // set this eventually, to adjust the left margin
},
...
};
There is an option in legend.textStyle we can customize legend text styles inside google charts
var options = {
legend: { textStyle: { fontSize: 78 //size of the legend
} }
}
You need to make the chart wider or your labels shorter.