cluster with gmap3 and markerclusterer plus - maps

Using gmap3 and markerclusterer plus ( https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerclustererplus/?r=394 )
how can I specify that a cluster should contain minimum 50 markers, for instance?
So, if they are less than 50 markers, they should not be grouped in a cluster.

You can specify since what number you want to start clustering.
In the example below there's a cluster for more than 50, 100 or 150 markers.
marker: {
values: $scope.json_coordinates,
cluster:{
radius:100,
// This style will be used for clusters with more than 50 markers
50: {
content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
width: 53,
height: 52
},
// This style will be used for clusters with more than 100 markers
100: {
content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
width: 56,
height: 55
},
// This style will be used for clusters with more than 150 markers
50: {
content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
width: 66,
height: 65
}
},
options: {
optimize: false,
icon: new google.maps.MarkerImage("/assets/images/overlay.png")
}
}

you can use the minimum cluster size:
var mc = new MarkerClusterer(map, markers, {minimumClusterSize: 50});

Related

Can't show all data on Lightweight Chart when chart is small, is it expected?

Not sure if it's a limitation or not but I can't make chart display all data (I have 1500 records). fitContent() or setVisibleRange() doesn't help.
Demo
var chart = LightweightCharts.createChart(document.body, {
width: 600,
height: 300,
rightPriceScale: {
scaleMargins: {
top: 0.1,
bottom: 0.1,
},
},
});
var areaSeries = chart.addAreaSeries({
topColor: 'rgba(76, 175, 80, 0.56)',
bottomColor: 'rgba(76, 175, 80, 0.04)',
lineColor: 'rgba(76, 175, 80, 1)',
lineWidth: 2,
title: 'AAPL',
});
areaSeries.setData([{
"time": 1629353327,
"value": 19.97
}, {
"time": 1629439727,
"value": 19.67
},
....
}]);
chart.timeScale().fitContent();
Is this expected? It'll work if chart width is set to 800px.
By default the min bar spacing value (the min space between bars) is 0.5, which allows you to show 2 values per 1 pixel. But if you want to show more data in a small viewport, you need to change this value to a smaller value, e.g. 0.001.
You can do that by modifying minBarSpacing option of timeScale - just add timeScale: { minBarSpacing: 0.001 } to your chart's options and it will work. Demo

Individual shape and position of annotations in highcharts

I have figured out how to set the size for an annotation individually:
labels: [
{
point: {
x: chart.xAxis[0].max - 0.1,
y: 50,
xAxis: 0,
yAxis: 0
},
height: 100,
shape: "rect",
text: "test",
verticalAlign: "bottom"
}
]
I would like it to position between 50 and 150. How can I achieve that?
And additionally, I would like the text to be aligned in the center of the box?!
You can calculate the height by using toPixels method. You have to also take a padding into account. To center the text you can use asynchronous function, because annotations do not exist in load event yet.
chart: {
events: {
load: function() {
const chart = this;
const height =
chart.yAxis[0].toPixels(50) - chart.yAxis[0].toPixels(150);
chart.addAnnotation({
labels: [
{
point: {
x: chart.xAxis[0].max - 0.1,
y: 150,
xAxis: 0,
yAxis: 0
},
y: 0,
padding: 0,
height: height,
shape: "rect",
text: "test",
verticalAlign: "top"
}
]
});
}
}
}
Live demo: https://codesandbox.io/s/qqqkx2zr49
API: https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

How to decorate Google Line Chart using react-google-charts plugin

I am using react-google-charts in my reactjs application to create google line chart. I don't find any detailed document for this plugin.
I have few questions:
a) How to specify scaleStepWidth?
b) How to create pointDot in Line Chart?
To enable pointDot in line chart you have to just set "true" the points property option in configuration i-e
"pointsVisible: true"
Moreover you can find an example of line chart here
https://github.com/RakanNimer/react-google-charts/blob/HEAD/sandboxes/linechart/index.js
Other customization options if required then you can provide it in option property. for example just like below:
var options = {
//title: 'Graph',
//isStacked: true,
//legend: { position: 'top', maxLines: 3 },
width: chartwidth1 / 2 * 2,
height:450,
vAxis: {
gridlines: { count: 15 },
viewWindow: { min: -100000, max: 2000000},
},
//series: series,
chartArea: {
top: '10%', // set this to adjust the legend width
left: '8%', // set this eventually, to adjust the left margin
height: "80%",
width: "93%",
//width: "60%"
},
legend: { position: 'top', alignment: 'start' },
pointsVisible: true
}

How can I set max value(range) for y-axis and bar width of a bar chart using nvd3.js

I have generated a bar chart for the data to show ratings of five topics on scale of 5 (Ratings).On x-axis I showed Topic names.
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d) {
return d.label;
},
y: function(d) {
return d.value;
},
showValues: true,
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
};
$scope.data = [{
values: $scope.Details.ratings
}];
HTML:
<nvd3 options="options" data="data"></nvd3>
On y-axis the max value should be 5, but here it is taking the maximum value among the data and the bars in the bar chart are having large width. How can I change the bar width and max range on y-axis?
i used the following code to set bar width and adjust the bar curvature
enter code here
dispatch: {
renderEnd: function (e) {
d3.selectAll("rect.nv-bar").attr('rx', 4).attr('ry', 4).attr('width', 15)
}
}
putting
groupSpacing : 0.57,
in chart dict will also help to adjust width dynamically

How can I display legend in two columns in pie chart

I want to display legend in two columns in the pie chart. My JSfiddle: http://jsfiddle.net/Cp73s/2185/
itemStyle: {
width:200,
font: 'Helvetica Neue'
},
Try this
legend: {
borderRadius: 0,
borderColor: 'silver',
enabled: true,
margin: 30,
itemMarginTop: 2,
itemMarginBottom: 2,
width:200,
itemWidth:100,
itemStyle: {
width:100
}
}
fiddle link :)
function renderElements() {
if (this.legend) {
this.legend.destroy();
}
//distance between 2 elements
let itemDistance = this.legend.options.itemDistance;
//the biggest element
let maxItemWidth = this.legend.maxItemWidth;
//make the width of the legend in the size of 2 largest elements +
//distance
let nextLegendWidth = (maxItemWidth * 2) + itemDistance;
//container width
let boxWidth = this.plotBox.width;
//if the length of the 2 largest elements + the distance between them
//is less than the width of container, we make 1 row, else
//set legend width 2 max elements + distance between
if (boxWidth < nextLegendWidth) {
this.legend.options.width = maxItemWidth;
} else {
this.legend.options.width = nextLegendWidth;
}
this.render()
}
chart: {
events: {
load: renderElements,
redraw: renderElements
}
}
https://jsfiddle.net/jecrovb7/38/
You need to set a bunch of things in order to make it look as you expecting.
First you need to change the layout parameter to 'horizontal', enable the floating, setting fixed width of legend for example to 300 and finally - position it by x, y parameters. Here is the code and example:
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'horizontal',
floating: true,
useHTML: true,
symbolWidth: 0,
width: 300,
y: 80,
itemMarginTop: 5,
itemMarginBottom: 5,
itemStyle: {
width: 200,
font: 'Helvetica Neue'
},
}
Live example: https://jsfiddle.net/9pnru4s7/

Resources