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.
Related
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 ?
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
I've been researching for hours trying to figure out this issue. I use ChartJS and trying to build line chart. It seems i have no gap between my chart and its legend, and need to add more space between them.
It should be like this:
But i got this (see my code snippet)
Here's my code:
new Chart(document.getElementById("line-chart"), {
type: "line",
data: {
labels: ["Label1", "Label2", "Label3", "Label4"],
datasets: [
{
label: "A",
fill: false,
data: [10, 30, 60, 100],
borderWidth: 1,
backgroundColor: "red",
borderColor: "red",
},
{
label: "B",
fill: false,
data: [28, 80, 60, 60],
borderWidth: 1,
backgroundColor: "green",
borderColor: "green",
},
],
},
options: {
legend: {
align: "start",
position: "right",
labels: {
usePointStyle: true,
fontSize: 10,
},
},
elements: {
line: {
tension: 0,
},
},
responsive: true,
maintainAspectRatio: false,
},
});
canvas {
height: 35vh !important;
width: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<head></head>
<body>
<canvas id="line-chart"></canvas>
</body>
Depending on where the legend is placed there are some quick fix options available. See this question
For your case and, more often than not, I would recommend generating your own html legend which will give you full control.
You can set this up in the options:
options: {
legend: {
display:false, //turn default legend off
},
legendCallback : legendBuilder, //link to your custom function returning html string
}
Define where your legend will go in the html:
<div id="chart-container">
<canvas id="line-chart"></canvas>
<div id="chart-legend"></div>
</div>
Then generate your legend:
var myLegend = document.getElementById("chart-legend");
myLegend.innerHTML = myChart.generateLegend();
working example
Has anyone achieved to implement an IOS7 style inline picker in Titanium? I would be thankful for any hints or demos.
As e.g. in the calendar: http://i.stack.imgur.com/hUDZK.png
This is my current code:
var HintTextArea = require('hinttextarea');
var self = Ti.UI.createWindow({
backButtonTitle: '',
title: L('addwish_title'),
backgroundColor: 'white',
layout: 'vertical',
});
var title = Ti.UI.createTextField({
hintText: L('addwish_title'),
borderStyle: Ti.UI.INPUT_BORDERSTYLE_NONE,
color: 'black',
top: 10, bottom: 10, left: 40,
width: 270,
height: Ti.UI.SIZE,
suppressReturn: true
});
var rowTitle = Ti.UI.createTableViewRow({touchEnabled: false});
rowTitle.add(title);
var category = Ti.UI.createLabel({
text: L('addwish_category'),
touchEnabled: false,
color: 'black',
top: 10, bottom: 10, left: 40,
width: 270,
height: Ti.UI.SIZE
});
var rowCategory = Ti.UI.createTableViewRow({});
rowCategory.add(category);
var categoryPicker = Ti.UI.createPicker({
//visible: false,
selectionIndicator: true,
//height: 0
});
var data = [];
data[0]=Ti.UI.createPickerRow({title:'Bananas'});
data[1]=Ti.UI.createPickerRow({title:'Strawberries'});
data[2]=Ti.UI.createPickerRow({title:'Mangos'});
data[3]=Ti.UI.createPickerRow({title:'Grapes'});
data[4]=Ti.UI.createPickerRow({title:'Bananas'});
data[5]=Ti.UI.createPickerRow({title:'Strawberries'});
data[6]=Ti.UI.createPickerRow({title:'Mangos'});
data[7]=Ti.UI.createPickerRow({title:'Grapes'});
categoryPicker.add(data);
categoryPicker.setSelectedRow(0, 3);
var rowPicker = Ti.UI.createTableViewRow({touchEnabled: false});
rowPicker.add(categoryPicker);
var description = HintTextArea.createTextArea({
color: 'black',
font: {fontSize: 16},
top: 10, left: 39,
height: 180,
width: 272,
suppressReturn: true
});
var rowDescription = Ti.UI.createTableViewRow({touchEnabled: false});
rowDescription.add(description);
var footerView = Ti.UI.createView({
height : Ti.UI.SIZE
});
var addWishButton = Ti.UI.createButton({
title: L('addwish_add_button'),
height: 20,
top: 10,
bottom: 5
});
footerView.add(addWishButton);
// now add the complete tableview form
var tableView = Ti.UI.createTableView({
data: [rowTitle, rowCategory, rowDescription],
footerView : footerView,
allowsSelection: false
});
self.add(tableView);
// *** EVENTS
category.addEventListener('click', function(e) {
Ti.API.debug('category event');
// check if the picker is already visible
tableView.insertRowAfter(1, rowPicker);
});
self.open();
The problem is that you add event listener to Label view which has property touchEnabled set to false. Change it to:
var category = Ti.UI.createLabel({
text: L('addwish_category'),
color: 'black',
top: 10, bottom: 10, left: 40,
width: 270,
height: Ti.UI.SIZE
});
and also event listener to:
// *** EVENTS
var pickerEnabled = false;
category.addEventListener('singletap', function(e) {
Ti.API.debug('category event');
// check if the picker is already visible
if (pickerEnabled) {
tableView.deleteRow(rowPicker);
pickerEnabled = false;
} else {
tableView.insertRowAfter(1, rowPicker);
pickerEnabled = true;
}
});
There is some issue with click event on Label in TableView but singletap works fine.
Also I added simple if statement, which will prevent adding second picker to table.
There is a form panel, and it acts like a container. Then i have another form panel, where i am adding a textfield and a button. I need this form panel to be in the center of the screen. And the button bottom of the textbox (I should be able to position it where ever in the form. Like Absolute layout).
My code is as follows; and it doesn't work the way i want it to. can some one look into this
Ext.define('MyApp.view.MyView', {
extend: 'Ext.form.Panel',
alias: 'widget.myview',
frame: true,
height: 800,
hidden: false,
hideMode: 'visibility',
id: 'myviewid',
autoScroll: false,
bodyPadding: 5,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'form',
height: 330,
width: 400,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'Care Fusion User Login',
anchor: '250 250',
items: [{
xtype: 'textfield',
id: 'name',
width: 233,
name: 'name',
fieldLabel: 'Nmae',
growMax: 200,
x: 10,
y: 30
} {
xtype: 'button',
height: 30,
width: 256,
text: 'Click',
x: 240,
y: 110
}]
}]
});
me.callParent(arguments);
}
});
Try to use following layout in your outer container:
layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},
then you inner form will be placed in the center of this outer form.