Pass values between dashboard and datasourse plugin

Hello, i’m newbie on Grafana world and i’m trying to develop DataSourse plugin using WebSocket.
That is not so easy and i really need the community helps!

I have a dashbard with variable(combox), i want to pass the value selected from dashboard to datasourse plugin everytime when the user change the selection.

My DataSourse Plugin is:

import {
} from '@grafana/data';
import { MyQuery, MyDataSourceOptions } from './types';
import { merge, Observable } from 'rxjs';
import { io, Socket } from "";

export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
  ws: Socket<any, any>;
  dashboardUID: string | undefined;
  constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
    super(instanceSettings); = initWebSocket(instanceSettings.jsonData.path || '');

  query(options: DataQueryRequest<MyQuery>): Observable<DataQueryResponse> {
    const observables = => {
      return new Observable<DataQueryResponse>((subscriber) => {
        const frame = new CircularDataFrame({
          append: 'tail',
          capacity: 2

        frame.refId = target.refId;
        frame.addField({ name: 'time', type: FieldType.time });
        frame.addField({ name: 'data', type: FieldType.other });"push", (event: any) => {

            data: [frame],
            key: target.refId,
            state: LoadingState.Streaming,

    return merge(...observables);

  async testDatasource() {
    return {
      status: 'success',
      message: 'Success',

function initWebSocket(url: string) {
  let wsConn: Socket<any, any>
  wsConn = io(url, {
    transports: ["websocket"]

  wsConn.on('error', (error: any) => {
    console.log(`WebSocket error: ${error}`);

  return wsConn

I saw similar MSSql plugin, we can use ${VAR_NAME} into a quary and the DS convert the var_name to value selected by user.

How can i do something like this?

@eaguari Grafana already has a WebSocket data source: WebSocket API plugin for Grafana | Grafana Labs

1 Like

Yeah, i try it but not worked for me, i have different approach and i would like to implement others features like ws rooms.

Hi @eaguari

in your datasource query method you can use getTemplateSrv().replace to replace the variables in the query. Take a look at the props you receive in your query method it should contain both the raw query and the scopeVariables.

1 Like

I’m not exactly use replace, but the getTemplateSvr.getVariables() and then filtering by hide.
Cool, great tool!

Thanks guys!