ae3e / ae3e-plotly-panel Goto Github PK

Hi,

first of all thanks for this project. Very useful.
Working with SubPlots, I'm struggling in having 3 subplots with an aligned xaxis. I've found that the property to set should be:
shared_xaxes = true
but now sure how to set in the json.
Any idea?
Many thanks,

Sebastian

Is it possible that the script executed when the chart is clicked to update the object returned by the initial script like changing colors.

Every time I edit a panel I need to delete"xaxis": { "type": "date" } in the layout section, as it seems to be reinserted if it is not present

[EDIT: Can be solved by leaving it blank "type": ""]

Hi, thank you for this contribution.

I tried to use this panel but it does not work normal. I use Grafana 6.5.3 and ae3e-plotly-panel 0.3.2.

Error are as follows:

Hope for you help!

Hi,

Thanks for providing the Grafana plugin with plot.ly package.

I'm using Grafana 7.1.5 to create some box plots from multiple mySQL queries. Without defining hoveron for each trace, only the last trace I created would have hover label on. I am able to turn the last trace's hover label off by setting 'hoverinfo': 'none', yet it didn't help me to enable the hover label for other box plots. I am not sure if you'd have any solution for this issue; I just want to bring this up as other users may encounter the same problem.

Below is what I have for script in json format:

console.log(data);
var trace1 = {
y: data.series[5].fields[1].values.buffer,
"type": "box",
"name": "trace1",
"yaxis": "y1",
"width": 0.1,
"marker":{"color": "hsl(0, 50%, 50%)", "size": 2.5},
"line": {"width": 1},
// "boxpoints": "all",
// "pointpos": 0
};

var trace2 = {
y: data.series[3].fields[1].values.buffer,
"type": "box",
"name": "trace2",
"yaxis": "y2",
"width": 0.1,
"marker":{"color": "hsl(45, 50%, 50%)", "size": 2.5},
"line": {"width": 1},
// "boxpoints": "all",
// "pointpos": 0
};

var trace3 = {
y: data.series[4].fields[1].values.buffer,
"type": "box",
"name": "trace3",
"yaxis": "y3",
"width": 0.1,
"marker":{"color": "hsl(90, 50%, 50%)", "size": 2.5},
"line": {"width": 1},
// "boxpoints": "all",
// "pointpos": 0
};

var trace4 = {
y: data.series[7].fields[1].values.buffer,
"type": "box",
"name": "trace4",
"yaxis": "y3",
"width": 0.1,
"marker":{"color": "hsl(135, 50%, 50%)", "size": 2.5},
"line": {"width": 1},
// "boxpoints": "all",
// "pointpos": 0
};

var trace5 = {
y: data.series[0].fields[1].values.buffer,
"type": "box",
"name": "trace5",
"yaxis": "y3",
"width": 0.1,
"marker":{"color": "hsl(180, 50%, 50%)", "size": 2.5},
"line": {"width": 1},
// "boxpoints": "all",
// "pointpos": 0
};

var trace6 = {
y: data.series[1].fields[1].values.buffer,
"type": "box",
"name": "trace6",
"yaxis": "y3",
"width": 0.1,
"marker":{"color": "hsl(225, 50%, 50%)", "size": 2.5},
"line": {"width": 1},
// "boxpoints": "all",
// "pointpos": 0
};

var trace7 = {
y: data.series[2].fields[1].values.buffer,
"type": "box",
"name": "trace7",
"yaxis": "y3",
"width": 0.1,
"marker":{"color": "hsl(270, 50%, 50%)", "size": 2.5},
"line": {"width": 1},
// "boxpoints": "all",
// "pointpos": 0
};

var trace8 = {
y: data.series[6].fields[1].values.buffer,
"type": "box",
"name": "trace8",
"yaxis": "y4",
"width": 0.1,
"marker":{"color": "hsl(315, 50%, 50%)", "size": 2.5},
"line": {"width": 1},
"hoverinfo": "none",
// "boxpoints": "all",
// "pointpos": 0
};

serie = [trace1,
trace2,
trace3,
trace4,
trace5,
trace6,
trace7,
trace8
]
return {data:serie,layout:{title:'Box Plot Chart'}};

Is there a way to return the users current map position(lat, lon) and zoom level within the Java script in the plotly plugin. I would be nice to keep the current map as set from the user even if the data is refreshed or a other time period is selected.

I found this code part https://community.plotly.com/t/get-data-for-current-zoomed-in-view/7092 ​but can't
get it to work. Any ideas would be appreciated

var gd = document.getElementById('graph')
var xRange = gd.layout.xaxis.range
var yRange = gd.layout.yaxis.rang

Hi, can the latest version (0.3.2) be pushed to Grafana itself (That version is currently still al 0.2.1.)?

https://grafana.com/grafana/plugins/ae3e-plotly-panel

This would make deploying/installing this plugin easier.

When I add more plotly panel, the grafana web page is stuck.
Is there any way to optimize it??

@ae3e If you want to make the code editor expand to the available space, you can use the AutoSizer. Here's an example: https://github.com/marcusolsson/grafana-json-datasource/blob/8d9eb3b5e23cc4ebb4cad68545f7a34ead07f2c8/src/components/QueryEditor.tsx#L202-L219

Originally posted by @marcusolsson in grafana/grafana-plugin-repository#759 (comment)

Hi team,

Do you have any wind rose example? to be newer, it's too hard for me to start to build a wind rose graph.

I'm now using the plotly panel for a while with a docker-compose grafana service. Today I tried to update grafana and this is what happens when I startup the container:

grafana    | installing ae3e-plotly-panel @ 0.5.0
grafana    | from: https://grafana.com/api/plugins/ae3e-plotly-panel/versions/0.5.0/download
grafana    | into: /var/lib/grafana/plugins
grafana    |
grafana    | Error: ✗ failed to download plugin archive: Failed to send request: Get "https://storage.googleapis.com/plugins-community/ae3e-plotly-panel/release/0.5.0/ae3e-plotly-panel-0.5.0.zip": x509: certificate signed by unknown authority
grafana exited with code 1

Hi team, do we have any tutorials about how to use ae3e?
I use newest Grafana and installed ae3e plugin, but I can find any button or field to configure.
I saw the example it's really beautiful and really want to use it.
could you tell me how to set up? or maybe couldn't use it in newest Grafana?

Grafana version 7.2.2 and also 7.1.5
plotly-panel version 0.3.1
agenty-flowcharting-panel version: 0.9.0

This plugins seems to be conflicting with agenty-flowcharting-panel. When one is loaded prior to the other, the other will fail.

Sequence:

1. Press CTRL+F5 for clean browser
2. Go to dashboard with flowcharting panel: flowcharting OK
3. Go to dashboard with plotly panel: plotly-panel fails to load

plugin_loader.ts:265 Error loading panel plugin: ae3e-plotly-panel TypeError: Cannot read property 'Config' of undefined
    at e.exports (/public/plugins/ae3e-plotly-panel/module.js:2)
    at Object.t.exports.695.../build/plotcss (/public/plugins/ae3e-plotly-panel/module.js:2)
    at a (/public/plugins/ae3e-plotly-panel/module.js:2)
    at eval (/public/plugins/ae3e-plotly-panel/module.js:2)
    at Object.t.exports.14.../src/core (/public/plugins/ae3e-plotly-panel/module.js:2)
    at a (/public/plugins/ae3e-plotly-panel/module.js:2)
    at eval (/public/plugins/ae3e-plotly-panel/module.js:2)
    at Object.t.exports.26../aggregate (/public/plugins/ae3e-plotly-panel/module.js:2)
    at a (/public/plugins/ae3e-plotly-panel/module.js:2)
    at t (/public/plugins/ae3e-plotly-panel/module.js:2)

1. Press CTRL+F5 for clean browser
2. Go to dashboard with plotly panel: plotly-panel OK
3. Go to dashboard with flowcharting panel: flowcharting fails to load

Hello,
Sorry i f my question seems trivial to you.

I am trying to display several series simultaneously on a scatter graph with the same template.
I manage to display the series but the template specified in data (type: scatter; mode: markers) only applies to the first one. The other series are displayed in line mode which seems to be the default mode.

The 'Data' bloc containing the following code :
[
{
"type": "scatter",
"mode": "markers",
"line": {
"color": "red",
"width": 2
}
}
]

The script bloc containing the following code :
console.log(data)

let x1 = data.series[0].fields[1].values.buffer
let y1 = data.series[1].fields[1].values.buffer
let serie1 = {
x : x1,
y : y1,
name : 'M1'
}

let x2 = data.series[2].fields[1].values.buffer
let y2 = data.series[3].fields[1].values.buffer
let serie2 = {
x : x2,
y : y2,
name : 'M2'
}

return {
data:[serie1,serie2],
layout:{title:'My Chart'}
};

M1 is displayed correctly, not M2.

I also try to display the different series in a different color; in order to distinguish them. I imagine this should be done in the script block; but the 'data' output does not seem to allow the passing of certain parameters found in the dedicated 'data' block.

Any help would be appreciate.

Thanks !

I tried to include "frames" property to the object returned by the script (as described in Plotly's documentation https://plotly.com/javascript/plotlyjs-function-reference/ )
return {data:data, layout:layout, frames: frames};

and I got this error message
plotly.js:107614 WARN: API call to Plotly.animate rejected. undefined

Do you have plans to include this in the feature?

Are annotations supported in Plotly panel - https://grafana.com/docs/grafana/latest/dashboards/annotations/?
Cannot add annotation from Grafana GUI for Plotly panel, but maybe there are any other ways?

The plot/map does not scale after the panel size. Depending on the monitor size this gives large missing areas like below picture or parts of the plot is outside the screen.

I'm using same dashboard on grafana 7.x and 8.0,

• works fine in grafana 7.x
• error in grafana 8.0

console log showed in picture,

Adding an ad-hoc filter to a dashboard results in a t.current is undefined error.

Grafana version: 8.3.3
Plugin version: 0.5.0

When using the plugin with data queries that results in no data, the plugin creates the warning
"Cannot read property 'data' of undefined"

First it would be nice if the plugin returned blank page with "no data" like other plugins.

If a query results in the "Cannot read property 'data' of undefined" and I make a new query that returns data, the plugin continues to show "Cannot read property 'data' of undefined". Only way to make the plugin work again is by refreshing the explore/chrome/edge.

Howdy 👋

Do you plan to add support for Grafana 8?

Hello

I'm interested in doing some maintenance work on this repo, @ae3e can we have a chat about this?

Thanks

Hey is there a way in which you could share some data grouping examples?
Some plots need raw data and create traces on the fly.I would like have some guidance on how to achieve it through the panel, so far I have not been able to achieve the results I would like to get.
Thanks! and Great work

Hello,

thank for this great plugin. I have an issue with the chart type bar. Event if barmode group is specified, the chart shows stacked bars. This is the script, which is used:

console.log(data)

var trace0 = {
  x: [1,2,1,2],
  y: [1,2,3,4],
  color: [3,3,1,1],
  type: 'bar'
};

var data = [trace0]

var layout = {
  barmode: 'group',
  xaxis: {
    type: 'category',
    autorange: true,
    tickangle:90,
  },
  yaxis: {
    autorange: true,
    tickangle:0,
  },
  font: {
    color: "darkgrey"
  },
  paper_bgcolor: "rgba(0,0,0,0)",
  plot_bgcolor: "rgba(0,0,0,0)",
  margin: {
    t: 30,
    b: 50
  }
};

var config = {
  displayModeBar: true
}

return {data:data,layout:layout,configuration:config};

Grafana Version: v8.3.0
ae3e Plotly version: 0.5.0
Elasticsearch: 7.0+

Getting Cannot read properties of undefined (reading 'text') when using variables with adhoc filters

Variable:

Hello Team. Thanks for great plugin. Could you please expand list of event handlers? It would be usefull to listen events like onLegendClick, onDoubleClick and etc.

Thank you.

can plotly return total option that include all data and layout that did not change the x axis data.
like https://github.com/Billiballa/bilibala-echarts-panel?
because

Hey there,

Just a note to say how awesome this plugin is. Just a life saver in terms of advancing the utility for grafana. I find the Timeseries options really limiting, and this just totally overcomes them. Well done.

Hi I just downloaded the panel and it shows the editor but is empty. I can copy form the help but it was really simple to just modify what you already had on it.
And it seems the config panel was left out.
Thanks!! I can test it now and come back if I find any issues.

Originally posted by @mbarradas in #4 (comment)

Is there a way to override the text shadow in Sankey/parcoords/other charts ?

On dark theme it looks awful.

Hello, thank you for this contribution.

I tried to use this panel but it was not possible for me with the provided documentation. I use Grafana 7.2 in Docker and installed your plugin with this env variable: GF_INSTALL_PLUGINS=ae3e-plotly-panel.

When I choose the plugin and edit the panel there is no data, layout or config field and the panel returns this error:
m.getBuiltInIntervalValue is not a function :(

I wanted to try the plotly panel but unfortunately I do not get any editing options in the panel. The only things showing are the standard Grafana panel options (Settings, Visualization, Links, Repeat options).

It seems like the dev hasn't had time to update or respond to comments so I'm just adding a note here in case other's are looking for a more up to date fork that will be accepting PR's, feedback and suggestions!

https://github.com/nline/nline-plotlyjs-panel
Edit: We're live

This fork builds off the great work that @ae3e has done, and further extends it with:

• Updated Plotly.js package
• Updated dependencies
• YAML support
• Annotation support added
• Expandable code editors
• Depreciated packages/code removed
• Linting, style standardization, code correction
• Better documentation

Hope it can be useful to the community!

@ae3e if you do end up seeing this notice just reach out via my bio link!

I am very new to Plotly and am not even sure if this is possible. I would like to be able to hover over a time series graph panel in grafana and on the same dashboard manipulate what is shown on the Plotly graph.
Use Case:
We are recording throttle and steering input in an influx2.0 data base. these are recorded as throttle position -100%-100% and steering position -100%-100%. We can view this on a time series graph which is fine - I would like to be able to hover over a certain time and it would then display the values on an x,y graph to represent the positions. The reason for this it will look more native to what the operator would see on there display while controlling the vessel. Like below:

Is this even possible? How would I access the graph-hover function?

import { SystemJS } from '@grafana/runtime' SystemJS.load('app/core/app_events').then((appEvents:any) => { appEvents.on('graph-hover', (e:any) => console.log(e)) })

Hey,

Having an issue getting the on-click expansion for sunburst charts working (example). Cursor changes to show that the marker is interactable, but when I click nothing happens. This appears to be a default function of the sunburst charts, so I'm assuming I don't need to edit the Click Script at all.

Running Grafana 8.3.x, Plugin version 0.5.0.

Hi i tested this plugin before you published it on the Grafana site and I was able to use the configuration panels but now that I installed it through the grafana-cli plugins install ae3e-plotly-panel I don´t get any configuration options for the panel.
Tested it on 2 installations of grafana 7.2.
Cheers for the great work.

Hi

Is it possible to publish the windrose example from the graph?

I am not an expert and trying to figure it out without success.
Already figured out a way to decode the timestamps (not needed in this example), but I included it for demo.
An I already succeeded in creating a simple line graph with influxdb data, but no windrose.
Also, with some trouble - I am no expert, found out to create a windrose with random data.
using latest Grafana version and latest Plugin version (as proposed in another issue)

I am using this Influxdb2.0 query, but the data does only returns 2 series (time and winddirection), not the third series (windspeed)

from(bucket: "bucket01")
|> range(start: v.timeRangeStart, stop: v.timeRangeStop)
|> filter(fn: (r) => r["_measurement"] == "pws")
|> filter(fn: (r) => r["_field"] == "winddirection" or r["_field"] == "windspeed")

And this script

console.log(data)
//***** original data
var d_time = data.series[0].fields[0].values._chunks[0].data.values;
console.log(d_time);
var d_dir = data.series[0].fields[1].values._chunks[0].data.values;
console.log(d_dir);
var nd_dir = d_dir.length;
console.log(nd_dir);
//var d_spd = data.series[0].fields[2].values._chunks[0].data.values;
var d_dir = Array.from(Array(nd_dir)).map(x=>Math.random()359);
var d_spd = Array.from(Array(nd_dir)).map(x=>Math.random()105);
console.log(d_spd);
var nd_spd = d_spd.length;
console.log(nd_spd);
//*** def result arrays
// recalc timestamps
/*
var r_time = [];
var nd_time = t1.length/2;
for (var i=0; i<nd_time; i++) {
r_time.push((d_time[i2]+d_time[i2+1]6553665536)/1000000);
}
/
let cthetanames = '["N","NO","O","ZO","Z","ZW","W","NW"]';
var ncthetas = 8;
//let ccolors = ['"#49ff00"', '"#54ff10"', '"#8dff20"', '"#b9ff2d"', '"#feff41"', '"#fedb37"', '"#feb32b"', '"#fe9322"', '"#fe6116"', '"#ff2609"', '"#ff0000"'];
//var nccolors = ccolors.length;
let cnames = ['"100<"', '"90<"', '"80<"', '"70<"', '"60<"', '"50<"', '"40<"', '"30<"', '"20<"', '"10<"', '"0<"'];
var cspds = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 500];
var ncspds = cspds.length;
var cdirs = [22.5, 67.5, 112.5, 157.5, 202.5, 247.5, 292.5, 337.5, 361];
var ncdirs = cdirs.length;
// create bins from data
var bins = []; // array [speed][dir]
for (var i=0; i<ncspds; i++){
bins.push([]);
for (var j=0; j<ncdirs; j++){
bins[i].push(0);
}
}
//**** Loop through data and add correct bin
for (var i=0; i<nd_dir; i++){
var dir = d_dir[i];
var spd = d_spd[i];
loops:
for (var j=0; j<ncspds; j++){
if (spd<cspds[j]){
for (var k=0; k<ncdirs; k++){
if (dir<cdirs[k]){
bins[j][k]++;
break loops;
}
}
}
}
}
for (var i=0; i<cspds; i++){ // merge first and last dir (0-22.5° and 337.5-0°)
bins[i][0] = bins[i][0] + bins[i][ncdirs-1];
bins[i].pop();
}
console.log(bins);
var series = "[";
for (i=0; i<ncspds; i++) {
series = series + '{"r" : [' + bins[i] + '], "theta" : ' + cthetanames + ', "name" : ' + cnames[i] + ', "type": "barpolar"},';
// series = series + '{"r" : [' + bins[i] + '], "theta" : ' + cthetanames + ', "name" : ' + cnames[i] + ', "marker" : {"color" : ' + ccolors[i] + '}, "type": "barpolar"},';
}
series = series.slice(0, -1)
series = series + "]";
console.log(series);
var seriesjson = JSON.parse(series);
console.log(seriesjson);
return {data : seriesjson};

Thanks
Lieven Dossche

Hey,
I'm having a small question regarding the grafana version, which is needed for this plugin.

According to the plugin's dependencies, Grafana version >=7.5.5 is needed. However, when I installed the plugin in my local Grafana, it seemed to work flawlessly with version 7.2.

Could you please give me some insights about why version 7.5.5 is needed and what the limitations are for lower versions?

Hi,

what is the best way to import a JS Library to use in the Script part?
An example for me would be the following library to create scatter plot fitting:

https://github.com/HarryStevens/d3-regression

Thanks,

Sebastian

When I change the time range via the Grafana time picker dropdown UI, the graph does not update. Is this plugin compatable with the Grafana time picker UI?

It looks like whenever a data query refresh occurs, both the panel configuration and user settings on the graph are not persisted.

For example, when using a 5 second refresh normally, I need to turn refresh completely off to be able to edit any of the scripts in the config, otherwise they will revert to the previous state before the beginning of that particular edit.

Furthermore, if I have a legend on a plot, click off one of the traces, it will reappear in the default state when a query refresh is executed.

Can't seem to find any configuration option to stop this from happening. Is this a bug or intended functionality?

Is it possible to render plot inside custom div in a panel

return { data : [serie], config : { displayModeBar: false } }

Which div with (id or class) above return point to ?

Setting the localization option {"locale": "de"} within the 'Configuration' seems to have no effect for axis ticklabels.

I want the ticklabels to be displayed in German with typical german datetime-format (e.g. 'dd.MMMM') and without manually creating the translation for each month.

Is the localization-feature (described here) supported by the plotly-panel?
I'm using Grafana 9.0.6 with the latest plotly-panel (v0.5.0).
Thank you for any reply!

Hi,

I'm trying to write a heatmap using ae3e-plotly-panel which I installed under grafana-7.1.3 using grafana-cli.

My question is, how do I see errors running the "script" in order to debug? I see that in the default script there is a console.log statement. Where does the "console" log to?

In case it's an obvious newbie mistake that someone can help me with, the indication that I have that there is a problem is that when I hover over the red exclamation mark in grafana, I see "t is undefined".

Thanks,

Ron

I am using key/value pairs (or "text/value" in Grafana's case) for dropdown variables which I am referencing in your plugin. However you seem to be supplying the text rather than the values for those kind of variables. Any way to maybe have this supported?

EDIT: Maybe just forward Grafana's standard variable representation? I think that would be ideal.

-- apologies - deleled comment --

I am using this plugin for histograms and scatter plots. If I change timerange or refresh the dashboard and then close it I am prompted by the browser to save the changes. This is unexpected and it is not the normal behavior under grafana.

I investigated a bit and in my case this is due to the autorange of my x and y axis (see figure). I set it to true (unfortunately I cannot change it ) and upon refresh the range values gets changed. This, in turn, changes the json model of the dashboard so the browser asks for saving changes.

I tried to remove the range property and save, but it comes back. I also tried to force range between 0-100 keeping autorange true, but the range values are overwritten.
As on grafana this does not happen (axes values are updated after time range change or refresh but browser does not ask to save dashboard) I posted here. Is there anything else I can do?

Hi, thanks for the awesome plugin. Noted that the Plotly script supports the use of Grafana variables via "variables".

Can Click script support it as well? My guess is it is just a simple change in SimplePanel.tsx.

        onClick={data=>{
          //console.log(data)
          var f = new Function('data,variables', this.props.options.onclick);
          f(data);
        }}

Let me know if this works, and am happy to create a pull request for this.

I don't see any examples of it and am quite confused because in the plotly js, it is done using the Plotly.addTraces(graphDiv, {y: [2,1,2]}); but there is no plotly object in grafana. Any thoughts?