I am not able to set bars width if there is only 1 or 2 bars in chart.
I am using Rgraph in my angular 7 app. I am unable to set marginInner property value based on the number of bars.
Is there any property to set the barwidth directly.
There's no property to set the width directly, but what you can do is put the logic for calculating the marginInner in the draw event or an exec() function. Here's an exec function example:
new RGraph.Bar({
id: 'cvs',
data: [8,4,6,3,5,1,5],
options: {
}
}).draw().exec(function (obj)
{
// Calculate marginInner here,set it and call RGraph.redraw();
});
This means that it runs only once after the chart has been drawn so you can then access the data (with obj.data) and then calculate how big the margin should be.
Related
I am using react-calendar-timeline and there I am using controlled scrolling feature very similar to this example. Now as you can see only current date is being displayed but user can scroll the canvas to previous and next date. That means canvas is taking 3x width of the dateRange.
I just need the current date to be displayed in canvas only.
Thank you in advance.
I have also dug a lot over the docs and internet to solve this problem.
Finally, I got it. I am sharing my solution with those who are in the same situation.
Create defaultTimeRange and set to min and max zoom props to disable the zoom.
Then write a handler function for onTimeChange and take the third callback funciton to disable the scroll.
// Set the visible start and date somewhere in the beginning like this using useEffect
setVisibleTimeStart(currentDate.startOf("day").valueOf());
setVisibleTimeEnd(currentDate.endOf("day").valueOf());
...
const defaultTimeRange = visibleTimeEnd - visibleTimeStart;
<Timeline
...
minZoom={defaultTimeRange} <--- To disable Zoom
maxZoom={defaultTimeRange} <--- To disable Zoom
onTimeChange={(_start, _end, updateScrollCanvas) => {
updateScrollCanvas( <--- To disable Scroll
moment(visibleTimeStart).valueOf(),
moment(visibleTimeEnd).valueOf()
);
}}
>
Then you have to override one css class like this
.react-calendar-timeline .rct-scroll{
overflow-x: hidden !important;
}
I have created 3 variables
const defaultTimeStart = moment().add(0, 'hour');
const defaultTimeEnd = moment().add(6, 'hour');
const defaultVisableTimeEnd = moment().add(24, 'hour');
// create calendar view of one day
const defaultTimeRange =defaultTimeStart - defaultVisableTimeEnd;
<Timeline
...
minZoom={defaultTimeRange}
maxZoom={defaultTimeRange}
//it will not allow to scroll more than [enter image description here][1]a day
onTimeChange={(_start, _end, updateScrollCanvas) => {
if (_start > defaultTimeStart && _end < defaultVisableTimeEnd)
updateScrollCanvas(_start, _end);
}}
/>
I'm using azure map.
What's happening is that I have 2 layers. A layer that have Circles and a layer with polygons.
I have a functionality in which a popup appear when I click on a specific circle.
The issue occur when I add the polygon layer after the circle layer.
It's like the polygon layer is being drawn on top of the circle layer. In which it prevent the popup from appearing when clicking on the circle.
Here's how I'm adding the polygon layer:
showFetchedResultOnMap(facilities) {
const self = this;
if (facilities && facilities.length > 0) {
self.cleanRestrictionLayer();
//Create a data source and add it to the map.
self.datasource = new atlas.source.DataSource();
self.map.sources.add(self.datasource);
//Add a data set to the data source.
self.CleanMap();
//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
self.map.sources.add(datasource);
self.map.imageSprite.add(self.chosenCategory, 'assets/svg/' + self.chosenCategory + '.svg')
.then(function () {
facilities.forEach(cat => {
datasource.add(new atlas.data.Feature(new atlas.data.Point([cat.longitude, cat.latitude])));
});
//Add a layer for rendering point data as symbols.
self.map.layers.add(new atlas.layer.SymbolLayer(datasource, self.chosenCategory, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: self.chosenCategory,
//Optionally scale the size of the icon.
size: 0.1
}
}));
});
}
}
Anyone have an Idea about how I can fix this??
I'm not seeing a polygon layer in the code you provided. That said, when you add layers to the map, the order in which you add them is the z-index by default. Last one added goes on top. That said, when adding the layer using the map.layers.add function, there is a second parameter you can add in which can be another layer or layer id. When this is specified the layer you are adding will be inserted below that second specified layer. Here is the doc on this: https://learn.microsoft.com/en-us/javascript/api/azure-maps-control/atlas.layermanager?view=azure-maps-typescript-latest#add-layer---layer----string---layer-
Here is a short example:
map.layers.add(new atlas.layers.BubbleLayer(datasource, 'myBubbles'));
map.layers.add(new atlas.layers.PolygonLayer(datasource, 'myPolygons'), 'myBubbles');
I am working on a RN app and I have an issue regarding the rotation and dimensions of the screen. I have a gallery application where I show three images in a row if the screen is vertical. I adjust it by dividing the width by the size of the image, I think this way of specifying the number of images in a row makes it consistent and changeable for different devices. However, after I rotate the screen, I was expecting to see more images in a row, but I didn't. I realized the width didn't change, so I saw three images again instead of 5 or 6. I am not sure if the way I am doing this is right or wrong. Any suggestions regarding this?? Also, how can I change the width and height dynamically, so that I can change the aligning of my gallery after rotation?
here is a part of my code
...var {height, width} = Dimensions.get('window');
var imageSize = 120;
// number : number of images in a row
var number = Math.round(width/imageSize);
console.log(number);
var CameraRollView = React.createClass({
propTypes: propTypes,
getDefaultProps: function(): Object {
return {
groupTypes: 'SavedPhotos',
batchSize: 5,
imagesPerRow: number,
assetType: 'Photos',
renderImage: function(asset) {
//var imageSize = 120;
var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
return (
<TouchableHighlight onPress={
()=>{
/**fire gallery action selectImage*/
this.selectImage(asset.node.image.uri, this.images);
}
} key={asset.node.image.uri}>
<Image
source={asset.node.image}
style={imageStyle}
/>
</TouchableHighlight>
);
},
};
},
...
here what important is -imagesPerRow- I want it to be dynamic, as I rotate the device.
I would recommend against using the Dimensions module if you need to respond to screen size changes.
The View component provides an onLayout property that is called each time that View's layout has to be recalculated (e.g. on device rotation). I don't know anything about the architecture of your app, so I will just say the easiest way to use it in my opinion is to set it to a function on the root View in your app that writes the new parameters to state (or to your flux/redux stores if you use that).
You can then pass that information through your app and use it as you see fit.
I am using ExtJs 4.1.0 and I am new to extjs. I have used fleXcroll for applying custom scrollbars to windows and panels. They are working fine so far, but when I am trying to resize the window, the scrollbars are not getting updated and also they are getting hidden from the screen.
Here is the code:
var samplePanel=new Ext.panel.Panel({
title:'Panel1',
height:350,
width:350
});
var sampleWindow=new Ext.window.Window({title:'Window',
items:[samplePanel],
renderTo:Ext.getBody(),
height:300,
width:300,
listeners:{
afterLayout:function(c){
fleXenv.fleXcrollMain(c.body.id);
},resize:function(c,w,h,o){
if(c.body.dom.fleXcroll)
fleXenv.updateScrollBars(); }
}
});
Does anyone had similar problem? Please help me.
After struggling for long time I finally found the actual problem.
Let us see what is happening when we apply scrollbars to a window. The contents inside window goes into its body where we need to display the scrollbars. FleXcroll will add two additional divs inside the target div(in this case, body) with ids of the form targetDivID_mcontentwrapper and targetDivID_scrollbarwrapper. The contents of the body will go to _mcontentwrapper and scrollbars will be displayed in the later.
Scrollbars will be displayed if the contentSize is greater that size of contentwrapper-div which is same as target div.
Here is the structure of divs after applying flexcroll
window-body(target div)
-- mcontentwrapper
-- contentwrapper
-- actual content
-- scrollbarwrapper
After resize the window the content is going into window-body rather than contentwrapper. So the content size in contentwrapper will be zero and hence scrollbar disappears.
structure after resize:
window-body(target div)
-- actual content
-- mcontentwrapper
-- contentwrapper
-- scrollbarwrapper
Now we need to put the actual_content into contentwrapper before updating the scrollbars.
Here is the code for doing that:
listeners:{afterLayout:function(c){
fleXenv.fleXcrollMain(c.body.id);
},
resize:function(c){if(c.body.dom.fleXcroll){
var a=c.body.dom.childNodes;
var b=[];
for (var i=0,j=0;i<a.length ;i++ )
{
if(a[i].id!=c.body.id+"_mcontentwrapper" && a[i].id!=c.body.id+"_scrollwrapper")
{
b[j]=a[i];
j++;
}
}
var el=Ext.get(c.body.id+"_contentwrapper");
for(var i=0;i<b.length;i++)
el.appendChild(b[i]);
}
}
}
I hope it is useful.
I want to control the POV (heading and pitch ) of multiple street view panoramas so when one panorama is interactively moved up down left right the other panorama moves with it
I can get this to work where interaction with panorama moves panorama2 another using this javascript:
google.maps.event.addListener(panorama, 'pov_changed', function() {
panorama2.setPov({ heading: panorama.getPov().heading + $headingoffset, pitch: panorama.getPov().pitch, zoom: panorama.getPov().zoom });
});
when I add the same code to control panorama via interaction with panorma2 both panoramas fail to be interactive so I assume the code causes a loop
google.maps.event.addListener(panorama2, 'pov_changed', function() {
panorama.setPov({ heading: panorama2.getPov().heading - $headingoffset, pitch: panorama2.getPov().pitch, zoom: panorama2.getPov().zoom });
});
\\The $headingoffset value is the degree of difference between to two panoramas
do I have to turn the listener off and on again for the other panorama while I change the POV - if so how
Or can this be done via a DIV mouse event instead