I am trying to display multiple paths in my OSM maps using angular leaflet. Paths types like multiple circle and polygons.
For circle, the below code:
angular.forEach($scope.alertcircles, function(obj, key){
var arraylen = obj.g_pos_circle.coordinates[0].length;
console.log(obj.id);
$scope.paths['circle' + obj.id] = {
circle: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 8,
radius: 6,
latlngs: [],
type: 'circle',
clickable: true,
heading: 240
}
};
for(i=0; i<obj.g_pos_circle.coordinates[0].length;i++){
var coord = obj.g_pos_circle.coordinates[0][i];
angular.extend($scope.paths ['circle' + obj.id] .circle.latlngs.push({
lat: parseFloat(coord[1]),
lng: parseFloat(coord[0])
}))
}
$scope.paths['circle' + obj.id].circle.radius = obj.g_pos_radius
});
For polygon
angular.forEach($scope.alertareas, function(obj, key){
var arraylen = obj.g_pos_poly.coordinates[0].length;
console.log(obj.id);
$scope.paths['area' + obj.id] = {
area: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 0,
latlngs: [],
type: 'polygon',
clickable: true,
heading: 240
}
};
for(i=0; i<obj.g_pos_poly.coordinates[0].length-1; i++){
var coord = obj.g_pos_poly.coordinates[0][i];
angular.extend($scope.paths ['area' + obj.id ] .area.latlngs.push({
lat: parseFloat(coord[1]),
lng: parseFloat(coord[0])
}))
}
});
I am not able to see any shapes in my map. I previously had a setup like below but the problem is all the shapes are connected as there no differentiation among different shapes
$scope.paths = {
area: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 0,
latlngs: [],
type: 'polygon',
clickable: true,
heading: 240
},
circle: {
color: '#FF0000',
opacity: 0.5,
stroke: false,
fillColor: '#ff69b4',
fillOpacity: 0.5,
weight: 8,
radius: 6,
latlngs: [],
type: 'circle',
clickable: true,
heading: 240
}
};
What approach do I have to follow to show individual shapes correctly. Any help is greatly appreciated.
I had the same problem, and the reason was in included css with style
svg{
width: 100%;
height: 100%;
}
Correction
.angular-leaflet-map svg{
width: initial;
height: initial;
}
resolve the problem
Related
Is it possible to Draw this type of gauges in the left and right of the circle using Highcharts?
Basically left side gauge is representing the shorts' %age at left, the right side gauge is representing the shorts' %age at right, and the center is one simple round circle with the %age of center shots.
Series variable pie it's looks fit better for this case.
Tooltip we built setting useHTML:true, circle at the center we rendered by SVG renderer.
Highcharts.chart('container', {
chart: {
events: {
render() {
const chart = this;
if (!chart.customCenterCircle) {
chart.customCenterCircle = chart.renderer.circle(
chart.plotLeft + chart.plotSizeX / 2,
chart.plotTop + chart.plotSizeY / 2,
0
).add().toFront();
}
if (!chart.customCenterText) {
chart.customCenterText = chart.renderer.text('50%', 0, 0).css({
fontSize: '24px',
color: '#d4d4d4'
}).add().toFront();
}
chart.customCenterCircle.animate({
x: chart.plotLeft + chart.plotSizeX / 2,
y: chart.plotTop + chart.plotSizeY / 2,
r: chart.series[0].center[3] / 2,
fill: 'rgba(31, 112, 31, 0.5)',
stroke: 'rgba(154, 214, 154, 1)',
'stroke-width': 4
});
chart.customCenterText.attr({
x: chart.plotLeft + chart.plotSizeX / 2 -
chart.customCenterText.getBBox().width / 2,
y: chart.plotTop + chart.plotSizeY / 2 -
chart.customCenterText.getBBox().y -
chart.customCenterText.getBBox().height / 2
});
}
}
},
tooltip: {
backgroundColor: '#ffffff',
borderWidth: 0,
useHTML: true,
formatter: function() {
return `<p><h1 style="color:${this.color};">${this.y}</h1></br>${this.key}</p>`
}
},
series: [{
type: 'variablepie',
minPointSize: 0,
innerSize: '30%',
startAngle: 30,
dataLabels: {
enabled: false
},
borderWidth: 3,
zMin: 0,
data: [{
y: 80,
z: 100,
name: 'other',
color: 'black'
}, {
y: 30,
z: 100,
name: 'missed right',
color: 'red'
}, {
y: 50,
z: 0
}, {
y: 25,
z: 80,
name: 'missed right',
color: 'red'
}, {
y: 75,
z: 80,
name: 'other',
color: 'black'
}, {
y: 60,
z: 0,
name: 'other',
}]
}]
});
Live demo:
https://jsfiddle.net/BlackLabel/sc9vwzjt/2/
API References:
https://www.highcharts.com/docs/chart-and-series-types/variable-radius-pie-chart
https://api.highcharts.com/highcharts/series.variablepie
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
I want to add 3 className from data to CircleMarker, but I only I can add 1 className. Here may code
const xxx = [
{ name: 'myname', website: 'mywebsite', city: 'London'}
{ name: 'yourname', website: 'yourwebsite', city: 'Dublin'}
for (let i = 0; i < xxx.length; i++) {
let nam= xxx[i].name
let web= xxx[i].website
let cit= xxx[i].city
Object.defineProperty(xxx[i], 'objectcircle', {
value: new L.CircleMarker(xxx[i].geometry, {
radius: 5,
fillColor: "black",
width: 0.5,
stroke: "black",
color: '#FFFFF',
fillOpacity: 0.5,
className: nam web cit
})
});
let circle = xxx[i].objectcircle
circle.addTo(map)
I got it :
Object.defineProperty(xxx[i], 'objectcircle', {
value: new L.CircleMarker(xxx[i].geometry, {
radius: 5,
fillColor: "black",
width: 0.5,
stroke: "black",
color: '#FFFFF',
fillOpacity: 0.5,
className: `${nam} ${web} ${cit}`
})
});
I am trying to create a graph using ChartJS2 in one of our application; where we are using AngularJS 1.x along with RequireJS. So for that we have used ChartJs 2.7.0
When I try to implement our requirement, I'm facing an abnormal issue where
When I define x axes type as linear then the annotation(vertical line) doesn't get displayed on the graph, as displayed in the attached image: when type: 'linear'
And When I comment the line axes(X) type as linear then only annotation(vertical line) gets displayed but the graph doesn't get displayed at all as shown in the attached image: when commented the line type: 'linear'
My HTML Code is as follows:
<canvas style='height: 350px; width: 400px;' id="line" class="chart chart-line" chart-data="ourFixData.data"
chart-labels="ourFixData.labels" chart-series="ourFixData.series" chart-options="ourFixData.options" chart-colors="ourFixData.colors"
chart-dataset-override="ourFixData.datasetOverride"></canvas>
And my controller code is as follows:
'use strict';
define(['app'], function (app) {
app.register.controller("demoCtrl", function ($scope) {
$scope.data = [];
$scope.ourFixData = {};
$scope.ourFixData.lineAtPoint = 2.20;
$scope.ourFixData.colors = ['#399c5f', '#399c5f', '#399c5f'];
$scope.ourFixData.labels = [0, 0.5, 1.5, 2.5, 5, 7.5, 12.5, 17.5, 27.5];
$scope.ourFixData.series = ['Invites Available'];
var dashArr = [,,,,4,5,6,7,8];
var mainArr = [0,1,2,3,4,,,,];
$scope.ourFixData.data = [
dashArr,
mainArr
];
$scope.ourFixData.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.ourFixData.datasetOverride = [
{
data: dashArr,
borderColor: '#399c5f',
borderDash: [2,4],
borderWidth: 2,
pointBackgroundColor : '#399c5f',
fill: false
}, {
data: mainArr,
borderColor: '#399c5f',
borderWidth: 2,
pointBackgroundColor : '#399c5f',
fill: false
}
];
$scope.ourFixData.options = {
title: {
fontFamily: "Open Sans",
text: "Invite Graph"
},
scales: {
xAxes: [
{
id: 'x-axis-0',
display: true,
// ***** This is where I'm facing issues
type: 'linear', // When commented annotation doesn't get displayed
position: 'bottom',
scaleLabel: {
fontFamily: "Open Sans",
display: true,
labelString: 'Turn-Over in Lakh Rupees'
}
}
],
yAxes: [
{
id: 'y-axis-0',
display: true,
position: 'left',
scaleLabel: {
fontFamily: "Open Sans",
display: true,
labelString: 'Invites Available'
}
}
]
},
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [
{
type: 'line',
id: 'hline',
mode: 'vertical',
scaleID: 'x-axis-0',
value: $scope.ourFixData.lineAtPoint, // data-value at which the line is drawn
borderWidth: 1,
borderColor: 'blue',
borderDash: [4,5],
display: true,
title: "Current",
enabled: true,
label: {
fontFamily: "Open Sans",
backgroundColor: "blue",
content: $scope.ourFixData.lineAtPoint + " Lacks",
enabled: true,
position: 'top'
}
}
]
}
};
});
});
Any kind of help would be appreciated. Thanks in advance.
I have extended a component and I can't get it to render to a panel. Seems like I am missing something pretty basic since the debugger in Chrome actually shows that the panel has the data, it just isn't showing up.
Here is the fiddle and here are parts of the code:
Custom Component:
Ext.define('StoplightControl', {
extend: 'Ext.draw.Component',
alias: 'widget.Stoplight',
constructor: function (config) {
this.initConfig(config);
this.callParent(arguments);
},
initComponent: function () {
var kpiData; // = Ext.data.StoreManager.get('KPIStore').getById(this.model.get('KPI_ID'));
if (typeof (kpiData) === 'undefined' || kpiData == null) {
kpiData = Ext.create('KPIModel', {
ControlBackground: '#000000',
Caution_label: 'On',
Good_label: 'Ahead',
Poor_label: 'Behind',
Good_color: '#00FF00',
Poor_color: '#ff0000',
Caution_color: '#550000',
Header: 'Test'
});
}
this.setGradients(kpiData.get('ControlBackground'));
this.drawItems(this.model, kpiData);
},
setGradients: function (controlColor) {
this.gradients = [{
id: 'middleGradient',
angle: 180,
stops: {
0: {
color: controlColor,
opacity: 1
},
50: {
color: controlColor,
opacity: .6
},
100: {
color: controlColor,
opacity: 1
}
}
}, {
id: 'lightGradient1',
angle: -90,
stops: {
0: {
color: '#ffffff',
opacity: 0.01
},
100: {
color: '#ffffff',
opacity: .8
}
}
}]
},
drawItems: function (model, kpiData) {
var cautionValueX = -22.5 * (model.get('cautionValue').toString().length) + 227.5,
goodValueX = -22.5 * (model.get('goodValue').toString().length) + 227.5,
poorValueX = -22.5 * (model.get('poorValue').toString().length) + 227.5,
maxLineLength = 15,
changeOfY = -50,
cautionLabel = linebreaks(kpiData.get('Caution_label'), maxLineLength),
goodLabel = linebreaks(kpiData.get('Good_label'), maxLineLength),
poorLabel = linebreaks(kpiData.get('Poor_label'), maxLineLength),
cautionChangeY = (cautionLabel.split("\n").length - 1) * changeOfY,
goodChangeY = (goodLabel.split("\n").length - 1) * changeOfY,
poorChangeY = (poorLabel.split("\n").length - 1) * changeOfY,
headerFontSize = '100px arial,sans-serif',
textFontSize = '80px arial,sans-serif';
var drawItems = [{
type: 'rect',
x: 1.6620979,
y: 52.362183,
radius: 90,
width: 448.10959,
height: 1000,
fill: 'url(#middleGradient)',
stroke: 'none'
}, {
type: "circle",
radius: 140,
x: 224,
y: 896,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Good_color')
}, {
type: "circle",
x: 224,
y: 214,
radius: 140,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Poor_color')
}, {
type: "circle",
x: 224,
y: 555,
radius: 140,
stroke: "#000000",
'stroke-width': 1,
fill: kpiData.get('Caution_color')
}, {
type: "text",
id: "svg-stoplight-poorValue",
text: model.get('poorValue'),
x: poorValueX,
y: 220,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-cautionValue",
text: model.get('cautionValue'),
x: cautionValueX,
y: 560,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-goodValue",
text: model.get('goodValue'),
x: goodValueX,
y: 900,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-poorLabel",
text: poorLabel,
x: 500,
y: 220 + poorChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-cautionLabel",
text: cautionLabel,
x: 500,
y: 560 + cautionChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-goodLabel",
text: goodLabel,
x: 500,
y: 900 + goodChangeY,
fill: "Black",
font: textFontSize
}, {
type: "text",
id: "svg-stoplight-headerLabel",
text: kpiData.get('Header'),
x: 145,
y: -40,
fill: "Black",
font: headerFontSize
}, {
type: "text",
id: "svg-stoplight-totalLabel",
text: "Total = " + model.get('total'),
x: 100,
y: 1250,
fill: "Black",
font: textFontSize
}];
//don't add gradients if IE is > 10 or documentMode is less than 9
if (!(ie > 10 || document.documentMode < 9)) {
drawItems.push({
type: "ellipse",
id: 'test1',
radiusX: 112,
radiusY: 80,
x: 224,
y: 156,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 498,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 838,
fill: 'url(#lightGradient1)'
});
}
},
width: 210,
height: 250
});
Creation of the Panel and adding the component:
var displayPanel = Ext.create('widget.panel', {
width: 600,
height: 800,
title: 'Cost & Schedule Variance',
renderTo: 'WorkstreamStoplights',
pack: 'center',
shrinkWrap: 3,
layout: {
type: 'table',
column: 2
},
});
stoplightStore.each(function (model, idx) {
var stoplight = Ext.create('StoplightControl', {
model: model
});
displayPanel.add(stoplight);
});
displayPanel.doLayout();
As you'll be able to see from the fiddle, the Title displays properly and I have even added an item to the displayPanel on creation, but doing a .add() doesn't seem to have any effect even with the .doLayout()
Haven't dabbled in ExtJS for a long time, but the 4.2 doc states, for this method:
This method needs to be called whenever you change something on this
component that requires the Component's layout to be recalculated.
Ah, silly me. I needed to add items to my component. I needed to make the assignment in the initComponents of
this.items = drawItems;
Working fiddle
I can't be the only person with this problem, but my searches have left me lost and confused.
I have a custom Ext.draw.Component that uses a gradient fill. My understanding is that older browsers don't support gradients, but I thought Sencha accounted for that with by adding CSS to the object rendered.
Component in Chrome:
Component in IE:
My questions are thus:
Can Ext.js render gradients to IE8 and IE9? (IE10 displays fine)
Is there a way to determine if the browser is going to not render the gradient and I can just display something else (i.e. the compenent in IE wouldn't look so bad without the white elipses)?
UPDATE
Here is the code that generates the Stoplights. http://jsfiddle.net/wilsjd/Ts2qU/10/
var sencha = Ext.create('Ext.draw.Component', {
width: 170,
height: 170,
renderTo: this.get('elementToRenderTo'),
gradients: [{
id: 'middleGradient',
angle: 180,
stops: {
0: {
color: this.get('backgroundColor'),
opacity: 1
},
50: {
color: this.get('backgroundColor'),
opacity: .6
},
100: {
color: this.get('backgroundColor'),
opacity: 1
}
}
}, {
id: 'lightGradient1',
angle: -90,
stops: {
0: {
color: '#ffffff',
opacity: 0.01
},
100: {
color: '#ffffff',
opacity: .8
}
}
}, {
type: 'radial',
id: 'radialGradient1',
centerX:123.88702,
centerY:391.47498,
radius:166.47372,
focalX:124.57159,
focalY:391.47498,
stops: {
0: {
color: '#ffffff',
opacity: 0.01
},
100: {
color: '#ffffff',
opacity: .8
}
}
}],
items: [{
type: 'rect',
x: 1.6620979,
y: 52.362183,
radius: 90,
width: 448.10959,
height: 1000,
fill: 'url(#middleGradient)',
stroke: 'none'
}, {
type: "circle",
radius: 140,
x:224,
y:896,
stroke: "#000000",
'stroke-width': 7,
fill: this.get('goodColor')
}, {
type: "circle",
x:224,
y:214,
radius:140,
stroke: "#000000",
'stroke-width': 7,
fill: this.get('poorColor')
}, {
type: "circle",
x:224,
y:555,
radius: 140,
stroke: "#000000",
'stroke-width': 7,
fill: this.get('cautionColor')
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 156,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 498,
fill: 'url(#lightGradient1)'
}, {
type: "ellipse",
radiusX: 112,
radiusY: 80,
x: 224,
y: 838,
fill: 'url(#lightGradient1)'
}, {
type: "text",
text: this.get('poorValue'),
x: poorValueX,
y: 210,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: this.get('cautionValue'),
x: cautionValueX,
y: 550,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: this.get('goodValue'),
x: goodValueX,
y: 890,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: poorLabel,
x: 500,
y: 210 + poorChangeY,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: cautionLabel,
x: 500,
y: 550 + cautionChangeY,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: goodLabel,
x: 500,
y: 890 + goodChangeY,
fill: "Black",
font: "80px bold"
}, {
type: "text",
text: this.get('title'),
x: 0,
y: 0,
fill: "Black",
font: "100px bold"
}, {
type: "text",
text: "Total = " + this.get('total'),
x: 100,
y: 1150,
fill: "Black",
font: "80px bold"
}]
});
Ext.js can indeed render gradients in IE, but in this case it isn't working (still need source to determine why)
Added if statement to determine if the browser was IE8 or IE9 (I checked the document mode too - IE10 doesn't work if in IE8 document mode), and then add my ellipses)