Plotly not working with grafana 9

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

  • What are you trying to achieve?

  • How are you trying to achieve it?
    Use plotly plugin in panel

  • What happened?
    It doesn’t work for this version of grafana

  • What did you expect to happen?
    Be able to use it in Grafana cloud version 9.1.0

I can see that this plugin only supports grafana up to 6. Is it going to be upgraded to support newer versions?

@marielapagesext AFAIK, the author of the Plotly plugin has no plans to update it.

As an alternative, you can take a look at the Apache ECharts plugin: Apache ECharts plugin for Grafana | Grafana Labs

3 Likes

Thanks a lot!! I tried it but it’s not exactly what I am looking for. Do you know any other plug in that may be useful for creating a scatter plot? (some visualization where I could also see the information when hovering over de circles and where circles may change color if they are bigger than o lower than some number)

Hello @marielapagesext, I understand that Apache ECharts requires coding, and it has a learning curve. There are a lot of examples to get you started on the official website, and we have a series of explanation videos.

There is a community Scatter plugin for Grafana | Grafana Labs and a new XY panel from Grafana, but I have not used them.

Thank you very much!! I have been watching some tutorials and examples and now I see I can do many of the things I needed!! (with the Apache ECharts plugin)

Yes, I tried that one, but this Apache ECharts plugin has much more options. Thanks for the answer!

1 Like

@marielapagesext Thank you! The positive community feedback inspires us to do more.

Sorry to bother you again. Is there any way to call an app and get its JSON in the function and use that as data? I need to make my panel dynamic

1 Like

@marielapagesext I would recommend to use data source to get the data from an app and then use it in the plugin. We explain how to do it in the YouTube videos in README and there is a example when you create a panel.

Other option is to use jQuery $.Get like in the Apache ECharts example: Examples - Apache ECharts

Another option is to use Fetch API:

/**
 * Set URL
 */
const url = `http://localhost:3001/test`;

/**
 * Fetch
 */
fetch(url, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'PRIVATE-TOKEN': '$token',
  }
})
  .catch((error) => {
    console.error(error);
  })
  .then(async (resp) => {
    const body = await resp.json();
    console.log(body);

    >>>>>> Update Options <<<<<<<
  });

Thanks! I tried what the youtube video suggests, but it doesn’t work. I nedd to populate an array that would finally look like this:
data = [
[
[1, 5699452, ‘someName’],
[0.9982330060021154, 1065180, ‘Some other name’],
[0.9978297232101736, 966225, ‘other name’],
[1, 1018, ‘GatewayAmex’]
]
]

The way she does the population can only be used with some graphs. I don’t know if perhaps you have an idea of how to get an array as I showed with code that the plugin function accepts, taking the information from my datasource. I tried using some code, but the function doesn’t take any javascript command.

By the way, I understand that the other methods you mention don’t work with the plugin function, I suppose those would work when developing the whole code in javascript and not in the plugin function.

Sorry that I keep asking. Thank you very much!!

1 Like

@marielapagesext I need to see how information from the data source looks like to convert it to the required format.

Both method works, take a look at this issue: Does this plugin support dynamic options? · Issue #30 · VolkovLabs/volkovlabs-echarts-panel · GitHub

Hi, thanks.
This is may datasource information:


I’m using infinity to call for a JSON to an app

I don’t know if that’s what you needed.

I’m trying to get something like this, but getting the data from the datasource:
data = [
[
[0.998651840132317, 560002, ‘IVR_VISUAL_OFFER’],
[0.9530976607297791, 237899, ‘bluemarble-wso2-prd’],
[1, 208061, ‘K2View_PROD’],
[1, 11040, ‘BTPOSTVENTA’],
[1, 147909, ‘MicrositioServices’],
[1, 60970, ‘BatchApplyBenefitsREST’],
[1, 676, ‘ResellerKTPostventa’],
[1, 2441, ‘BatchASDConASC’],
[1, 24840, ‘IMSPCORE’],
[1, 39517, ‘BatchCancelation’],
[1, 1445091, ‘KairosWebServices’],
[1, 199825, ‘ASDWeb’],
[0.999972316149917, 358136, ‘PaymentBox’],
[1, 147227, ‘AxonIQ’],
[1, 1333038, ‘BTTopUpManager’],
[1, 254549, ‘OrderASD’],
[1, 17574, ‘BatchWMS’],
[0.999306075854752, 125462, ‘GatewayBanorte’],
[1, 13893508, ‘PROD-ESB-TUH’],
[1, 126282, ‘PaymentsRO’],
[1, 102884, ‘CandadoPortabilidad’],
[1, 713, ‘IVR_UNEFON_VISUAL_MTX_OFFER’],
[0.9998675202285627, 27476742, ‘BenefitManager’],
[1, 4065, ‘PaymentROB’],
[1, 41643, ‘ASDServer’],
[0.998079090412116, 146793, ‘Autorizador’],
[0.9979151851851852, 277637, ‘CPAGOSCruzados’],
[1, 17639, ‘ATMServices’],
[0.9923061661253383, 1022925, ‘IVR_HYBRID_OFFER’],
[0.9982366157954737, 650379, ‘SISCOBWS’],
[1, 34930, ‘BatchASDCC’],
[1, 6771, ‘BTNotificaSMS’],
[1, 1983021, ‘MIATT_APP’],
[1, 4069138, ‘BTNotificacionesTUH’],
[1, 13812, ‘SRSWeb’],
[1, 204, ‘PBServices’],
[1, 348004, ‘MiATTServices’],
[1, 4964066, ‘EsbMx’],
[1, 29348, ‘BatchASDDF’]
]
];

return {
title: {
text: ‘Excellence rate for all apps in terms of BTs’,
left: ‘2%’,
top: ‘3%’
},
grid: {
left: ‘10%’,
top: ‘10%’,
bottom: ‘15%’
},
backgroundColor: ‘rgb(17, 18, 23)’,
xAxis: {
name: ‘Apps Excellence Rate for BTs’,
nameLocation: ‘middle’,
nameGap: 30,
nameTextStyle: {
fontWeight: ‘bold’
},
splitLine: {
lineStyle: {
type: ‘dashed’
}
}
},
yAxis: {
name: ‘App Total Calls’,
nameLocation: “middle”,
nameGap: 80,
nameTextStyle: {
fontWeight: ‘bold’
},
splitLine: {
lineStyle: {
type: ‘dashed’
}
},
scale: true
},
dataZoom: [
{
type: ‘slider’,
}
],
series: [
{
name: ‘BTs Excellence Rate’,
data: data[0],
type: ‘scatter’,
symbolSize: function (data) {
return 20;
},
largeThreshold: 0.90,
emphasis: {
focus: ‘series’,
label: {
show: true,
formatter: function (param) {
const info = App: ${param.data[2]}, \nExc Rate: ${param.data[0]}, \nCalls: ${param.data[1]}
return info;
},
position: ‘top’
}
},
itemStyle: {
shadowBlur: 10,
shadowColor: ‘rgba(120, 36, 50, 0.5)’,
shadowOffsetY: 5,
color: function (param) {
if (param.data[0] >= 0.995) {
return new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: '#69F0AE
},
{
offset: 1,
color: ‘#4CAF50
}
])
} else if (param.data[0] > 0.99) {
return new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: '#F4FF81
},
{
offset: 1,
color: ‘rgb(204, 46, 72)’
}
])
} else if (param.data[0] <= 0.99) {
return new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
{
offset: 0,
color: ‘rgb(250, 42, 50)’
},
{
offset: 1,
color: ‘rgb(204, 46, 72)’
}
])
}
}
}
}
]
};

@marielapagesext I have opened an issue Parse and Display data from datasource · Issue #43 · VolkovLabs/volkovlabs-echarts-panel · GitHub in the repository to track it. I will reply shortly.

1 Like

Thanks! I’ll wait for the answer :slight_smile:

1 Like

@marielapagesext I am sorry for the delay.

This is the missing code to parse series into sData. I have used Static Data Source for my tests, but it can be any data source. Adjust column names accordingly.

const sData = data.series.map((s) => {
  const sRate = s.fields.find((f) => f.name === 'BTs_Excellence_Rate').values.buffer;
  const sCalls = s.fields.find((f) => f.name === 'Total_App_Calls').values.buffer;
  const sName = s.fields.find((f) => f.name === 'App_Name').values.buffer;

  return sRate.map((d, i) => [d, sCalls[i], sName[i]]);
});

return {
  title: {
    text: 'Excellence rate for all apps in terms of BTs',
    left: '2%',
    top: '3%',
  },
  grid: {
    left: '10%',
    top: '10%',
    bottom: '15%',
  },
  backgroundColor: 'rgb(17, 18, 23)',
  xAxis: {
    name: 'Apps Excellence Rate for BTs',
    nameLocation: 'middle',
    nameGap: 30,
    nameTextStyle: {
      fontWeight: 'bold',
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
  },
  yAxis: {
    name: 'App Total Calls',
    nameLocation: 'middle',
    nameGap: 80,
    nameTextStyle: {
      fontWeight: 'bold',
    },
    splitLine: {
      lineStyle: {
        type: 'dashed',
      },
    },
    scale: true,
  },
  dataZoom: [
    {
      type: 'slider',
    },
  ],
  series: [
    {
      name: 'BTs Excellence Rate',
      data: sData[0],
      type: 'scatter',
      symbolSize: function (data) {
        return 20;
      },
      largeThreshold: 0.9,
      emphasis: {
        focus: 'series',
        label: {
          show: true,
          formatter: function (param) {
            const info = `App: ${param.data[2]}, \nExc Rate: ${param.data[0]}, \nCalls: ${param.data[1]}`;
            return info;
          },
          position: 'top',
        },
      },
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 5,
        color: function (param) {
          if (param.data[0] >= 0.995) {
            return new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              {
                offset: 0,
                color: '#69F0AE ',
              },
              {
                offset: 1,
                color: '#4CAF50',
              },
            ]);
          } else if (param.data[0] > 0.99) {
            return new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              {
                offset: 0,
                color: '#F4FF81 ',
              },
              {
                offset: 1,
                color: 'rgb(204, 46, 72)',
              },
            ]);
          } else if (param.data[0] <= 0.99) {
            return new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
              {
                offset: 0,
                color: 'rgb(250, 42, 50)',
              },
              {
                offset: 1,
                color: 'rgb(204, 46, 72)',
              },
            ]);
          }
        },
      },
    },
  ],
};

Please let me know if there is anything else.

1 Like

Thanks a lot for your time!! I’m really grateful!

I see that it works for you! But I get some errors when using that code (same errors I got trying other ways before):


It happens the same with buffer

This is my query:


With this query I get a JSON that is an array of arrays with the data. That data was what you could see then in the table I showed you

@marielapagesext I see columns in the Infinity data source are named differently. You don’t use _ in the names, this is why values are not found.

Serie names should match. Otherwise, it can’t find proper fields.

1 Like

I’m really sorry!!! You are right! I was trying so many things that I forgot that. I changed it and it worked! Thanks a lot for your time and help!!

1 Like