Hi @mikhailvolkov, is there a way to display both wind speed and direction on tooltip? Alternatively, would it be possible to add a small text box with these values besides the arrow?
Thanks!
1 Like
@albydallo Tooltips are customizable, you should be able to:
@mikhailvolkov I have seen many examples but none that adapts to this case.
It seems we can use the tooltip formatter property, although it seems that I am not able to extract the rotation angle of the arrow and include it in the tooltip panel that appears while hovering on data points. Could you please help here?
Much appreciated
Hi @albydallo
did you figure it out?
I have not been able to implement the formatter function to display the rotation angle along the wind speed
Cheers
Hi @andreshs1 ,
Yes, I use this
tooltip: {
trigger: ‘item’,
formatter: function (params) {
return Speed: ${params.data.value[1]} m/s<br/> Direction: ${-params.data.symbolRotate - 180.0} °;
}
},
Minus and -180 are optional, they just fit my application.
Cheers
Hi @adallolio
thanks for the reply
I have been able to find a work around to get the angle, and also to add additional formatting, but I am still working the angles
tooltip: {
trigger: ‘axis’,
formatter: function (params) {
if (params[0].value[2]>180) {
return [
‘Date: ’ + echarts.format.formatTime(‘dd-MM-yyyy’, params[0].value[0])
+ ‘
Time: ’ + echarts.format.formatTime(‘hh:mm’, params[0].value[0]),
‘Speed: ’ + parseFloat(params[0].value[1]).toFixed(1) + ’ Kts’,
‘Angle: ’ + parseFloat(params[0].value[2]-180).toFixed(2) + ’ ° P’
].join(’< br >’);
}
else {
return [
‘Date: ’ + echarts.format.formatTime(‘dd-MM-yyyy’, params[0].value[0])
+ ‘
Time: ’ + echarts.format.formatTime(‘hh:mm’, params[0].value[0]),
‘Speed: ’ + parseFloat(params[0].value[1]).toFixed(1) + ’ Kts’,
‘Angle: ’ + parseFloat(params[0].value[2]-180).toFixed(2) + ’ ° S’
].join(’< br >’);
}
}
},
Cheers
1 Like
Wow getting this to work is hard. Is there any chance you could post the full data object that Apache EChart needs?
I am using Influxdc and able to join the data I need but when I use the data objct you posted I am getting symbalSize errors. I am obviously doing something wrong but for the life of me I cannot see the way forward.
Thanks for your help.
cheers
Maurice
@mauriceatkinson You can see the data we emulated using the Static Data source in the documentation:
Thanks I have tried with static data, however I cannot get the panel to display any content when using data from influxdb.
@mauriceatkinson From the panel point of view all data source are the same as long as they return the data frames in a correct format with a proper field names.
You can post your Influx query and forum members can help you to adjust them accordingly.
I’ve been stuck at the same point for a while now. The data appears in table form, with all values correctly, however when I plot it on the graph, an error is occurring, can any good soul help me?
Here is my code :
let wind;
data.series.map((s) => {
const time = s.fields.find((f) => f.name === 'Time').values.buffer;
const value = s.fields.find((f) => f.name === 'Speed').values.buffer;
const rotate = s.fields.find((f) => f.name === 'Direction').values.buffer;
/**
Set Wind from 3 arrays
*/
wind = time.map((id, index) => {
return { symbolRotate: rotate[index], value: [time[index], value[index]] };
});
});
return {
xAxis: {
type: 'time'
},
yAxis: {
type: 'value'
},
visualMap: {
orient: 'horizontal',
left: 'center',
min: 0,
max: 10,
text: ['High', 'Low'],
dimension: 1,
inRange: {
color: ['#65B581', '#FFCE34', '#FD665F']
}
},
series: [
{
data: wind,
type: 'line',
symbol: 'path://M31 24.7343L21.7917 24.7343V0L9.20826 0L9.20826 24.7343H0L15.5 45L31 24.7343Z',
symbolSize: 20,
lineStyle: {
width: 0.3
}
}
]
};
Error:
ECharts Execution Error
data is not defined
ReferenceError: data is not defined
at eval (eval at <anonymous> (http://lucasvm:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.0.0), <anonymous>:4:1)
at eval (http://lucasvm:3000/public/plugins/volkovlabs-echarts-panel/module.js?_cache=6.0.0:163:6248)
at Mf (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:385:25631)
at Es (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:385:44739)
at el (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:385:38629)
at va (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:383:3353)
at Ca (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:385:43531)
at Oa (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:385:42470)
at Ad (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:385:37709)
at T (http://lucasvm:3000/public/build/5950.30ec6aaa9dcece6c3b3c.js:474:1591)
There was a recent breaking change on how you fetch the data
@yosiasz is correct - see the section " Code parameters migration guide" here: Business Charts plugin for Grafana | Grafana Labs
1 Like
Can you help me to fix this error ? Im stucked at this.
I tryed to fetch the data, now i have no errors but i have no graph 
const series = context.panel.data.series.map((s) => {
const speedField = s.fields.find((f) => f.type === 'Speed');
const sData = speedField ? speedField.values.buffer || speedField.values : [];
const timeField = s.fields.find((f) => f.type === 'Time');
const sTime = timeField ? timeField.values.buffer || timeField.values.map(dateString => new Date(dateString)) : [];
const rotField = s.fields.find((f) => f.type === 'Direction');
const sRot = rotField ? rotField.values.buffer || rotField.values : [];
return {
xAxis: {
type: "time",
},
yAxis: {
type: "value",
},
visualMap: {
orient: "horizontal",
left: "center",
min: 0,
max: 360, // adjust the max value to suit your data
text: ["High", "Low"],
dimension: 1,
inRange: {
color: ["#65B581", "#FFCE34", "#FD665F"],
},
},
series: [
{
data: sData.map((speed, i) => ({
x: sTime[i],
y: speed,
rot: sRot[i]
})),
type: "line",
symbol:
"path://M31 24.7343L21.7917 24.7343V0L9.20826 0L9.20826 24.7343H0L15.5 45L31 24.7343Z",
symbolSize: 20,
lineStyle: {
width: 0.3,
},
},
],
};
});
Here is my fetched data :
Query Inspector Results
{
"request": {
"url": "api/ds/query?ds_type=mysql&requestId=Q733",
"method": "POST",
"data": {
"queries": [
{
"refId": "A",
"datasource": {
"type": "mysql",
"uid": "fdhjxathsb8jke"
},
"rawSql": "SELECT\r\n FROM_UNIXTIME(timestamp) AS \"Time\",\r\n wind_deg AS \"Direction\",\r\n wind_speed AS \"Speed\"\r\nFROM weather\r\nORDER BY timestamp",
"format": "table",
"datasourceId": 1,
"intervalMs": 60000,
"maxDataPoints": 100
}
],
"from": "1712597082218",
"to": "1712597982218"
},
"hideFromInspector": false
},
"response": {
"results": {
"A": {
"status": 200,
"frames": [
{
"schema": {
"refId": "A",
"meta": {
"typeVersion": [
0,
0
],
"executedQueryString": "SELECT\r\n FROM_UNIXTIME(timestamp) AS \"Time\",\r\n wind_deg AS \"Direction\",\r\n wind_speed AS \"Speed\"\r\nFROM weather\r\nORDER BY timestamp"
},
"fields": [
{
"name": "Time",
"type": "time",
"typeInfo": {
"frame": "time.Time",
"nullable": true
}
},
{
"name": "Direction",
"type": "number",
"typeInfo": {
"frame": "int64",
"nullable": true
}
},
{
"name": "Speed",
"type": "number",
"typeInfo": {
"frame": "float64",
"nullable": true
}
}
]
},
"data": {
"values": [
[
1712328991000,
1712329292000,
1712329592000,
1712329893000,
1712330194000,
1712330495000,
1712330795000,
1712331096000,
1712331397000,
1712331698000,
1712331998000,
1712332299000,
1712332600000,
1712332901000,
1712333201000,
1712333502000,
1712333803000,
1712334103000,
1712334404000,
1712334705000,
1712335005000,
1712335306000,
1712335607000,
1712335908000,
1712336208000,
1712336509000,
1712336810000,
1712337110000,
1712337411000,
1712337712000,
1712338012000,
1712338313000,
1712338614000,
1712338915000,
1712339216000,
1712339516000,
1712339817000,
1712340118000,
1712340418000,
1712340719000,
1712341020000,
1712341320000,
1712341621000,
1712341922000,
1712342222000,
1712342524000,
1712342825000,
1712343126000,
1712343426000,
1712343727000,
1712344028000,
1712344328000,
1712344629000,
1712344930000,
1712345230000,
1712345531000,
1712345832000,
1712346133000,
1712346433000,
1712346734000,
1712347035000,
1712347336000,
1712347636000,
1712347937000,
1712348238000,
1712348539000,
1712348839000,
1712349140000,
1712349440000,
1712349741000,
1712350042000,
1712350343000,
1712350644000,
1712350944000,
1712351245000,
1712351546000,
1712351846000,
1712352147000,
1712352448000,
1712352748000,
1712353049000,
1712353350000,
1712353650000,
1712353951000,
1712354252000,
1712354552000,
1712354853000,
1712355154000,
1712355454000,
1712355755000,
1712356056000,
1712356356000,
1712356657000,
1712356958000,
1712357258000,
1712357559000,
1712357860000,
1712358160000,
1712358461000,
1712358762000,
1712359063000,
1712359363000,
1712359664000,
1712359964000,
1712360265000,
1712360566000,
1712360866000,
1712361167000,
1712361468000,
1712361769000,
1712362069000,
1712362370000,
1712362671000,
1712362971000,
1712363272000,
1712363572000,
1712363873000,
1712364174000,
1712364475000,
1712364775000,
1712365076000,
1712365377000,
1712365677000,
1712365978000,
1712366279000,
1712366580000,
1712366880000,
1712367181000,
1712367482000,
1712367783000,
1712368083000,
1712368384000,
1712368685000,
1712368985000,
1712369286000,
1712369587000,
1712369888000,
1712370188000,
1712370489000,
1712370790000,
1712371090000,
1712371391000,
1712371692000,
1712371993000,
1712372293000,
1712372594000,
1712372895000,
1712373195000,
1712373496000,
1712373797000,
1712374097000,
1712374398000,
1712374699000,
1712375000000,
1712375300000,
1712375601000,
1712375902000,
1712376202000,
1712376503000,
1712376804000,
1712377104000,
1712377405000,
1712377706000,
1712378006000,
1712378307000,
1712378608000,
1712378909000,
1712379210000,
1712379510000,
1712379811000,
1712380112000,
1712380412000,
1712380713000,
1712381014000,
1712381314000,
1712381615000,
1712381916000,
1712382217000,
1712382517000,
1712382818000,
1712383119000,
1712383420000,
1712383720000,
1712384021000,
1712384322000,
1712384622000,
1712384923000,
1712385224000,
1712385524000,
1712385826000,
1712386126000,
1712386427000,
1712386728000,
1712387028000,
1712387329000,
1712387630000,
1712387930000,
1712388231000,
1712388532000,
1712388832000,
1712389133000,
1712389434000,
1712389735000,
1712390036000,
1712390336000,
1712390637000,
1712390938000,
1712391238000,
1712391539000,
1712391840000,
1712392140000,
1712392441000,
1712392742000,
1712393043000,
1712393344000,
1712393645000,
1712393946000,
1712394246000,
1712394547000,
1712394848000,
1712395148000,
1712395449000,
1712395750000,
1712396051000,
1712396351000,
1712396652000,
1712396953000,
1712397254000,
1712397554000,
1712397855000,
1712398156000,
1712398456000,
1712398757000,
1712399058000,
1712399359000,
1712399659000,
1712399960000,
1712400261000,
1712400562000,
1712400862000,
1712401163000,
1712401464000,
1712401764000,
1712402065000,
1712402366000,
1712402667000,
1712402967000,
1712403268000,
1712403569000,
1712403871000,
1712404171000,
1712404472000,
1712404773000,
1712405074000,
1712405375000,
1712405675000,
1712405976000,
1712406276000,
1712406577000,
1712406878000,
1712407179000,
1712407480000,
1712407780000,
1712408081000,
1712408382000,
1712408683000,
1712408984000,
1712409284000,
1712409585000,
1712409885000,
1712410186000,
1712410487000,
1712410787000,
1712411088000,
1712411389000,
1712411690000,
1712411990000,
1712412291000,
1712412592000,
1712412892000,
1712413193000,
1712413494000,
1712413794000,
1712414095000,
1712414396000,
1712414696000,
1712414997000,
1712415298000,
1712415599000,
1712415899000,
1712416200000,
1712563696000,
1712563997000,
1712564297000,
1712564598000,
1712564899000,
1712565199000,
1712565500000,
1712565801000,
1712566101000,
1712566402000,
1712566703000,
1712567003000,
1712567304000,
1712567605000,
1712567906000,
1712568206000,
1712568507000,
1712568808000,
1712569108000,
1712569409000,
1712569710000,
1712570010000,
1712570311000,
1712570612000,
1712570913000,
1712571214000,
1712571514000,
1712571815000,
1712572115000,
1712572416000,
1712572717000,
1712573018000,
1712573318000,
1712573619000,
1712573920000,
1712574220000,
1712574521000,
1712574822000,
1712575123000,
1712575423000,
1712575724000,
1712576025000,
1712576325000,
1712576626000,
1712576927000,
1712577227000,
1712577528000,
1712577829000,
1712578130000,
1712578430000,
1712578731000,
1712579032000,
1712579332000,
1712579633000,
1712579934000,
1712580235000,
1712580535000,
1712580836000,
1712581137000,
1712581437000,
1712581738000,
1712582039000,
1712582340000,
1712582640000,
1712582941000,
1712583242000,
1712583543000,
1712583843000,
1712584144000,
1712584445000,
1712584746000,
1712585046000,
1712585347000,
1712585648000,
1712585949000,
1712586249000,
1712586550000,
1712586851000,
1712587151000
],
[
0,
0,
0,
0,
0,
150,
164,
164,
122,
210,
210,
150,
150,
210,
210,
180,
180,
180,
180,
180,
180,
180,
180,
180,
180,
180,
180,
191,
170,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
150,
150,
150,
150,
150,
150,
150,
150,
150,
150,
150,
200,
200,
200,
154,
154,
184,
184,
200,
200,
200,
200,
200,
200,
200,
150,
150,
150,
150,
150,
150,
150,
150,
150,
150,
160,
160,
160,
184,
186,
186,
200,
110,
110,
110,
110,
110,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
140,
140,
140,
140,
140,
140,
140,
140,
163,
163,
51,
225,
225,
137,
137,
119,
119,
186,
90,
152,
173,
173,
159,
159,
117,
117,
195,
195,
161,
107,
65,
65,
196,
196,
117,
117,
83,
81,
143,
143,
123,
169,
115,
165,
144,
27,
27,
175,
164,
164,
136,
136,
135,
137,
122,
122,
103,
86,
147,
147,
117,
117,
110,
182,
12,
85,
160,
99,
160,
104,
104,
160,
59,
136,
99,
194,
3,
63,
46,
150,
150,
150,
150,
150,
150,
150,
150,
150,
150,
150,
150,
150,
120,
120,
110,
110,
110,
110,
110,
110,
110,
110,
110,
110,
130,
130,
70,
70,
70,
70,
70,
70,
70,
159,
21,
21,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
160,
165,
165,
165,
150,
150,
150,
150,
150,
150,
198,
150,
190,
190,
190,
200,
200,
140,
140,
140,
140,
140,
140,
140,
170,
170,
170,
170,
170,
170,
170,
170,
170,
170,
170,
190,
190,
190,
191,
191,
190,
183,
190,
190,
190,
190,
180,
180,
180,
180,
180,
180,
180,
200,
180,
180,
180,
180,
180,
180,
170,
90,
106,
106,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
50,
50,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
60,
40,
40,
40,
40,
40,
40,
40,
40,
40,
40,
40,
40,
30,
30,
30,
50,
50,
50,
50,
50,
50,
50,
50,
50,
50,
50,
10,
10,
10,
10,
10,
10,
10,
10,
10,
10,
350,
350,
350,
360,
342,
342,
360
],
[
2.06,
2.06,
2.06,
1.03,
1.03,
2.24,
3.13,
3.13,
6.71,
2.06,
2.06,
4.47,
4.47,
2.06,
2.06,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
6.71,
6.71,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
6.69,
4.63,
4.63,
4.63,
4.92,
4.92,
4.92,
4.92,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
3.6,
3.6,
3.6,
4.47,
4.02,
4.02,
4.92,
3.6,
3.6,
3.6,
3.6,
3.6,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
0.89,
0.89,
1.79,
1.79,
1.79,
0.89,
0.89,
1.79,
1.79,
2.24,
3.13,
0.89,
1.34,
1.34,
1.34,
1.34,
0.45,
0.45,
1.79,
1.79,
1.79,
0.45,
0.45,
0.45,
1.34,
1.34,
0.45,
0.45,
0.45,
1.34,
2.68,
2.68,
1.34,
2.68,
1.79,
2.24,
2.24,
0.89,
0.89,
2.24,
2.24,
2.24,
0.89,
0.89,
2.24,
2.24,
1.34,
1.34,
1.34,
0.89,
0.89,
0.89,
2.68,
2.68,
3.13,
3.13,
0.89,
2.24,
0.89,
0.89,
0.45,
1.79,
1.79,
0.45,
0.45,
0.45,
1.79,
1.34,
0.89,
0.89,
0.45,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
1.54,
1.54,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
4.47,
3.58,
3.58,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
4.63,
5.36,
5.36,
5.36,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.47,
4.12,
4.12,
4.12,
4.12,
5.36,
5.36,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
4.12,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.14,
5.36,
5.36,
5.14,
6.71,
5.14,
5.14,
5.14,
5.14,
5.66,
5.66,
5.66,
5.66,
5.66,
5.66,
5.66,
5.81,
5.66,
5.66,
5.66,
5.66,
5.66,
5.66,
5.66,
3.6,
2.68,
2.68,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.6,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
3.09,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
2.57,
3.58,
3.58,
2.57
]
]
}
}
],
"refId": "A"
}
}
}
}```
The Query is:
SELECT
FROM_UNIXTIME(timestamp) AS “Time”,
wind_deg AS “Direction”,
wind_speed AS “Speed”
FROM weather
ORDER BY timestamp
What do you see in browser console when you do
Console.log(context.panel.data)
console.log(context.panel.data)
2VM598:200 Uncaught ReferenceError: myChart is not defined
at eval (eval at (module.js?_cache=6.0.0:1:1), :200:3)
this is repeating in a loop
I meant add that console.log in your js code and see console in web browser
Not sure if that othetlr error about myChart is from that
Sorry, for the mistake, i`m a newbie.
VM38:28 Error: data is not defined
VM38:31 Wind data:
Array(0)
length
:
0
[[Prototype]]
:
Array(0)
add
:
ƒ (o)
at
:
ƒ at()
concat
:
ƒ concat()
constructor
:
ƒ Array()
copyWithin
:
ƒ copyWithin()
entries
:
ƒ entries()
every
:
ƒ every()
fill
:
ƒ fill()
filter
:
ƒ filter()
find
:
ƒ find()
findIndex
:
ƒ findIndex()
findLast
:
ƒ findLast()
findLastIndex
:
ƒ findLastIndex()
flat
:
ƒ flat()
flatMap
:
ƒ flatMap()
forEach
:
ƒ forEach()
get
:
ƒ (o)
includes
:
ƒ includes()
indexOf
:
ƒ indexOf()
join
:
ƒ join()
keys
:
ƒ keys()
lastIndexOf
:
ƒ lastIndexOf()
length
:
0
map
:
ƒ map()
pop
:
ƒ pop()
push
:
ƒ push()
reduce
:
ƒ reduce()
reduceRight
:
ƒ reduceRight()
reverse
:
ƒ reverse()
set
:
ƒ (o,s)
shift
:
ƒ shift()
slice
:
ƒ slice()
some
:
ƒ some()
sort
:
ƒ sort()
splice
:
ƒ splice()
toArray
:
ƒ ()
toLocaleString
:
ƒ toLocaleString()
toReversed
:
ƒ toReversed()
toSorted
:
ƒ toSorted()
toSpliced
:
ƒ toSpliced()
toString
:
ƒ toString()
unshift
:
ƒ unshift()
values
:
ƒ values()
with
:
ƒ with()
Symbol(Symbol.iterator)
:
ƒ values()
Symbol(Symbol.unscopables)
:
{at: true, copyWithin: true, entries: true, fill: true, find: true, …}
[[Prototype]]
:
Object
We implemented breaking changes in Business Charts 6.0.0.
Posting in case others are looking for how to get eCharts working with influxdb
For me this was the most important post for getting this working.
The key point was the FORMAT AS Set to “Table” when using influxdb with multiple series.
3 Likes