I want to add a title to the legend box in Flot? For example, if my legend shows different Products, I want the title above the legend box to say "Products".
Somewhat hacky, but you can do it like this:
var $legend = $('#chart > div.legend'); // replace #chart with the id from your div
var $legendTitle = $legend.find('div').first();
$legendTitle.html('Products').height($legendTitle.height() + 15);
$legend.find('table').first().css('top', $legendTitle.position().top + 15);
Related
I am looking to add zoomable text to the rendered image in OpenSeadragon. The desired functionality is that when you are zoomed out, the text is very small, and as you zoom in, the text increases in size.
I have tried to add text to an overlay div DOM element. This adds text, but as you zoom out, the size of the div gets smaller but the text doesn't. The text gets squeezed to multiple lines.
I use the Render2 class in Angular 7 to manipulate the DOM, but this can be done in any framework/library:
// create the DOM element need for SeaDragon's overlay
let div = this.renderer.createElement('div');
const text = this.renderer.createText(`x: ${xaxis}, y: ${yaxis}`);
// append text to div element
this.renderer.appendChild(div, text);
// add id for Seadragon overlay creation and styling of overlay
this.renderer.setAttribute(div, 'id', overlayname);
this.renderer.setAttribute(div, 'class', 'image-ruler');
// now append the div tag to ViewChild div
this.renderer.appendChild(this.singleOverlay.nativeElement, div);
I expect the text to zoom with the image. Is this possible?
I figured out how to do it. I saw this example that uses an svg plugin so d3 can be used to draw an overlay. After downloading this plugin, I noticed that when I printed text on the screen, it was incredibly large. Too large to read.
As d3 at this zoom level uses the scale of 0-1 for the size of the image, I had to divide the scale by the width of my image.
var p = viewer.viewport.pixelFromPoint(new OpenSeadragon.Point(0, 0), true);
var zoom = viewer.viewport.getZoom(true);
var rotation = viewer.viewport.getRotation();
var imageSize = viewer.world.getItemAt(0).getContentSize();
var scale = viewer.viewport._containerInnerSize.x * zoom / imageSize.x;
g.attr('transform',
'translate(' + p.x + ',' + p.y + ') scale(' + scale + ') rotate(' + rotation + ')');
I then reimplemented the plugin's resize function in my component as not to modify a node module. The result was small text on my enormous image that was readable when you zoom in.
I have a flot chart with multiple series. I need to show y-values of all the series together when any point is hovered on for a particular x-value.
I'm using flot.tooltip for showing the tooltip. Is there any way to combine the y-values of all series like PowerBI does? Or or maybe even trigger the hovers of other points too?
Here's what I included in my chartOptions:
tooltipOpts: {
content: function (label, x, y) {
// titile
var text = "<i>" + vm.areaData[0].data[x][0] + '<br/></i>';
vm.areaData.forEach(function(series)
{
// series_label : value
text += "<b>" + series.label + ' : ' + series.data[x][1] + "<br/>" + "</b>";
});
return text;
}
}
As the X-axis has common values, I'm using that as title for the tooltip.
vm.areaData has the different series that are on my chart. I'm iterating through them and creating the tooltip that needs to be displayed.
I want to add a label that doesn't always face the camera. Instead, I want it to follow a defined path. Similar to how street names follow the direction of their streets in google maps (they aren't always horizontal).
I can think of 2 possible implementations for rotating text but haven't had any luck.
That Label() or label : have a rotation property I haven't found. IE something like this:
viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
label : {
text : 'Philadelphia'
//rotation : Cesium.Math.toRadians(-45)
}
});
or this
var labels = scene.primitives.add(new Cesium.LabelCollection());
var l = labels.add({
position : Cesium.Cartesian3.fromRadians(longitude, latitude, height),
text : 'Hello World',
font : '24px Helvetica'
//rotation: Cesium.Math.toRadians(-45)
});
Create Pictures of each label in photoshop and import them as an image, then rotate the image (or use it as a material and rotate the entity). Very labor intensive if you have a lot of labels (like street names).
Or perhaps there is a way for cesiumjs to recognize text as a fixed position 2D object and skew it appropriately as the view angle changes.
Any ideas?
If your text doesn't change, You can use an image, and load it by Cesium.SingleTileImageryProvider .
If your text does change, you can use a billboard.image, set an HTML canvas to it, and rotate the canvas like so:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "20px Georgia";
ctx.fillText("Hello World!", 10, 50);
ctx.font = "30px Verdana";
// Create gradient
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");
// Fill with gradient
ctx.rotate(20*Math.PI/180);
ctx.fillStyle = gradient;
ctx.fillText("Big smile!", 10, 90);
billboard.image = ctx;
The only way I know how to rotate a label is like #Henri Aloni said with canvas.
Cesium has already a function called: writeTextToCanvas.
example in typescript :
viewer.entities.add({
position: Cartesain3.fromDegrees(34, 32, 0),
billboard: {
image: writeTextToCanvas('baruch', {
font: '30px sans-serif'
}),
rotation: 45
}
});
I have a bar chart in flot and i want to have up or down arrows besides each data bar, as an indicator. Basically i want to add annotations to a flot chart.
I am looking for a chart like below,
You can add any HTML element to flot chart by manipulating DOM, below is a link that illustrates how this can be done,
http://www.isquery.com/devel/jquery/flot/examples/annotating.html
Make the below modifications to the snippet in the above link,
var o = plot.pointOffset({ x: 1, y: 15});
placeholder1.append('<div style="position:absolute;left:' + (o.left + 4) + 'px;top:' + o.top + 'px;color:#666;font-size:large"><img src="images/UpArrow.png" alt="image" /></div>');
When using the Kendo Dataviz, chart I need to have the crosshair stick, and to be calibrated between plot points on the category axis.
On the hover over the crosshair will lose stickiness, and always aligns to gridline, with the below code:
var chart = $("#" + d.obj_map[objId].upstream).data("kendoChart");
var hair = chart._plotArea.crosshairs[0];
hair.stickyMode = true;
The other problem with the crosshair is to able to set it between plot... So I though drawing my own crosshair on the chart.
var m = hair.linePoints();
var opt = hair.options;
opt.zIndex = 100;
var view = chart._view.createLine(m[0].x, m[0].y, m[1].x, m[1].y, opt);
var jk = view.renderPoints();
neither one is working properly. Does anyone know how to draw custom lines on Kendo chart?