I am using LightningChartJs and I'm adding a UIElement textbox I would like to place this above the lineseries but when I give the scale of the lineseries to the addUIElement it does not show up.
chart.addUIElement(UIElementBuilders.TextBox,myseries.scale).setText('test')
When you use a scale of another series, then the positioning for the UIElement is done using the coordinates of the series. By default the UIElement will be positioned to 0,0 coordinate. If your line series doesn't show this coordinate then the UIElement will be out of view.
So if you have a line from 10,10 to 20,20 and you don't set the position of the UIElement, then you most likely will not see the UIElement as it's positioned to 0,0 position. You should in that case set the position of the UIElement to something in the range of 10,10-20,20. uiElement.setPosition({x: 12, y:12 })
See the code snippet below for a working example.
const {
lightningChart,
UIElementBuilders
} = lcjs
const chart = lightningChart().ChartXY()
const series = chart.addLineSeries()
series.addArrayY([1, 2, 1, 3, 2, 2, 3, 2, 1])
// add text box on the chart, using series scale
const textOverLine = chart.addUIElement(UIElementBuilders.TextBox, series.scale)
.setText('My Text')
// position the text, this is in the line series coordinates
.setPosition({ x: 4.5, y: 2.1 })
<script src="https://unpkg.com/#arction/lcjs#1.3.1/dist/lcjs.iife.js"></script>
Related
I am trying to build a plugin for XD to automate the creation of design elements. I have written a function to build the button (first picture below) using a text element and a rectangle. The only problem with this is that shape of the rectangle is not based on the width of the text, so when the text is longer you end up with the text overlapping the rectangle (see second picture below).
I have been trying to figure out how to get the width value of the text element so that I can size the rectangle appropriately. Can anyone help me with this?
I have figured out that by adding the line console.log (selection.items); I can output a full list of properties to the log, but how do I access the width property?
Here is the log output showing the rectangle and text elements...
[ Text ('Submit Button') {
width: 113, height: 20
global X,Y: -3, -74
parent: Artboard ('iPad – 1')
fill: ff000000
},
Rectangle ('Rectangle 6') {
width: 100, height: 50
global X,Y: -3, -58
parent: Artboard ('iPad – 1')
stroke: ff2d3494
} ]
and here is my full code...
const {Rectangle, Color, Text, Selection} = require("scenegraph");
let commands = require("commands");
function createButton(selection) {
// Create the outline of the button
const newButtonOutline = new Rectangle();
newButtonOutline.width = 100;
newButtonOutline.height = 50;
newButtonOutline.stroke = new Color("#2D3494");
newButtonOutline.strokeWidth = 2;
newButtonOutline.cornerRadii = {
topLeft: 10,
topRight: 10,
bottomRight: 10,
bottomLeft: 10
};
// Create the text for the button
const newButtonLabel = new Text();
newButtonLabel.text = "Submit Button";
newButtonLabel.fontSize = 18;
newButtonLabel.fill = new Color("#000000");
// Add the text and outline to the artboard
selection.insertionParent.addChild(newButtonOutline);
newButtonOutline.moveInParentCoordinates(100, 100);
selection.insertionParent.addChild(newButtonLabel);
newButtonLabel.moveInParentCoordinates(100, 100);
selection.items = [newButtonLabel, newButtonOutline];
console.log (selection.items);
//align the button elements and group together
commands.alignHorizontalCenter();
commands.alignVerticalCenter();
commands.group();
}
I hope someone can help!
So it turns out to get the width of a text node you need to get it from the localBounds, something like...
textNode.localBounds.width
or to get the width of a graphic node it is just...
graphicNode.width
I am using anychart for creating a percentage horizontal gauge.
And i want to change the marker information to show what i want.
I found nothing on the documentation about it.
I'm using the javascript anychart playground (link below).
The final implementation is on Angular 5.
The original code :
https://playground.anychart.com/docs/v8/samples/GAUGE_Linear_04
(Optional) The typescript method :
createAnyChartsCustomGauges() {
let array = [];
this.listItem.forEach(item => {
// Gauge type and data
const gauge = anychart.gauges.linear();
gauge.layout('horizontal');
// Set the data
gauge.data([item.percent]); //number
// Create the custom scale bar
const scaleBarre = gauge.scaleBar(0);
// color and style setting
const colorScale = anychart.scales.ordinalColor().ranges([
{
from: 0,
to: 25,
color: ['#D81E05', '#EB7A02'],
},
{
from: 25,
to: 50,
color: ['#EB7A02', '#FFD700'],
},
{
from: 50,
to: 75,
color: ['#FFD700', '#CAD70b'],
},
{
from: 75,
to: 100,
color: ['#CAD70b', '#2AD62A'],
},
]);
scaleBarre.width('5%');
scaleBarre.offset('31.5%');
scaleBarre.colorScale(colorScale);
// Add a marker pointer
const marker = gauge.marker(0);
marker.offset('31.5%');
marker.type('triangle-up');
marker.zIndex(10);
marker.labels().format('{%data[0]}%');
// Add a scale
const scale = gauge.scale();
scale.minimum(0);
scale.maximum(100);
scale.maxTicksCount(10);
// Add an axis
const axis = gauge.axis();
axis.minorTicks(true);
axis.minorTicks().stroke('#cecece');
axis.width('1%');
axis.offset('29.5%');
axis.orientation('top');
// format axis labels
axis.labels().format('{%value}%');
// set paddings
gauge.padding([0, 20]);
array.push(gauge);
});
}
Actual :
{
Pointer 0
Value 63
}
Expected :
{
Value 63%
}
#gugateider was absolutely right! Also, if you don't want to use HTML styling for tooltip and disable tooltip title and separator, you can use the code below:
gauge.tooltip().title(false);
gauge.tooltip().separator(false);
gauge.tooltip().format("Value: {%value}%");
You should be using the format() methods of the Tooltip class.
There's a similar example on Any charts playground
// enable HTML for tooltips
chart.tooltip().useHtml(true);
// tooltip settings
var tooltip = gauge.tooltip();
tooltip.positionMode("point");
tooltip.format("Value: <b>${%value} %</b>");
Try that and see if works?
I am using nvd3 bubble chart. I want to hide the bubble which contains size:0;
I have two data :-
var data = [];
data.push({key: 'Male(Yes)', values: []});
data['0'].values.push({
x: 1
, y: 1
, size: 0
});
data.push({key: 'Male(No)', values: []});
data['1'].values.push({
x: -1
, y: -1
, size: 20
});
I don't want to show bubble which has size:0;.
How can i hide the bubble?
You can do that by applying a CSS style (visibility:hidden/display:none/opacity:0) to the individual data point. One way of doing this is to select all svg objects of the type point - depending on your names used and then filter them according to size, then apply the new style to them.
svg.selectAll("#yourname svg")
.filter(function (l) {
return l.size== 0;
})[0].forEach(function (d){
d.style("visibility","hidden")
})
I would like to build some sort of forward/back pager that will navigate between the points on my chart, highlighting the current point.
The closest example I've seen is something similar to the news legend on google finance charts, https://www.google.ca/finance?q=goog&ei=AD6dUvjOLMi0iAL9Uw
(you can click each news article/event and it will jump in the graph to the relevant point in time on the graph)
Can this be done with Flot and any suggestions on how to do this? Thanks!
Here's a real quick example to demonstrate one approach to this problem. On previous/next button clicks it highlights the previous/next point in the series and adjusts the xaxis so that the hightlighted point stays centered on the screen.
var highlightPoint = 15; // our first highlight
var xmin = 10, xmax = 20; // some arbitrary slice of series
var plot = $.plot("#placeholder", [ d1 ], //initial plot call
{
xaxis:{min: xmin, max: xmax}
});
plot.highlight(0,highlightPoint); // initial highlight
$('#prevPoint').click(function(){
plot.unhighlight(0,highlightPoint); // unhighlight previous selection
highlightPoint -= 1; // move to left
xmin = highlightPoint - 5; // adjust xaxis
xmax = highlightPoint + 5;
plot.getOptions().xaxes[0].min = xmin; // set xaxis into options
plot.getOptions().xaxes[0].max = xmax;
plot.setupGrid(); // refresh chart with new xaxis
plot.draw(); // redraw
plot.highlight(0,highlightPoint); //highlight new point
});
Makes more sense to look at the Fiddle here.
I'm trying to scale down icons that I'm rendering with RaphaelJS. Using "transform": "s.5,.5,0,0" works just fine, but I'd much prefer to be able to give absolute pixel values, e.g. 20px. A nice alternative would be to get the path(s) to automatically scale to the paper dimensions. Are either of these possible?
My current code that uses transform:
$('.cog-menu-options-icon').each(function (i) {
paper = Raphael($(this)[0], 20, 20);
paper.path(window.icons.wrench).attr({ "fill": "#333", "transform": "s.5,.5,0,0" });
});
Can the path be set to automatically scale to fit the paper? Can the height/width of the path be set in pixels?
I am not super-familiar with Raphael, but could you use the bounding box function getBBox() to get the dimensions, and use those to calculate the correct scale?
$('.cog-menu-options-icon').each(function (i) {
paper = Raphael($(this)[0], 20, 20);
var icon = paper.path(window.icons.wrench);
var max = icon.getBBox().width;
var h = icon.getBBox().width;
if(h>max) {
max = h;
}
var scale = 20/max;
icon.attr({ "fill": "#333", "transform": "s"+scale+","+scale+",0,0" });
});
Here is an example: http://jsfiddle.net/xUyRS/
I added code to translate the icon if the path does not have a 0,0 origin, and to center the icon.
I also found that Raphael has a bug with getBBox which returns bad results on multiple calls to the same path, so I am using a forked version with the fix.