Mapping data for Three pie chart in one panel using echarts Plugin

Grafana Pie Chart Panel
1

  • What Grafana version and what operating system are you using?

  • grafana v11.2 with last version of business charts plugin

  • What are you trying to achieve?
    in one panel (in order to send by mail) having 3 pie charts with 3 different queries (“A”,“B”,“C”)

    image
    image786×239 21.8 KB

  • How are you trying to achieve it?
    i found instruction for mapping data for only one query of values and have one pie chart:

              const Query_A = context.panel.data.series.map((s) => {
          
            const metrics = s.fields.find((f) => f.name === 'Var_en_defaut1').values;
            const values = s.fields.find((f) => f.name === 'total1').values;
          
          
            return values.map((d, i) => {
              return { name: metrics[i], value: d };
            })
          })[0];

i have this => so gooood !!

image
image484×306 11 KB

i found to have 2 pie charts in one panel (data from same query “A”)

image
image483×311 13.9 KB

table view of data’s query “A”
image
image326×323 4.17 KB

but after insert Query “B” (copy of query “A” but change field’s name) in the panel

image
image401×259 3.1 KB

i inserted this in “code editor” :

                    const Query_A = context.panel.data.series.map((s) => {
                    
                      const metrics = s.fields.find((f) => f.name === 'Var_en_defaut1').values;
                      const values = s.fields.find((f) => f.name === 'total1').values;
                    
                    
                      return values.map((d, i) => {
                        return { name: metrics[i], value: d };
                      })
                    })[0];
                    
                    const Query_B = context.panel.data.series.map((s) => {
                    
                      const metrics = s.fields.find((f) => f.name === 'Var_en_defaut2').values;
                      const values = s.fields.find((f) => f.name === 'total2').values;
                    
                    
                      return values.map((d, i) => {
                        return { name: metrics[i], value: d };
                      })
                    })[0];
  • What happened?

error message !!

image
image820×329 47 KB

  • What did you expect to happen?

second pie chart with values of query “B”

can someone help me ,please ,to find good mapping instruction ?

thanks a lot

2

i found myself …

const Query_B = context.panel.data.series.map((s) => {

                  const metrics = s.fields.find((f) => f.name === 'Var_en_defaut2').values;
                  const values = s.fields.find((f) => f.name === 'total2').values;
                
                
                  return values.map((d, i) => {
                    return { name: metrics[i], value: d };
                  })
                })[0];

change [0] by [1]

[1] <=>index for second query (query B in my case

1 Like