SVG - Change Color via fill attribut (ACE.SVG or Canvas)

Grafana Plugin Development
, ,
1

Hello
I try to animate an svg with ACE.SVG on grafana, for now just change the color attribut dynamically according to her state, but I can’t get the svg animation to work, if anyone has experiences on this. :slight_smile:

The ‘svg plugin’ is outdated so now it looks to be the plugin ACE.SVG : ACE.SVG plugin for Grafana | Grafana Labs

I did a basic svg to make some try, a rectangle with 3 sides, and I try to change the color of one side

svg animation
svg animation1608×790 88.8 KB

I made some link between variables, I have 3 side, their ids in the svg file are MachineX_Y, linked to a variable for the plugin MachineXY

svg animation 2
svg animation 21305×677 84 KB

requete machine
requete machine1282×292 29.3 KB

With my sql query I have the state of my machine set at 5 to try to get the color red but I don’t know how to get further diagnostics, my rectangle stay grey.

thanks for your help

2

if you search thia forum for that plugin there are many answers that might help

3

Hello
I did take a look on topic about ACE.SVG plugin, no image. On the topic you share there are not many answers, just one post.

There is no explanation about the ‘js render code’ part in ACE.SVG and how it works really with query in sql.

That’s why I ask for help with simple sample of code and with some images, it is easier to understand for everyone looking for answer

So I develop my svg in new architecture because “Style =” is not good for ACE.SVG apparently

image
image1597×635 68.2 KB

the correct syntax is : svgmap.MappedName.attr({ fill: ‘#9ff’ });

but it doesn’t recognize the variable of my SQL Query in User JS Render how can I do ?

variable query
variable query1409×752 127 KB

4

Simple example for default SVG provided by plugin and letterA mapped to path4548:

let stroke = data.series[0].fields[0].values[data.series[0].fields[0].values.length-1];
let fill = data.series[0].fields[1].values[data.series[0].fields[1].values.length-1];
let strokecolor = stroke < 100 ? 'red' : 'blue';
let fillcolor = fill < 50 ? 'green' : 'yellow';
svgmap.letterA.attr('style',`stroke:${strokecolor};fill:${fillcolor};stroke-width: 5px`)

Note colors of letter A changing based on values:

Test 1
Test 11907×1021 146 KB

Test 2
Test 21907×1025 144 KB

Test 3
Test 31907×1017 134 KB

2 Likes
5

Ok now I am trying to apply this with a query, and in the futur I will have multiple queries…

Edit Test with :

//Acces to 1st series of data
let firstSeries = data.series[0];

//Access to 1st field
let firstField = firstSeries.fields[0];

//Access to 1st value
let singleValue = firstField.values[0];

singleValue give me the value on my 1st query

Thanks it is working! not without difficulty :smiley: