Need help in having a zoom in and zoom out button in visjs network graph using angularjs, I could not find any relevant options for this. Please help, I am also providing a plunker link as an example
Code
<vis-network data="data" options="options" height="100%"></vis-network>
$scope.options = {
autoResize: true,
height: '800',
width: '100%'
};
Take a look at the interaction, navigationButtons option. It has built in controls for zoom, pan and reset view.
You need to change your vis options to include navigationButtons: true and keyboard: true to have keboard shortcuts enabled
$scope.options = {
autoResize: true,
height: '600',
width: '100%',
interaction: {
navigationButtons: true,
keyboard: true
}
};
Check this plunker
I've never worked with plunker, so I can not integrated my solution into your example, but I've created a JSFiddle for it which is based on a simple network example from the visjs.org website.
Unfortunately there is no setScale(scale) method available right now, but you could extend the network until someone implements it.
var network;
var zoomstep = 0.3;
function zoomin() {
network.setScale(network.getScale() - zoomstep);
}
function zoomout() {
network.setScale(network.getScale() + zoomstep);
}
vis.Network.prototype.setScale = function (scale) {
var options = {
nodes: []
};
var range = this.view._getRange(options.nodes);
var center = this.view._findCenter(range);
var animationOptions = {
position: center,
scale: scale,
animation: options.animation
};
this.view.moveTo(animationOptions);
};
The vis.Network.setScale code was taken from the Network.js and View.js source code, based on what getScale() did. I had to redo some things which the methods View.fit, View._getRange and View._findCenter did but it's working good so far.
Updated solution for vis.js 4.21.0
vis.Network.prototype.zoom = function (scale) {
const animationOptions = {
scale: this.getScale() + scale,
animation: { duration: 300 }
};
this.view.moveTo(animationOptions);
};
Click handler code:
this.network.zoom(-0.5) // or 0.5 to zoom in
Related
I'm new to Highcharts - it seems you can only trigger drag events if the appropriate dragDrop events are defined and enabled on a series. E.g. https://api.highcharts.com/highcharts/plotOptions.series.dragDrop
How can I suppress the points actually being moved around in my chart? I have tried setting allowPointSelect: false and disabling both draggableX and draggableY but of course doing that don't fire any drag events. I have also tried event.preventDefault but no luck
What I'm basically looking for is to have a user drag over a range in a line/area chart from startX/Y to endX/Y and display the results to the user (which I can successfully get using mouseOver - a nice feature!)
For such a feature, you don't need to use draggable-points module. A simple custom solution with a crosshair and dynamically added/removed plot-lines will be enough. For example:
chart: {
animation: false,
events: {
load: function() {
const chart = this;
this.series[0].points.forEach(point => {
point.graphic.on('mousedown', function() {
chart.draggedPoint = point;
chart.xAxis[0].update({
plotLines: [{
width: 2,
color: 'grey',
dashStyle: 'ShortDash',
value: point.x
}]
});
});
});
document.body.addEventListener('mouseup', function() {
chart.draggedPoint = null;
chart.xAxis[0].update({
plotLines: []
});
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/rsuj93at/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
I have create map using javascript Amcharts functions. this is my code -
var recentlyLegend = {"id":"recentlyLegendDiv","width":155,"maxColumns":1,"backgroundAlpha":0,"left":0,"top":350,"horizontalGap":10,"switchable":true,"switchType":"x","markerSize":16,"fontSize":10,"data": recentlyWorldLegendData};
$scope.regionByCountryGeoMap = function(chart){
var source = worldLevelProcessImages(chart.data, recentlyWorldDataProvider, recentlyLegendColorArray);
AmCharts.theme = AmCharts.themes.dark;
recentlyMap = new AmCharts.AmMap();
recentlyMap.mouseWheelZoomEnabled = true;
recentlyMap.zoomControl = {
panControlEnabled: false,
zoomControlEnabled: true,
top: 60,
left: 15,
gridHeight: 100,
iconSize:9,
gridBackgroundAlpha: 0
};
recentlyMap.responsive = {
enabled: true
};
recentlyMap.areasSettings = {color: "#D8DDDF", selectable: true, selectedColor: "#436BFF", outlineColor: "#fff", outlineThickness:
0.5};
recentlyMap.imagesSettings.balloonText = "<div align='left' style='font-size:10px;'>[[title]]</div>";
recentlyMap.imagesSettings.bringForwardOnHover = false;
recentlyMap.legend = recentlyLegend;
recentlyMap.hiddenLegendItems = {};
recentlyMap.addListener('init', function () {
recentlyMap.preventDragOut = true;
recentlyMap.legend.switchable = true;
recentlyMap.legend.addListener('clickMarker', recentlyHandleLegendClick);
recentlyMap.legend.addListener('clickLabel', recentlyHandleLegendClick);
});
recentlyMap.addListener("rendered", function () {
recentlyMap.initialZoomLatitude = recentlyMap.zoomLatitude();
recentlyMap.initialZoomLongitude = recentlyMap.zoomLongitude();
});
recentlyMap.dataProvider = source;
recentlyMap.addListener("clickMapObject", handleMapObjectClick);
recentlyMap.export = {
enabled: true,
position: "bottom-right"
};
recentlyMap.write(chart.chartId);
}
Map has been rendered properly but legends only appears on window resize and its also not taking custom css for legends
Can anyone give solution for this?
After writing the chart to html, try to call validate data and validate size methods.
i.e After
recentlyMap.write(chart.chartId);
this line write the following
recentlyMap.validateData();
recentlyMap.validateSize();
I have used this methods over normal map.I'm not sure about map
I solved this problem in my own amMap, which was also failing to show the legend until the browser resized. The solution was setting additional values in the configuration for my responsive plugin (you're using this plugin too).
The issue relates to the sizing of the map - the responsive plugin will automatically attempt to hide components of the legend bit by bit as the map shrinks and eventually, the entire legend will get hidden as the size of the map becomes smaller than amMap's default responsive breakpoints.
In your configuration, instead of this:
"responsive": {
"enabled": true
},
// ... rest of conf here ...
Try this:
"responsive": {
"enabled": true,
"rules": [
{
"minHeight": 0,
"overrides": {
"legend": {
"enabled": true
}
}
}
]
},
// ... rest of conf here ...
This says: "if the map is taller than 0px tall (which it should always be if you're setting your own width and height styles), show the legend.".
I'm not sure what's going on under the hood in amMaps when you don't provide a rules array but it seems like it applies it's own rules for you if you don't provide them yourself.
Here's a good knowledgebase article explaining the responsive plugin:
https://www.amcharts.com/kbase/making-charts-responsive/
My goal is to make a sprite bigger than the screen and have the user scroll to see the different parts of it, so I wanted to ask if Phaser had any sprite eventListener-functions such as:
var canvas = window.document.getElementsByTagName('canvas')[0],
prevX = 0, prevY = 0, mouseDown = false;
where canvas can be used as
canvas.addEventListener('mousedown',function(e){
});
canvas.addEventListener('mousemove',function(e){
});
Here is how I did it.
In your update function:
if (this.game.input.activePointer.isDown) {
if (this.game.origDragPoint) {
// move the camera by the amount the mouse has moved since last update
this.game.camera.x += this.game.origDragPoint.x - this.game.input.activePointer.position.x;
this.game.camera.y += this.game.origDragPoint.y - this.game.input.activePointer.position.y;
}
// set new drag origin to current position
this.game.origDragPoint = this.game.input.activePointer.position.clone();
}
else {
this.game.origDragPoint = null;
}
If using the camera is OK for you, you can try this Phaser 2 plugin: https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
With this plugin you can enable vertical and horizontal scroll to simulate scrolling into the canvas element used by Phaser, also you can customize the movement before to initialize the plugin, example:
var game = new Phaser.Game(400, 400, Phaser.AUTO, '', {
init: function () {
//Load the plugin
this.game.kineticScrolling = this.game.plugins.add(Phaser.Plugin.KineticScrolling);
},
create: function () {
//Configure the plugin
this.game.kineticScrolling.configure({
kineticMovement: true,
timeConstantScroll: 325, //really mimic iOS
horizontalScroll: true,
verticalScroll: false,
horizontalWheel: true,
verticalWheel: false,
deltaWheel: 40
});
//Starts the plugin
this.game.kineticScrolling.start();
//Changing the world size
this.game.world.setBounds(0, 0, 800, 800);
},
stopScrolling: function () {
//Stop the plugin
this.game.kineticScrolling.stop();
}
});
Also there's a fork for Phaser 3, check the repo from GitHub.
Regards, Nicholls
Does the library chart.js support any sort of callbacks on specific events? I'm mostly interested in 'on animation end' event, but would be nice to know any other events if they're supported.
If this is not an option, do you know any workarounds? I'm using jQuery and vue.js and I just need to show some additional text on the page (completely outside of the chart itself) when chart.js finishes the animation of the chart.
For Chart.Js 2.6.0
options: {
cutoutPercentage: 90,
animation: {
duration: 2000,
onProgress: function(animation) {
$progress.attr({
value: animation.animationObject.currentStep / animation.animationObject.numSteps,
});
},
onComplete: function(animation) {
alert('onAnimationComplete')
}
}
},
See this codepen https://codepen.io/shivabhusal/pen/XaZQaW
There is an onAnimationComplete option you can specify to run stuff once the animation completes. See this section of the documentation.
Example
var ctx = document.getElementById("chart").getContext("2d");
var myLine1 = new Chart(ctx).Line(lineChartData1, {
onAnimationComplete: function() {
alert('animation complete')
}
});
Fiddle - http://jsfiddle.net/4vo72rLd/
In ExtJS 4, by default, the dragdrop proxy is displayed to the right bottom position of the mouse position during drag operation. Let say I click into the center of my target and move my mouse by 1 px. I would like the proxy to itself over the original element, shifted by 1 px.
Basically, I need proxy to behave like the example at http://jqueryui.com/demos/draggable/#sortable. In this example the proxy is over the original element and then moves around when the mouse is dragged.
How can I achieve this?
Here is sample code illustrating the problem when dragging a custom widget.
Ext.onReady(function(){
var hewgt = Ext.define('Demo.widget.Complex', {
extend: 'Ext.panel.Panel',
alias: 'widget.complex',
frameHeader: false,
draggable: false,
layout: 'table',
initComponent: function() {
this.callParent(arguments);
var txtFld;
this.superclass.add.call(this, txtFld = new Ext.form.field.Text({fieldLabel:'test'}));
this.superclass.add.call(this, new Ext.button.Button({text:'Save'}));
}
});
Ext.define('Demo.dd.DragSource', {
extend: 'Ext.dd.DragSource',
b4MouseDown: function(e) {
this.diffX = e.getX() - this.el.getX();
this.diffY = e.getY() - this.el.getY();
this.superclass.setDelta.call(this, 0, 0);
},
getTargetCoord: function(iPageX, iPageY) {
return {x: iPageX - this.diffX, y: iPageY - this.diffY};
}
});
var panel = Ext.create('Ext.panel.Panel', {
layout: 'absolute',
title: 'Navigation'
});
var vp = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [panel]
});
var img = Ext.create('Demo.widget.Complex', { width: 400, height:100, x:20, y:20 });
panel.add(img);
new Demo.dd.DragSource(img.getEl());
img = Ext.create('Demo.widget.Complex', { width: 400, height:100, x:20, y:150 });
panel.add(img);
new Demo.dd.DragSource(img.getEl());
});
I am new to Ext JS.
Please let me know how can the dragged proxy be positioned correctly?
Thanks