How to remove this value from bars (1,) I am using PrimeFaces and jqPlot would like to leave only the second value when hovering over the bar.
I already tried to search various information on the internet but found nothing exclusively about this customization. By the image below I better illustrate which value I want to remove from my bars in the chart.
https://ibb.co/8jSk4zP
function skinBarImpurezasMinerais() {
this.cfg.shadow = false;
this.cfg.title = '';
//this.cfg.seriesColors = ['#e30910', '#FFC107'];
this.cfg.grid = {
background: '#ffffff',
borderColor: '#ffffff',
gridLineColor: '#F5F5F5',
shadow: false
};
this.cfg.axesDefaults = {
borderWidth: 0.1,
borderColor: 'bdbdbd',
rendererOptions: {
textColor: '#666F77'
}
};
this.cfg.seriesDefaults = {
shadow: false,
lineWidth: 1,
stackSeries: true,
renderer: $.jqplot.BarRenderer,
pointLabels: {show: true},
rendererOptions: {
varyBarColor: true,
barWidth: 50,
},
markerOptions: {
shadow: false,
size: 7,
style: 'circle'
}
}
}
Thanks!
I found the solution .. I had to add the block below
highlighter: { show: true,
showTooltip: true, // show a tooltip with data point values.
tooltipLocation: 'nw', // location of tooltip: n, ne, e, se, s, sw, w, nw.
tooltipAxes: 'y', // which axis values to display in the tooltip, x, y or both.
lineWidthAdjust: 2.5 // pixels to add to the size line stroking the data point marker
}
Related
I am developing a Graph Editor with Nodes and Branches. With Pan/Zoom. I am starting with the (1) Pan/Zoom (done), (2) Add Nodes (done), (3) Select Nodes (done), (4) Move Nodes (disable the Pan). I am stuck here. I made the stage draggable for the Pan. When I want to move (drag) the nodes, I put draggable of the stage to false. But I don't see how to drag the nodes.
The use of the Graph Editor is (+) Nodes to create the nodes.
Thanks for any help.
Here is a jsbin
https://jsbin.com/suqisak/4/edit?html,js,output
function evtFct_OnMouseDragStart(event) {
var realMousePos = getRelativePointerPosition(group);
console.log('DragStart');
if (Nodes_list.length > 0) {
var SelectedNode = getSelected_Node(realMousePos);
if (SelectedNode !== null) {
SelectedNode.circle.draggable(true);
}
}
}
I dont see how to make the nodes (circles) draggable.
the event DragStart Doesn't fire !!!
Then I created a group with the circle + label, and made the group draggable.
draw() {
this.View = new Konva.Group({draggable: true});
this.circle = new Konva.Circle({
x: this.x,
y: this.y,
radius: nodeSize,
fill: nodeColor,
draggable: true,
id: this.node_id
});
this.label = new Konva.Text({
x: this.x - 20,
y: this.y - 10,
text: this.node_id,
width: 40,
height: 20,
fontSize: 8,
fontFamily: 'sans-serif',
fill: 'blue',
verticalAlign: 'middle',
align: 'center'
});
this.View.add(this.circle);
this.View.add(this.label);
group.add(this.View);
}
And I could drag the nodes, BUT !!! I lost the node x, and y.
When I click on the node (near the node center), I knew near which node, I clicked. But Now !!! I lost the the x, and y of the new position !!!
Remark : In fact, I select the node by my own, I get the mouse click position. I loop through the nodes_list, to check if the position of the click and the circle center, have a distance less than the circle radius.
Finally, the question became, how to get the Node position coordinates (x,y) after the drag ?
As you are making a group draggable, you just need to set position to it. Then for a circle and a text, you need to set position relative to the group:
this.View = new Konva.Group({draggable: true, x: this.x, y: this.y });//added
this.circle = new Konva.Circle({
radius: nodeSize,
fill: nodeColor,
draggable: true,
id: this.node_id
});
this.label = new Konva.Text({
x: - 20,
y: - 10,
text: this.node_id,
width: 40,
height: 20,
fontSize: 8,
fontFamily: 'sans-serif',
fill: 'blue',
verticalAlign: 'middle',
align: 'center'
});
Then you just read the position from the group.
https://jsbin.com/yevozeyeza/1/edit?html,js,output
I'm creating a pie chart inside my Dashboard page. First, i've been created a bar chart and everything works properly, but now, while i'm creating a pie chart my tooltip doesn't works as expected.
My code:
<canvas id="pie-chart" height="213"></canvas>
<!-- ChartJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script>
var ctx2 = document.getElementById('pie-chart').getContext('2d');
var green_darkgreen_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
green_darkgreen_gradient.addColorStop(0, '#16D99B');
green_darkgreen_gradient.addColorStop(1, '#22A77C');
var red_darkred_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
red_darkred_gradient.addColorStop(0, '#F22626');
red_darkred_gradient.addColorStop(1, '#BE1111');
var yellow_darkyellow_gradient = ctx2.createLinearGradient(0, 0, 0, 150);
yellow_darkyellow_gradient.addColorStop(0, '#DFD337');
yellow_darkyellow_gradient.addColorStop(1, '#C5B929');
var pieChart = new Chart(ctx2,{
type: 'pie',
data: {
labels: ['Aberto', 'Fechado', 'Transferido'],
datasets: [{
data: [7, 10, 15],
backgroundColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
hoverBackgroundColor:[green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
hoverBackgroundColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
hoverBorderWidth: 0,
hoverBorderColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient],
borderColor: [green_darkgreen_gradient,red_darkred_gradient, yellow_darkyellow_gradient]
}]
},
options: {
legend: {
display: false,
labels: {
fontColor: "#000",
fontSize: 18
}
},
tooltips: {
backgroundColor: '#000',
titleFontSize: 16,
ttitleFontColor: '#0066ff',
bodyFontColor: '#000',
bodyFontSize: 14,
displayColors: false
},
backgroundColor: '#000',
titleFontSize: 16,
titleFontColor: '#ddd',
bodyFontColor: '#ddd',
bodyFontSize: 14,
displayColors: false
}
});
See results with a bar chart (same code basically):
Bar chart with tooltip
See results with a pie chart:
Pie chart with tooltip
All you need to do is just set tooltips bodyFontColor value to white (#FFfFFF)
....
tooltips: {
backgroundColor: '#000',
bodyFontColor: '#FFFFFF',
bodyFontSize: 14,
displayColors: false
}
...
Here is fiddle link to see result : https://jsfiddle.net/xf7nx5nc/
I am using GmapPanelv3.js. I can see the zooming and everything, but how come the map is blank? Here is an example http://jsfiddle.net/anthor/4aAKL/3/
Ext.onReady(function() {
var w = Ext.create('Ext.window.Window', {
title: 'Gmap',
height: 400,
width: 600,
layout: 'border',
items: [
{
title: 'Message List',
region: 'south',
height: 50,
split: true,
collapsible: true,
margins: '0 5 5 5',
collapsed: true
},{
region: 'west',
title: 'Tree',
collapsible: true,
width: 100,
items: [
{
xtype: 'button',
text: 'add',
handler: addInfoWindow // reference to event handler function
}]
},{
xtype: 'gmappanel',
region: 'center',
cls: 'reset-box-sizing',
mapConfOpts:['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
lat: 3.951941,
long: 102.052002
}
}
]
});
/**
* Just example, do not write code like this!
* GMApPanel source code
* http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/ux/GMapPanel.js
*/
// get the map reference
var map = w.down('gmappanel');
function openInfoWindow(content, marker) {
// create a info window
var infowindow = new google.maps.InfoWindow({
content: content,
size: new google.maps.Size(50,50)
});
infoBubble = new InfoBubble({
content: '<div class="example">Some label</div>',
//position: new google.maps.LatLng(53.5267, newlong),
shadowStyle: 1,
padding: 10,
borderRadius: 5,
minWidth: 200,
borderWidth:1,
//borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: false,
backgroundClassName: 'example',
//arrowSize: 0,
//arrowPosition:7,
//arrowStyle:3
});
infoBubble.open(map.gmap,marker);
var div = document.createElement('DIV');
div.innerHTML = 'Hello';
infoBubble.addTab('A Tab', div);
infoBubble.addTab('A Tab', div);
// All GMapPanel instances has the reference to the underlying googlemap object
// porperty name `gmap`.
//infowindow.open(map.gmap, marker);
}
function addInfoWindow() {
// uses GMapPanel `addMarker` method to create a marker and attached it to tree.
// Detailes - look at the source code of GMapPanel
var marker = map.addMarker({
lat: 53.5267,
lng: -1.13330,
title: 'Marker',
// listeners can be added via configuration or after create
// using standard google maps API, i.e.
// google.maps.event.addListener(marker, 'click', function() {...})
listeners: {
click: function() {
openInfoWindow('hello', marker);
}
}
});
}
w.show();
});
i just change
setCenter: {
'lat': 3.951941,
'lng': 102.052002,
}
all problem are solved!
I have been struggling with this all day. I have made new buttons to actually go on my map that match the Google Maps buttons sit on the map better. I have been trying to get them to work with the current buttons above the map so I can remove those but I can't seem to get them to work. What am I missing.
Here is a link to the page so you can see. The buttons above the map work and I am going to remove them. The buttons on the map don't work which I am trying to get to work.
DEMO LINK
Here is the code. The var radarButton and var satButton is the new ones. The ones below that is to the current buttons.
jQuery(document).ready(function($) {
var mapTypeId = wundermap.getMapTypeId("hyb");
var googlemap = new google.maps.Map($("#map")[0], {
center: new google.maps.LatLng(32.782878, -96.609862),
panControl: false,
zoom: 6,
mapTypeId: mapTypeId,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_TOP
},
});
var radarOptions = {
gmap: googlemap,
name: 'Radar',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Radar);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var radarButton = new buttonControl(radarOptions);
var satOptions = {
gmap: googlemap,
name: 'Satellite',
position: google.maps.ControlPosition.TOP_RIGHT,
action: function(){
if (wundermap.map.overlayMapTypes.length==0) {
wundermap.map.overlayMapTypes.push(null); // create empty overlay entry
wundermap.map.overlayMapTypes.setAt("1",Satellite);
}
else {
wundermap.map.overlayMapTypes.clear();
}
}
}
var satButton = new buttonControl(satOptions);
wundermap.setOptions({
map: googlemap,
refreshPeriod: 60000,
units: "english",
debug: 0,
source: "wxmap",
StreetsOverlay: true,
layers: [
{
layer: "Radar",
active: "on",
opacity: 70,
type: "N0R",
type2: "",
animation: {
num: 6,
max: 10,
delay: 25
},
stormtracks: "off",
smooth: "on",
subdomain: "radblast-aws"
},
{
layer: "Satellite",
defaultUI: 0,
opacity: "85",
source: "",
active: "off",
animation: {
num: 1,
max: 8,
delay: 25
}
},
],
});
wundermap.initialize();
});
Here is the link to the code for the actual layer. The code is to long to post but the overlay is called Radar.
RADAR CODE
The place to start is the JavaScript console. The error messages there tell you what the problems are.
First, when the page is loaded you have an error on line 286 of wxgr3radar.php:
<body onload="initialize()">
Where is your initialize() function defined? I don't see it in your code.
Then, when I click the Satellite button it stops on line 41 of imap.js because map.overlayMapTypes is undefined:
if (map.overlayMapTypes.length==0) {
Here you're expecting map to be a Maps API object, but map is not what you think it is. Look at it in the debugger. It's a DOM element, not a Maps API map. Your Maps API map is in a variable called googlemap, which you create in line 3 of imap.js.
This is my init function to load the map, I want it to show only the Netherlands, zooming in should be possible but zooming out should'nt. I searched all over, but I can't find a proper explanation on how to do this.
var config = {
zoom: 14,
zoomStart: 8,
centerPoint: new OpenLayers.LonLat(622044.536098, 6797086.3022847),
strokeColor: "#941B80",
strokeColor_allloc: "#575757",
strokeOpacity: 0.8,
strokeOpacity_allloc: 0.9,
strokeWeight: 2,
trackWeight: 5,
fillColor: "#941B80",
fillColor_allloc: "#575757",
fillOpacity: 0.25,
fillOpacity_allloc: 0.40,
pointRadius: 5,
fontColor: "black",
fontSize: 10,
fontFamily: "Arial",
scaleFactor: 1000000,
extent: new OpenLayers.Bounds(-5037508, -5037508, 5037508, 5037508.34),
units: 'm',
resolution: 156543.0339,
displayProjection: new OpenLayers.Projection("EPSG:4326"),
projection: new OpenLayers.Projection("EPSG:900913"),
controls: [
new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.Attribution()],
copyright: 'Map data © 2010 CC-BY-SA<br />OpenStreetMap.org contributors',
numZoomLevels: 10,
numberPlateTail: new OpenLayers.Size(117.333, 42),
numberPlate: new OpenLayers.Size(117.333, 25),
iconSize: new OpenLayers.Size(32, 37)
};
var myLayers = {
base: new OpenLayers.Layer.OSM('', '', {
attribution: config.copyright,
transitionEffect: 'resize',
layers: 'basic'
}, {
isBaseLayer: true
}),
vector: new OpenLayers.Layer.Vector('Vormen aan/uit', {
styleMap: my_style,
renderers: ['Canvas', 'SVG', 'VML']
}),
allloc_vector: new OpenLayers.Layer.Vector('Vormen aan/uit', {
styleMap: my_style,
renderers: ['Canvas', 'SVG', 'VML']
}),
markers: new OpenLayers.Layer.Markers('Markers')
};
init: function (canvas) {
this.canvas = canvas;
$('#' + canvas).append('<input type="button" class="button" value="Volledig scherm" onclick="tbMap.toggleFs();" />');
this.map = new OpenLayers.Map(this.canvas, {
controls: config.controls,
displayProjection: config.displayProjection,
Projection: config.projection,
maxExtent: config.extent,
maxResolution: config.resolution,
units: config.units,
numZoomLevels: config.numZoomLevels,
theme: null
});
tbMap.zoom();
this.map.addLayers([myLayers.base, myLayers.vector]);
this.map.setCenter(config.centerPoint, config.zoomStart);
},
zoom: function () {
OpenLayers.Control.Navigation.prototype.counter = 0;
//Inzoomgevoeligheid
OpenLayers.Control.Navigation.prototype.wheelUp = function (evt) {
this.counter++;
if (this.counter > 2) {
this.counter = 0;
this.wheelChange(evt, 1);
}
};
//Uitzoomgevoeligheid
OpenLayers.Control.Navigation.prototype.wheelDown = function (evt) {
this.counter--;
if (this.counter < -2) {
this.counter = 0;
this.wheelChange(evt, -1);
}
};
},
You can set the config attribute maxExtent. Using your existing bounds in your config it would look like this,
maxExtent : new OpenLayers.Bounds(-5037508, -5037508, 5037508, 5037508.34)
you would add this to the map config when you initialise.
you might also want to look at restrictedExtent
Hope this helps
Maybe can help you:
/**
*
* #type {int}
* #constant
*/
var MAX_ZOOM_LEVEL = 6;
/**
* The OpenLayers object that sets the map extent to the Europe scale
* #type {OpenLayers.Bounds}
* #var
*/
var europeGoogleExtent = new OpenLayers.Bounds(-4931105.5677773, 2641663.6973633, 8570731.1060977, 12425603.316113);
Zoom in?
//triggered after a zoom completes
mp.events.register('zoomend', this, checkZoom);
function checkZoom() {
var zoom = mp.getZoom();
if(MAX_ZOOM_LEVEL >= zoom ) {
J('#dialog').html('You reached the maximum zoom level. <strong>The spatial accuracy is of the order of X km.</strong>');
J('#dialog').attr('title', 'Warning message');
J('#dialog').dialog({
height: 140,
modal: true
});
} else {
return true;
}
}
//Loading the initial extent
if (!mp.getCenter()) {
if (document.getElementById('userMapExtent').value != '') {
var sExtent = document.getElementById('userMapExtent').value.split(',');
mp.zoomToExtent(new OpenLayers.Bounds(sExtent[0], sExtent[1], sExtent[2], sExtent[3]), true);
} else {
mp.zoomToExtent(europeGoogleExtent);
}
}