# Pass values between dashboard and datasourse plugin

**URL:** <https://community.grafana.com/t/pass-values-between-dashboard-and-datasourse-plugin/102282>\
**Category:** Grafana Plugin Development\
**Tags:** datasource, dashboard-variables, plugins\
**Created:** [August 28, 2023, 5:28pm UTC](https://community.grafana.com/t/pass-values-between-dashboard-and-datasourse-plugin/102282 "2023-08-28T17:28:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![eaguari](https://avatars.discourse-cdn.com/v4/letter/e/779978/32.png) [@eaguari](https://community.grafana.com/u/eaguari)\
**Post date:** [August 28, 2023, 5:28pm UTC](https://community.grafana.com/t/pass-values-between-dashboard-and-datasourse-plugin/102282/1 "2023-08-28T17:28:36Z")

</div>

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.  
 ![image](https://us1.discourse-cdn.com/grafana/original/3X/2/6/2683e710312add32986935d7708269a4f61cb883.png)

My DataSourse Plugin is:

```auto
import {
  CircularDataFrame,
  DataQueryRequest,
  DataQueryResponse,
  DataSourceApi,
  DataSourceInstanceSettings,
  FieldType,
  LoadingState
} from '@grafana/data';
import { MyQuery, MyDataSourceOptions } from './types';
import { merge, Observable } from 'rxjs';
import { io, Socket } from "socket.io-client";

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

    this.ws = initWebSocket(instanceSettings.jsonData.path || '');
  }

  query(options: DataQueryRequest<MyQuery>): Observable<DataQueryResponse> {
    const observables = options.targets.map((target) => {
      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 });

        this.ws.on("push", (event: any) => {
          frame.add(JSON.parse(event));

          subscriber.next({
            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?

---

<div class="post-metadata">

**Author:** ![mikhailvolkov](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/mikhailvolkov/32/41625_2.png) [@mikhailvolkov](https://community.grafana.com/u/mikhailvolkov)\
**Post date:** [August 28, 2023, 5:35pm UTC](https://community.grafana.com/t/pass-values-between-dashboard-and-datasourse-plugin/102282/2 "2023-08-28T17:35:07Z")

</div>

@eaguari Grafana already has a WebSocket data source: [WebSocket API plugin for Grafana | Grafana Labs](https://grafana.com/grafana/plugins/golioth-websocket-datasource/)

---

<div class="post-metadata">

**Author:** ![eaguari](https://avatars.discourse-cdn.com/v4/letter/e/779978/32.png) [@eaguari](https://community.grafana.com/u/eaguari)\
**Post date:** [August 28, 2023, 5:43pm UTC](https://community.grafana.com/t/pass-values-between-dashboard-and-datasourse-plugin/102282/3 "2023-08-28T17:43:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![academo](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@academo](https://community.grafana.com/u/academo)\
**Post date:** [August 29, 2023, 7:24am UTC](https://community.grafana.com/t/pass-values-between-dashboard-and-datasourse-plugin/102282/4 "2023-08-29T07:24:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![eaguari](https://avatars.discourse-cdn.com/v4/letter/e/779978/32.png) [@eaguari](https://community.grafana.com/u/eaguari)\
**Post date:** [August 29, 2023, 10:19pm UTC](https://community.grafana.com/t/pass-values-between-dashboard-and-datasourse-plugin/102282/5 "2023-08-29T22:19:40Z")

</div>

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

Thanks guys!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/grafana/original/2X/e/ef5308cc58c9e5a13187b5012eb99f406928462f.png) [@system](https://community.grafana.com/u/system)\
**Post date:** [August 28, 2024, 10:20pm UTC](https://community.grafana.com/t/pass-values-between-dashboard-and-datasourse-plugin/102282/6 "2024-08-28T22:20:23Z")

</div>

Closed on August 28, 2024, 10:20pm UTC

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.