What are the plotX, plotY values of a point in HighCharts? I can't find them in the documentation. I read the values but couldn't make sense of them when using a pixel ruler on the graph.
plotX and plotY are not part of API - just inner properties to get coordinates where plot point. Using them is shorthand for getting values from point:
http://api.highcharts.com/highcharts#Point.x
http://api.highcharts.com/highcharts#Point.y
And translating to position via:
http://api.highcharts.com/highcharts#Axis.toPixels()
plotX and plotY are the reference point in the plot area, chart.plotLeft and chart.plotTop get the full coordinates.
Check the API for tooltip->positioner
http://api.highcharts.com/highcharts#tooltip.positioner
jsFiddle: http://jsfiddle.net/m9L5j/
tooltip: {
positioner: function () {
return { x: 80, y: 50 };
}
}
Related
I built a world map with a drop down menu that changes the zoom level: see fiddle
This is my function:
$('#func').change(function () {
var chart = $('#map').highcharts();
var v = $(this).val();
if(v == "1") {
$('#map').highcharts().mapZoom(10);
$('#map').highcharts().mapZoom(.4);
chart.redraw();
}
});
In addition I want to change the position of the map. How can I change latitude and longitude after a value is selected?
Using the mapZoom method you can change the current map view. You only have to add the second and third argument to that method. This is the X and Y position of the new zoom centre.
For calculating that value from latitude/longitude you might use the fromLatLonToPoint method.
In the demo below I implemented it for Europe.
API:
https://api.highcharts.com/class-reference/Highcharts.Chart#mapZoom
https://api.highcharts.com/class-reference/Highcharts.Chart.html#fromLatLonToPoint
Live demo:
https://jsfiddle.net/BlackLabel/xs8nLgho/
In thingsboard, (how) can I use a dynamic character and colour as the points in a time series while using data from a different series as parameters?
What I am trying to achieve is a combined historic wind speed and direction chart like this:
I have two data sources:
Wind speed in km/h
Wind direction in degrees (0 is north, 180 is south)
The colour is based on wind speed and calculated by a static rule (e.g above 30km/h is displayed in red)
As far as I can tell this is not possible with the thingsboard charts (TbFlot). They seem to act as the (very handy) glue between the widget configuration and the underlying chart-library called Flot.
However, you can use the flot library directly from your widgets!
Just call
$.plot(self.ctx.$container, [[[0,0], [1,1], [2,1]]]);
to draw a chart.
I stumbled uppon some code in the flot documentation about customizing the data series and came up with this to make it work as a thingsboard widget:
self.onInit = function() {
let counter, f_drawCross, flotOptions;
counter = 0;
f_drawCross = function(ctx, x, y, radius, shadow) {
var size = radius * Math.sqrt(Math.PI) * 2;
if (shadow) {
return;
}
if (++counter % 2) {
ctx.moveTo(x - size, y);
ctx.lineTo(x + size, y);
ctx.moveTo(x, y + size);
ctx.lineTo(x, y - size);
}
else {
ctx.moveTo(x - size, y - size);
ctx.lineTo(x + size, y + size);
ctx.moveTo(x - size, y + size);
ctx.lineTo(x + size, y - size);
}
};
flotOptions = {
series: {
lines: { show: true },
points: {
show: true,
symbol: f_drawCross
}
}
};
$.plot(self.ctx.$container, [[[0,0], [1,1], [2,1]]], flotOptions);
};
It creates a chart in your widget container and draws (alternating) crosses as the data points. I think you will need some kind of counter/index to let the drawing method access the values of the current data point it is painting.
I have a chart like this, you can see that only about 22 points in the chart from left to right. I want to increase this, so that there are more points. Right now it seems very jumpy, but the range is only between 10-11.5, I want to "zoom out" so the line almost looks flat, and these huge peaks and valleys look like little bumps. I've combed over the highcharts documentation and cannot find this config setting.
In the initial creation of the spline chart, an array of point is created, in the default case it is 49 samples, here I changed it to 200, which did what I needed.
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -200; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
In the highchart documentation is says:
positioner: Function
A callback function to place the tooltip in a default position. The callback receives three parameters: labelWidth, labelHeight and point, where point contains values for plotX and plotY telling where the reference point is in the plot area.
Add chart.plotLeft and chart.plotTop to get the full coordinates.
http://api.highcharts.com/highcharts#tooltip.positioner
But I'm not sure where I am supposed to add plotLeft, or plotTop
I don't see it on the scope, and I can't see it in the "chart" property options.
Can anyone explain?
Example for you: http://jsfiddle.net/j92p2/
tooltip: {
positioner: function (w, h, p) {
var chart = this.chart, // get chart
plotLeft = chart.plotLeft, // get plotLeft
plotTop = chart.plotTop; // get plotTop
console.log(this, plotTop, plotLeft); // watch console while hovering points
return { x: 80, y: 50 };
}
}
See inline comments. Let me know if you have any more questions.
In Highcharts 2, it was easy to add a point using series.addPoint(p) where the x value of that point fell between the x-values of two existing points.
Example: Let's say you wanted to create a chart with one series containing two points:
var p1 = {x: 100, y: 50};
var p2 = {x: 200, y: 40};
var data = [];
data.push(p1);
data.push(p1);
var c = new Highcharts.Chart({
...//code omitted
type: 'line',
data: data,
...//code omitted
});
In version two you could call add a point between those two by going:
var p3 = {x: 150, y: 60};
c.series[0].addPoint(p3, true);
For 'line' charts, highcharts 2 would automatically determine that the x value of p3 falls between the x values of p1 and p2 and so the line would be plotted through the points in the order: p1, p3, p2.
We are finding that in highcharts 3, the line gets plotted through the points in the order p1, p2, p3 - which implies that it "turns back on itself".
I have prepared the following jsFiddle examples, which add 50 points to an existing series with randomized x and y value.:
Highcharts 2.1.9: http://jsfiddle.net/HdNh2/4/
Highcharts 3.0.0: http://jsfiddle.net/HdNh2/5/
Is this something that could be fixed or do we need to try and circumvent the issue?
Thanks in advance...
H
So just to close this issue: Highcharts has confirmed that the logic changed since 2.2.x.
In our case it was simple enough to just re-render the entire chart, but I suspect series.setData() would also have been an option.
Here's a workaround. This will sort points on their x-values as they're added manually. This events object is in the chart object options block.
events: {
click: function(e) {
// find the clicked values and the series
var series = this.series[DIA.currentSeriesIndex],
x = parseFloat(e.xAxis[0].value),
y = parseFloat(e.yAxis[0].value);
// Add it
series.addPoint([x, y]);
if ( series.data.length > 1) {
// grab last point object in array
var point = series.data[series.data.length-1];
// sort the point objects on their x values
series.data.sort(function (a, b)
{
//Compare "a" and "b" and return -1, 0, or 1
return (a.x - b.x);
});
// force a redraw
point.update();
}
}
}