I would like to display temperature in Celsius and not by default Fahrenheit using the following code in aeris weather framework.
var aerisMapBuilder = new aeris.interactive.MapAppBuilder({
apiId:'key1',
apiSecret:'key2',
el: '#map-canvas',
modules: {
map: {
zoom: 9,
center: [37.6436,22.4918],
scrollZoom: true,
},
geosearch: {
geolocate: true
},
localWeather: {
showOnInit: true
},
mapControls: {
expandOnInit: false,
groups: ['Points']
},
layers: {
objects: [
{
type: 'SatelliteGlobal',
selected: true,
opacity: .90
}
]
}
}
});
Any idea would help me a lot!
Regards
The API documentation suggests setting the local units. Reference 1: Configuration Options
It suggests the following function is used to set the unit types in JS
Aeris.wxblox.config.set('unitsType', 'Units.Type.Imperial');
Related
On clicking save charts button of stock tool chart nothing happens. How does it work?
This is my chart config
this.trendChart.update({
series: {
showInNavigator: true,
dataGrouping: {
approximation: "average"
}
}
},
series: [{
id: 'series1',
}],
chart: {
spacingRight: 35
},
exporting: {
enabled: true,
buttons: {
contextButton: {
x: 0
}
}
},
stockTools: {
gui: {
enabled: true
}
},
});
Any config change I need to do?
The button save a chart in localStorage under highcharts-chart key. You can for example use it to keep some drawn annotations after refresing a browser.
The following items are stored:
annotations
indicators (with yAxes)
flags
You can get the options in the following way:
const savedOptions = localStorage.getItem(['highcharts-chart']);
Live demo: https://jsfiddle.net/BlackLabel/u6Lte04d/
API Reference: https://api.highcharts.com/class-reference/Highcharts#.merge%3CT%3E
I'm using ApexCharts with React and i'm using a line's chart and it's not showing the toolbar, someone can help me?
My summed up state of options:
const [propriedades, setPropriedades] = useState({
options: {
chart: {
height: 150,
type: 'line',
selection: {
enabled: true
},
toolbar: {
tools: {
zoomin: true,
zoomout: true,
}
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
}
},
});
xaxis: {tickPlacement: "on"},
For Angular it was solved by adding this line
I'm using kendo-ui grid for AngularJs and want to activate virtualization of remote data functionality. For testing I have set pageSize: 5.
Below is description of virtualization of remote data from telerik site:
There are cases when you may need to operate with large amount of data
in the grid, and fetching and processing this data at once would
impose a performance penalty due to limited browser resources.
Luckily, the Kendo UI grid has a solution called data virtualization
that alleviates any slowdowns when operating with huge volumes of
data. When enabled via the scrollable->virtual configuration option,
it displays a vertical scrollbar for the grid content and renders only
the number of items set via the pageSize property of the grid data
source. After you drag the scrollbar and the pageSize is exceeded, it
makes automatic requests to retrieve and render the next set of grid
rows. Both local and remote data are supported with the grid
virtualization feature, whereas in this demo the records are obtained
from a remote endpoint.
Also I have set following:
HTML:
<div kendo-grid k-options="mainGridOptions" id="historyGrid" style="width: auto;"></div>
JS for grid:
var vm = $scope;
vm.viewMode = {
mainGridOptions: {
visible: true
}
};
vm.mainGridOptions = {
columns: [
// here columns
],
onRegisterApi: function (gridApi) {
vm.gridApi = gridApi;
},
dataSource: {
schema: {
model: {
fields: {
YearBalance: { type: 'number' },
Typezalezh: { type: 'string' },
License: { type: 'string' },
ObjectName: { type: 'string' },
ZalezhName: { type: 'string' },
PlastName: { type: 'string' },
Category: { type: 'string' },
Parameter: { type: 'string' },
LastVal: { type: 'string' },
Val: { type: 'string' },
Operation: { type: 'string' },
EndT: { type: 'date' }
}
}
},
pageSize: 5,
transport: {
read: function(e) {
dataservice.getImportResultReport().then(function(data) {
e.success(JSON.parse(data));
console.log(data);
});
}
}
},
serverPaging: true,
height: screen.height - 330,
minwidth : 1190,
batch: true,
scrollable: {
virtual: true
},
sortable: true,
serverSorting: true,
filterable: {
extra: false,
operators: {
string: {
// here filters
},
number: {
// here filters
},
date: {
// here filters
}
}
}
};
On telerik site (Official website), it says that nothing more needs to be done.
On scrolling, I should see a request to the server which in my case should be a dataservice.getImportResultReport() call. But this does't happen. This function is called only once and all data is returned.
May be it's occurring because I have not set type: "odata"? But I use data source of another type.
How to use this functionality?
Add k-scrollable directive as follows in your html that renders your kendo grid:
<div kendo-grid k-data-source="mainGridOptions" k-scrollable="{virtual:true}"></div>
Also you have to use k-data-source directive for your dataSource. Hope it helps.
Working demo plunkr
I am trying to set ticks on the xAxis to begin at zero as a Global configuration option for Angular Charts and it doesn't seem to be setting the option:
.config(['ChartJsProvider', function (ChartJsProvider) {
ChartJsProvider.setOptions( {
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}])
Now I heard there might be a bug as well, so I tried this:
.config(['ChartJsProvider', function (ChartJsProvider) {
ChartJsProvider.setOptions("global", {
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}])
The way you setting beginAtzero property its wrong. Because when you configure global setting for chart scale, there is no option for setting it for xAxes or yAxes.
Try the below code for setting beginAtZero
ChartJsProvider.setOptions({
scale : {
ticks : {
beginAtZero : true
}
}
});
I am using the angular-leaflet-directive. Is there an option to change the opacity of a layer?
With 'regular' leaflet I can use layer.setOpacity(0.5). But there seems to be no option in the angular-leaflet-directive.
Edit:
here is my leaflet configuration:
angular.module('epic-taxi')
.controller('MainController', ['$scope', function($scope) {
$scope.initMap = function() {
angular.extend($scope, {
newYork: {
lat: 40.7304783951045,
lng: -73.98880004882812,
zoom: 12
},
layers: {
baselayers: {
mapbox_light: {
name: 'Light',
type: 'xyz',
url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
}
},
overlays: {
subway: {
name: 'Subway',
visible: true,
type: 'group',
opacity: 0.1 // not working
}
}
}
});
};
}]);
I want to change the opacity of the 'subway' overlay which contains multiple paths.
It looks like this is not implemented yet:
https://github.com/tombatossals/angular-leaflet-directive/issues/251
Thanks to Jonatas Walker for pointing it out!
Did you read their docs?
app.controller("CenterController", [ '$scope', function($scope) {
angular.extend($scope, {
center: {
lat: 40.095,
lng: -3.823,
zoom: 4,
opacity: 0.5
},
defaults: {
scrollWheelZoom: false
}
});
}]);
Try using this:
overlays: {
subway: {
name: 'Subway',
visible: true,
type: 'group',
layeroptions: {
opacity: 0.1
}
},
}