Does Flot have an option that can be set to give the chart a title? I'm not seeing one for the overall chart, just for the axes.
But I might have missed something.
I do not think this option exists. It is pretty easy, though, to title the plot using regular HTML. Just wrap a div around your "placeholder" div and add the title text to that.
after drawing flot chart (plot function) fill canvas with text (jsFiddle). Advantage of my solution is that you can save chart as image containing title on it.
example:
var c=document.getElementsByTagName("canvas")[0];
var canvas=c.getContext("2d");
var cx = c.width / 2;
var text="Flot chart title";
canvas.font="bold 20px sans-serif";
canvas.textAlign = 'center';
canvas.fillText(text,cx,35);
You can use hooks for that. For instance use the overlay hook, and implement your overlay functionality in a separate OverlayHandler
Here is an example, where the chartElement, chartDataand chartOptions are your HTML element and flot data and flot options, respectively.:
var plotOverlayHandler = function(plot, cvs) {
if(!plot) { return; }
var cvsWidth = plot.width() / 2;
var text = 'Flot chart-title!';
cvs.font = "bold 16px Open Sans";
cvs.fillStyle = "#666666";
cvs.textAlign = 'center';
cvs.fillText(text, cvsWidth, 30);
return cvs;
};
var plot = $.plot(chartElement, chartData, chartOptions);
plot.hooks.drawOverlay.push( plotOverlayHandler );
When exporting the canvas via the native toDataURL method, simply apply the OverlayHandler first. This allows for greater flexibility.
var elCanvas = $('canvas.flot-base').first();
var canvas = plotCanvasOverlay(elCanvas, elCanvas.get(0).getContext('2d'))
var dataUrl = canvas.toDataURL('image/png');
Pioja's answer is indeed a great one. His jsFiddle shows the full details. It is important to have the following included in your options:
canvas: true,
grid: {
margin: { top:50 }
}
This will then insert a nice chart title which can be included in the image if you export it.
Building on pioja's answer, the title can be set directly after the plot has been made with:
var plot = $.plot($("#"+PlotPlaceholder), data, options);
By using the getCanvas function:
var c = plot.getCanvas();
Now, just follow pioja's code to get:
var canvas=c.getContext("2d");
var cx = c.width / 2;
var text="Flot chart title";
canvas.font="bold 20px sans-serif";
canvas.textAlign = 'center';
canvas.fillText(text,cx,35);
Related
thank you for reading.
I have been attempting to open a dialog box with a set size. Ideally being 90% in width, however I am having trouble doing so. Could anyone point me in the right direction (or just tell me the answer).
I believe it has to be set in the call to open the box which is as follows:
readMe({title,img,date,content}:Blog):void{
const dialogConfig = new MatDialogConfig();
dialogConfig.data = {
title,
img,
date,
content,
};
const dialogRef=this.dialog.open(BlogPostComponent,dialogConfig);
}
Thanks in advance,
You can add width and height properties to your dialogConfig, ie
dialogConfig.width = '300px';
dialogConfig.height = '200px';
There's also maxWidth and maxHeight properties if necessary, see the docs.
Following on from Aldin Bradaric's answer here is the updated code I am now using
readMe({title,img,date,content}:Blog):void{
const dialogConfig = new MatDialogConfig();
dialogConfig.minWidth="75%";
dialogConfig.data = {
title,
img,
date,
content,
};
const dialogRef=this.dialog.open(BlogPostComponent,dialogConfig);
}
I need to select multiple markers in a map. Something like this: Box/Rectangle Draw Selection in Google Maps but with Leaflet and OSM.
I think it could be done by modifying the zoom box that appears when you shift click and drag in an OSM map, but I don't know how to do it.
Edit:
I rewrote the _onMouseUp function, as L. Sanna suggested and ended up with something like this:
_onMouseUp: function (e) {
this._finish();
var map = this._map,
layerPoint = map.mouseEventToLayerPoint(e);
if (this._startLayerPoint.equals(layerPoint)) { return; }
var bounds = new L.LatLngBounds(
map.layerPointToLatLng(this._startLayerPoint),
map.layerPointToLatLng(layerPoint));
var t=0;
var selected = new Array();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
pt = new L.LatLng(a[0], a[1]);
if (bounds.contains(pt) == true) {
selected[t] = a[2];
t++;
}
}
alert(selected.join('\n'))
},
I think it could be easy modificating the zoom box that appears when
you shift clic and drag in an osm map, but I don't know how to do it
Good idea. The zoom Box is actually a functionality of leaflet.
Here is the code.
Just rewrite the _onMouseUp function to fit your needs.
Have you tried something like this?
markers is an array of L.latLng() coordinates
map.on("boxzoomend", function(e) {
for (var i = 0; i < markers.length; i++) {
if (e.boxZoomBounds.contains(markers[i].getLatLng())) {
console.log(markers[i]);
}
}
});
Not enough points to comment, but in order to override the _onMouseUp function like OP posted in their edit, the leaflet tutorial gives a good explanation. Additionally, this post was very helpful and walks you through every step.
A bit late to the party but it's also possible to achieve this using the leaflet-editable plugin.
// start drawing a rectangle
function startSelection() {
const rect = new L.Draw.Rectangle(this.map);
rect.enable();
this.map.on('draw:created', (e) => {
// the rectangle will not be added to the map unless you
// explicitly add it as a layer
// get the bounds of the rect and check if your points
// are contained in it
});
}
Benefits of using this method
Allow selection with any shape (polygon, circle, path, etc.)
Allow selection using a button/programmatically (does not require holding down the shift key, which may be unknown to some users).
Does not change the zoom box functionality
function highlightmarker(marker_id) {
//console.log("Highlight marker id: "+marker_id);
for (var i=0; i<markers.length; i++) {
if (markers[i].id == marker_id) {
map_markers[i].setAnimation(google.maps.Animation.BOUNCE);
}
}
}
This makes my map markers bounce up and down but I want them to grow instead.
I tried replacing the last line with this but it didn't work:
var img_height = 40;
var img_width = 40;
How do I make highlighted Google Map markers grow?
You could use a Icon (or a MarkerImage that's still supported but deprecated in favor of Icon) and use a the common marker image in it and set the appropriate size/scale you desire, for instance, assuming markers[i] points to a valid marker
var image = {
url: " http://www.google.com/mapfiles/marker.png",
size: new google.maps.Size(50, 50),
origin: null,
anchor: null,
scaledSize: new google.maps.Size(50, 50)
};
marker[i].setIcon(image);
for a more complete example I created a jsFiddle that sets the icon upon marker creation, http://jsfiddle.net/68gx9/
instead of
map_markers[i].setAnimation(google.maps.Animation.BOUNCE);
replace marker image with a new bigger one..
map_markers[i].setIcon(yourImageUrl);
Recently I started working on HTML5 Canvas, I'm new to it.
I've a problem as follows:
I'm loading a Canvas with Body Chart Image (Predefined Image) and on that User will Draw some lines, shapes, etc.
After that I'll generate an image object as follows
var canvas = document.getElementById("MyCanvas");
var dataURL = canvas.toDataURL();
var image = new Image();
image.src = dataURL;
But, Here it generates only those elements which are drawn by users (lines, shapes) as PNG Image. It won't take that Predefined canvas background Image.
I need to generate a PNG image which should include both the Canvas background Image as well as User entered drawing elements.
How to do this?
Try to actually draw you image onto your canvas, utilizing these functions:
var canvas = document.getElementById("MyCanvas");
var img = new Image();
img.src = 'pathToYourImageHere';
canvas.drawImage(img,0,0); /* 0,0 is x and y from the top left */
When you now try to save it, it should also save your background image.
EDIT:
In response to your comment:
You can circument your layering problem by using two different canvases. One for the image, and one for your drawing. Then layer them on top of each other using absolute positioning.
You can read more here: Save many canvas element as image
EDIT2:
But actually you shouldn't have a layering problem, since the following code will first draw the image and then draw the arc, and the layering will be fine:
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "somePathToAnImage";
context.drawImage(imageObj, 50, 50);
var x = canvas.width / 2;
var y = canvas.height / 2;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
context.lineWidth = 15;
// line color
context.strokeStyle = "red";
context.stroke();
Even though the layering is fine, you will be better of by using two canvases, in case you would like to only save the drawing, without the background. You can always save both into a new canvas and save that, when you only use one canvas you'll have a hard time separating the drawing from the background.
This is because the image needs time to load, you have to use the onload function.
imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;}
if (imgLoaded) { /*you draw shapes here */ }
I have a tooltip on a ComboBox but I much prefer the styling of the errorTip
(with the "tail").
I have replaced the tooltip with an errorTip, but now the ComboBox has a red
border.
I'm still pretty much a newb... is there a way to override the red border on the
ComboBox so that its' border is back to good ol' black?
thanks,
Mark
You'd probably want to create your own custom tooltip as errorTip is reserved for the validation system.
There's some info here about how to create your own. It's fairly straightforward if you want something simple.
Here's something I've used in the past:
The Actionscript:
private var infoToolTip:ToolTip;
private function showToolTip(evt:MouseEvent, text:String):void
{
var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);
// Convert the targets 'local' coordinates to 'global' -- this fixes the
// tooltips positioning within containers.
pt = evt.currentTarget.parent.contentToGlobal(pt);
infoToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipAbove") as ToolTip;
infoToolTip.setStyle("borderColor", "#87B846");
infoToolTip.setStyle("color", "white");
var yOffset:int = infoToolTip.height + 5;
infoToolTip.y -= yOffset;
infoToolTip.x -= 5
}
// Remove the tooltip
private function killToolTip():void
{
ToolTipManager.destroyToolTip(infoToolTip);
}
Using the toolTip:
<mx:Image source="{myImageSource}" mouseOver="showToolTip(event, 'Hello there!')" mouseOut="killToolTip()" />