I want to make a dotted datagrid for the worldmap. http://prntscr.com/8oo2tw . I have used the legends(image) for every region in whole map. All seems good but when that legend lies between the boundary of the countries the legend seems to be distorted. How can i remove the stroke (boudaries between the countries) so that dotted image lying between the boundary of the countries doesnot seem distorted.
I have tried making stoke:none and stroke-width:0 and stroke-opacity:0. But doesnot seems working. My code is like:
new jvm.Map({
container: jQuery('#world-map'),
map: 'world_mill_en',
scaleColors: ['#C8EEFF', '#0071A4'],
markersSelectable: true,
hoverOpacity: 0.7,
hoverColor: false,
series: {
regions: [{
scale: {
dotted:"<?php echo $base_url .'/'. path_to_theme()?>"+"/images/dot.png",
yellowBlue: '../images/icon.png'
},
attribute: 'fill',
values: {
"AF": 'dotted',
"AX": 'dotted',
//all regions with in world_mill_en
"ZI": 'dotted',
"ZW": 'dotted',
"ZM": 'dotted',
"_1": 'dotted'
},
attribute: 'fill',
}]
},
});
You could set this parameter in a map object, like this:
regionStyle : {
initial : {
fill : "white",
"fill-opacity" : 1,
stroke : "black",
"stroke-width" : 0.0,
"stroke-opacity" : 1
},
hover : {
"fill-opacity": 1,
"stroke-width" : 0.0,
},
selectedHover : {}
},
Related
I have a very simple sunburst chart with two levels of data :
var data = [{
type : "sunburst",
labels : ["A","B","B1","B2","C","C1","C2"],
ids : ["0","10000","100001","100003","20000","200001","200002"],
parents : ["","0","10000","10000","0","20000","20000"],
values : [16,11,10,1,5,3,2],
leaf : {
opacity: 0.4
},
marker : {
line: {
width: 5
}
},
branchvalues : 'total'
}];
var layout = {
margin : {
l: 0, r: 0, b: 0, t: 0
},
width : 200,
height : 200
};
Plotly.newPlot(
'sunburst-canvas',
data,
layout,
{
displaylogo: false
});
<script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
<div id="sunburst-canvas"></div>
Is there a way to change the speed of the animation that the library performs when clicking on the inner slices (back and forth) ?
I would like to change the color of the lines in my line chart. They are set to be automatic at the moment. Two lines represent two different points of data.
My code:
vegalite({
width: 600,
heigth: 800,
data: { values: MeanAp },
mark: {
type: "line",
interpolate: "natural"
},
encoding: {
x: {
timeUnit: "month",
field: "month_mean",
type: "temporal",
title: "Month"
},
y: {
aggregate: "sum",
type: "quantitative",
field: "amount"
},
color: {
type: "nominal",
field: "status_mean"
}
}
})
The chart below:
You can change the colors for your lines by defining a custom scale range or setting a color scheme.
For example, you could manually set the color range like this, using any valid HTML color name or hex code:
color: {
type: "nominal",
field: "status_mean"
scale: {
range: ["green", "blue"]
}
}
Alternatively, you can use one of the pre-defined Vega color schemes:
color: {
type: "nominal",
field: "status_mean"
scale: {
scheme: "accent"
}
}
A full description of available color options can be found in Vega-Lite's Scale Range documentation.
I try for a while to put Labels in my Open Layers map.
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io#master/en/v6.1.1/build/ol.js">
I managed to make a map with polygons filled in red. And when you hover over a polygon with your mouse; that polygon turns green. Now I want that it also displayes the name of the area as a Text label to feature. Just in the center of that polygon is fine.
what I tried:
I found this example (https://openlayers.org/en/latest/examples/vector-labels.html) but it is too complicated for me. I don't understand where in this example they make the connection to the file with the names related to the polygon.
And I believe that this solution is outdated:
open layer: display a label from properties in geojson file
Below is the hoverStyle which makes the area turn green when you hover over it:
in index.html under <script>
var hoverStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.6)' // green
}),
stroke: new ol.style.Stroke({
width: 3,
color: 'rgba(0, 0, 0, 1)' // black
}),
//Something with the Labels here? :
text: new ol.style.Text({
text: feature.get('Area_Name'), *//I believe I have to make the connection to the Feature Area_Name here*
align: 'center',
weight: 'normal',
placement: 'line',
overflow: 'false',
color: 'rgba(0, 0, 0, 1)' // black
})
Below are the first lines of my json file with the Features and Geometry:
in the file: PS2019.json
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::28992" } },
"features": [
{ "type": "Feature", "properties": { "Area_Name": "Amsterdam", /* more attributes of the Polygon and the polygon geometry */ },
I have no clue anymore. I hope one of you can give me a step in the right direction.
If your hoverstyle is shared by all the polygons you will need a style function to set the text value
In this example https://openlayers.org/en/latest/examples/vector-layer.html where you see
style: function(feature) {
style.getText().setText(feature.get('name'));
return style;
}
and
style: function(feature) {
highlightStyle.getText().setText(feature.get('name'));
return highlightStyle;
}
you would need
style: function(feature) {
hoverStyle.getText().setText(feature.get('Area_Name'));
return hoverStyle;
}
How can I add background color to valueAxes guides label?
Seems like there is no options that we can set or I just really dont know what it is.
This is current setup that I have in amcharts
$chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": $data_trade,
"valueAxes": [ {
"position": "right",
"guides": [ {
"value": $tickValue,
"label": $tickValue,
"position": "right",
"dashLength": 0,
"axisThickness": 1,
"fillColor": "#000",
"axisAlpha": 1,
"fillAlpha": 1,
"color": "#000",
"fontSize": 16,
"backgroundColor": "#008D00",
"labelColorField": "red",
},
],
} ],
../
} );
please see image for reference
image-screenshot
Im new here, I hope I can get help
Thanks
There isn't a built-in way to do this currently but you can use the same technique in this demo to create a colored box around your label in the drawn event by changing the selector to .amcharts-axis-label.amcharts-guide to target the guide label and apply your color there. Note that the demo doesn't set individual colors, but the drawn event gives you access to the chart object if you want to pull the color from your custom backgroundColor properties:
AmCharts.makeChart("...", {
// ...
"valueAxes": [{
// ...
"guides": [{
"value": 4.5,
"label": "4.5",
"backgroundColor": "#22ff11" //custom property for drawn event
}, {
"value": 7.5,
"label": "7.5",
"backgroundColor": "#11ddff"
}]
}],
// ...
"listeners": [{
"event": "drawn",
"method": addLabelBoxes
}]
});
function addLabelBoxes(event) {
var labels = document.querySelectorAll(".amcharts-axis-label.amcharts-guide");
Array.prototype.forEach.call(labels, function(label, i) {
var parent = label.parentNode;
var labelText = label.childNodes[0].textContent; //get guide label from SVG
var svgRect = label.getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
// find the matching guide label in the chart object
var guide = event.chart.valueAxes[0].guides.filter(function(guide) {
return guide.label == labelText;
});
rect.setAttribute("x", svgRect.x);
rect.setAttribute("y", svgRect.y);
rect.setAttribute("transform", label.getAttribute("transform"))
rect.setAttribute("width", svgRect.width);
rect.setAttribute("height", svgRect.height);
rect.setAttribute("fill", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#FFD32F")); //apply background from guide if it exists
rect.setAttribute("stroke", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#4857FF")); //same for the border
rect.setAttribute("opacity", 1);
parent.insertBefore(rect, label);
});
}
Demo
I am very new in rickshaw graphics, I have this graph
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
series: [{
name : "uno",
data : data1
},
{
name : "dos",
data : data2
},
{
name : "tres",
data :data3
}
]
});
But the data value of the charts appear one above the other, for example if
the three "y" values are 1, the first one appears in 1, the second in 2 and the third one in 3.
Im not sure what parameters I have to change in order that the three values appears in 1.
The problem was that i had to define the unstack value to true
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
unstack : true,
stroke: true,
series: [{
name : "uno",
data : data1
},
{
name : "dos",
data : data2
},
{
name : "tres",
data :data3
}
]
});