I'm trying to make an offset icon on my regular icon, like a status bullet on my style of my feature.
this.iconStyle = [
new ol.style.Style({
image: new ol.style.FontSymbol({
form: 'marker',
radius: 25,
fill: new ol.style.Fill({
color: 'white'
})
}),
text: new ol.style.Text({
text: '\uF0D1',
font: '900 22px "Font Awesome 5 Free"',
offsetY: -2,
fill: new ol.style.Fill({
color: '#06305c'
})
})
}),
new ol.style.Style({
image: new ol.style.FontSymbol({
form: 'circle',
radius: 10,
offsetX: 17,
offsetY: -20,
fill: new ol.style.Fill({
color: 'green'
})
}),
text: new ol.style.Text({
text: '30m',
offsetY: -20,
offsetX: 17,
fill: new ol.style.Fill({
color: 'white'
})
})
})
]
As you can see, the text of openlayer Style is correctly displayed, but the fontSymbol circle doesnt seems to get the offset I wrote.
Here is the API for fontSymbol of ol.ext : https://viglino.github.io/ol-ext/doc/doc-pages/ol.style.FontSymbol.html
What am I doing wrong ?
Related
Need help with chart js
ACTUALLY, I'M USING VUE-CHARTJS BUT IT'S JUST A WRAPPER
in the line chart on the left side, the number is increasing by 5(0, 5, 10, 15, etc) I want it to increase by 10 and also decrease the height of the chart so the aspect ratio is something like 16/9
also is it possible to make the left number say 5k+, 10k+, 15k+ instead of just 5, 10, 15
here's my code for the chart
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
data: () => ({
chartdata: {
labels: ['January', 'February', 'March', 'April', 'May','Jun'],
datasets: [
{
data: [12, 20, 27, 22, 14, 10],
borderColor: "#135193",
pointBackgroundColor: "#135193",
pointBorderColor: "#135193",
backgroundColor: 'rgba(255, 255, 255, 0)'
},
{
data: [3, 12, 17, 20, 30, 40],
borderColor: "#FF8811",
pointBackgroundColor: "#FF8811",
pointBorderColor: "#FF8811",
backgroundColor: 'rgba(255, 255, 255, 0)'
}
]
},
options: {
responsive: true,
legend: {
display: false
}
}
}),
mounted () {
this.renderChart(this.chartdata, this.options)
}
}
</script>
Yes, you can just use CSS to set the dimensions of the canvas and set maintainAspectRatio to false in the options, for the ticks you can use the tick callback:
const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"];
const options = {
type: 'line',
data: {
labels,
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'red',
backgroundColor: 'pink'
}]
},
options: {
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
callback: (val) => (`${val}K`)
}
}]
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
max-height: 180px;
max-width: 320px;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
Okay it turns out its as simple as wrapping the chart with a container and set height of that container as needed
In iOS ellipsize property is not working for me. The same code is working for android. I have attached the iOS screenshot for iOS issue below. Please help me to understand If I am missing something.
Thanks in Advance!!!
Ti SDK: v9.0.3GA
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: '#DCDCDC',
layout: 'vertical'
});
var tableView = Ti.UI.createTableView();
var row = Ti.UI.createTableViewRow({
height: Ti.UI.SIZE,
width: Ti.UI.FILL
});
var firstLabel = Ti.UI.createLabel({
text: 'Hello, This is for testing. I wanted to check Ti Ellipsize property ...',
height: 'auto',
right: '10',
top: '50',
left: '10',
color: '#F0F0F0',
font: { fontSize: 15, fontFamily: 'Arial' },
//horizontalWrap: true,
wordWrap: false,
ellipsize: true,
maxlines: 1
});
row.add(firstLabel);
tableView.setData([row]);
win.add(tableView);
win.open();
I just did research on this above issue and I came to know in iOS its automatically applied ellipsize property to your labels. The only thing we need to take care is height property if possible remove or assigned Ti.UI.SIZE.
I have modified my above code and mentioned here in this post. I write a conditional logic for android device.
var deviceDetect = require('./deviceDetect');
var win = Ti.UI.createWindow({
title: 'Demo App',
backgroundColor: '#DCDCDC',
layout: 'vertical'
});
var tableView = Ti.UI.createTableView();
var row = Ti.UI.createTableViewRow({
height: Ti.UI.SIZE,
width: Ti.UI.FILL
});
var firstLabel = Ti.UI.createLabel({
text: 'Hello, This is for testing. I wanted to check Ti Ellipsize property ...',
height: Ti.UI.SIZE,
right: '10',
top: '50',
left: '10',
color: '#F0F0F0',
font: { fontSize: 15, fontFamily: 'Arial' },
//wordWrap: false, //remove this deprecated in Ti v8.x
ellipsize: deviceDetect.isAndroid() ? true : false,
lines: deviceDetect.isAndroid() ? 1 : undefined
});
row.add(firstLabel);
tableView.setData([row]);
win.add(tableView);
win.open();
I am trying bar chart using Highcharts. In the below code we have xaxis categories like : ['Name1', 'Name2', 'Name3', 'Name4' ].
Firstly, I am using the below highcharts code in react native to develop iOS app.
I am trying to place the Name on each individual bar's in the graph(bar chart), which is working but when the name text from the categories array is v.large then the width of the title is not getting increased & the text is coming in multiple lines with the minimum width. If the name is v.large then only we are getting dotted text on the graph.
Can we increase the width of the title? and If so how can we increase the width within the iPhone's width.
chart: {
type: 'bar',
reflow: true,
marginRight: 30,
},
credits: {
enabled: false
},
title: {
align: "left",
text: "A comparison of the business’ digital health with that of the competitors.",
backgroundColor:'green',
style: {
color: '#808080',
fontWeight: '400',
fontSize: '13px',
}
},
xAxis: {
categories: ['Name1', 'Name2', 'Name3', 'Name4' ],
title: {
align: "left",
},
scrollbar: {
enabled: false
},
labels: {
x: 25,
y: -22,
align: 'left',
useHTML: true,
style: {
fontSize: '13px',
fontFamily: 'Open Sans',
color: '#464646',
backgroundColor: 'green',
},
},
},
yAxis: {
gridLineColor: "transparent",
stackLabels: {
qTotals: [91,99,85,99],
enabled: true,
useHTML: true,
style: {
fontWeight: "bold",
},
formatter: function () {
return this.options.qTotals[this.x];
},
},
tickInterval: 20,
labels: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'center',
enabled: false,
crop: false,
overflow: 'none',
verticalAlign: 'top',
y: -50,
style: {
fontWeight: '300',
color: '#808080',
fontSize: '30px',
}
},
pointWidth: 25,
borderWidth: 0,
pointPadding: 10,
stacking: "normal",
states: {
hover: {
enabled: false
}
},
//cursor: 'pointer',
point: {
events: {
click: function (event) {
}
}
}
}
},
series: [
{
name: "",
data: [3, 1, 15, 1],
color: "#f5f6f8",
dataLabels: {
enabled: false
},
},
{
name: "",
color: "#ff0000",
data: [{ y: 97, color: "#0f875a" }, { y: 99, color: "#0f875a" }, { y: 85, color: "#0f875a" }, { y: 99, color: "#0f875a" }]
}
],
}
For a sample I have taken a graph i.e bar chart from Highcharts, In the link jsfiddle.net/psre6Lj9/1 we have some fruits names, where 'Apples' width is not sufficient and the text is being displayed in multiple lines. I want to increase the width of the title. How can i do that.
To increase the width of the labels, set the right style:
xAxis: {
categories: ['Apples Apples Apples Apples Apples Apples Apples ', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
x: 25,
y: -22,
align: 'left',
style: {
width: '300px'
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/went9xmf/
API: https://api.highcharts.com/highcharts/xAxis.labels.style
I created a rectangle by using this code:
var drawComponent = Ext.create('Ext.draw.Component', {
autoSize: true,
viewBox: false,
x: 200,
y: 100,
draggable: true,
viewBox: false,
renderTo: document.body
}),
surface = drawComponent.surface;
sprite = surface.add({
type: 'rect',
fill: 'white',
stroke: 'red',
x: 10,
y: 5,
'stroke-width': 3,
width: 100,
height: 50
});
sprite.show(true);
After that I've add it to window.
Now I want to create many draw components so I created a custom class like this:
Ext.define('DrawComponent', {
extend: 'Ext.draw.Component',
autoSize: true,
viewBox: false,
draggable: true,
renderTo: document.body
});
I'm using this custom class like this:
var drawComponent = Ext.create('DrawComponent', {
x: 200,
y: 100
}),
surface = drawComponent.surface;
sprite = surface.add({
type: 'rect',
fill: 'white',
stroke: 'red',
x: 10,
y: 5,
'stroke-width': 3,
width: 100,
height: 50
});
sprite.show(true);
But here it is showing surface is undefined...
You can see my custom class am extending Ext.draw.component class why it is showing error
Surface is only available after rendering. So you may add an event handler for event afterrender in the initComponent method, and use the surface.
I created table view with rows, those contains label and switch box , style is check box. My requirement is, among those row check boxes, I select some of them. Then after, I want those check boxes which are checked and which are unchecked. Here is my code:
// My Array Data for Table-view
var checkboxArray = [ { title: "Mountain View (North America)\nCloudy", leftImage: "http://www.google.com/ig/images/weather/cloudy.gif" },
{ title: "Sucre (South America)\nMostly Cloudy", leftImage: "http://www.google.com/ig/images/weather/mostly_cloudy.gif" },
{ title: "Prague (Europe)\nClear", leftImage: "http://www.google.com/ig/images/weather/sunny.gif" },
{ title: "St Petersburg (Europe)\nSnow", leftImage: "http://www.google.com/ig/images/weather/snow.gif" },];
// My Android checkbox
var checkbox = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"Sound Enabled",
value:true
});
// My Header label inside table-view
var headerLabel = Ti.UI.createLabel({
backgroundColor:'#035385',
color:"white",
font:{ fontSize: 30, fontWeight:"bold" },
text:"Favoriete Merken",
textAlign:"center",
height:45,
width:500
});
// My Table View
var table = Ti.UI.createTableView({
backgroundColor:"white",
data:checkboxArray,
headerView:headerLabel,
separatorColor:"black",
top:0,
width:'auto'
});
win2.add(table);
Rows created via object literals cannot have views added to them. But if you create the row via Ti.UI.createTableViewRow, you can. So to add checkboxes, just change your example to create the rows explicitly, add the checkboxes, store a reference to the checkboxes, and you're done.
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var rows = [];
var data = [
{ title: 'Mountain View (North America)\nCloudy', leftImage: 'http://www.google.com/ig/images/weather/cloudy.gif' },
{ title: 'Sucre (South America)\nMostly Cloudy', leftImage: 'http://www.google.com/ig/images/weather/mostly_cloudy.gif' },
{ title: 'Prague (Europe)\nClear', leftImage: 'http://www.google.com/ig/images/weather/sunny.gif' },
{ title: 'St Petersburg (Europe)\nSnow', leftImage: 'http://www.google.com/ig/images/weather/snow.gif' }
];
for (var i = 0, l = data.length; i < l; i++) {
var row = Ti.UI.createTableViewRow();
row.add(Ti.UI.createImageView({
image: data[i].leftImage,
width: 45, height: 45,
left: 0
}));
row.add(Ti.UI.createLabel({
text: data[i].title, textAlign: 'left',
color: '#000',
left: 50, right: 50
}));
row.add(data[i].switch = Ti.UI.createSwitch({
style: Ti.UI.Android && Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title: 'Sound Enabled',
value: true,
right: 5,
width: 40
}));
rows[i] = row;
}
win.add(Ti.UI.createTableView({
data: rows,
backgroundColor: 'white',
separatorColor: 'black',
headerView: Ti.UI.createLabel({
backgroundColor: '#035385',
color: 'white',
font: { fontSize: 30, fontWeight: 'bold' },
text: 'Favoriete Merken', textAlign: 'center',
height: 45
}),
bottom: 45
}));
var alertFirstSwitchValue = Ti.UI.createButton({
title: 'Alert First Switch Value',
bottom: 0, right: 0, left: 0,
height: 45
});
alertFirstSwitchValue.addEventListener('click', function () {
alert(data[0].switch.value);
});
win.add(alertFirstSwitchValue);
win.open();