# Datasource plugin example help

**URL:** <https://community.grafana.com/t/datasource-plugin-example-help/705>\
**Category:** Grafana Plugin Development\
**Tags:** plugins\
**Created:** [April 27, 2017, 2:21pm UTC](https://community.grafana.com/t/datasource-plugin-example-help/705 "2017-04-27T14:21:47Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![philsmith](https://avatars.discourse-cdn.com/v4/letter/p/d78d45/32.png) [@philsmith](https://community.grafana.com/u/philsmith)\
**Post date:** [April 27, 2017, 2:21pm UTC](https://community.grafana.com/t/datasource-plugin-example-help/705/1 "2017-04-27T14:21:47Z")

</div>

I’m following the example project [here](http://docs.grafana.org/plugins/developing/datasources/).

My datasource.ts is as follows:

```
export class PhilDatasource{

private type: any;
private url: any;
private name: any;
private q: any;
private backendSrv: any;
private templateSrv: any;

/** @ngInject */
constructor(instanceSettings, $q, backendSrv, templateSrv) {
    this.type = instanceSettings.type;
    this.url = instanceSettings.url;
    this.name = instanceSettings.name;
    this.q = $q;
    this.backendSrv = backendSrv;
    this.templateSrv = templateSrv;
}
query(options): any {
    ....
}
testDatasource(): boolean {
    return true; // to be developed, just want testDatasource to be called for now
}
}

```

Module.ts is exporting this. So everything builds and deploys, all good, as it follows the example. However, when I click on Save and Test I get the following error within Grafana:

```
TestDB plugin failed 
Plugin module is missing Datasource constructor

```

Am I doing something wrong? I’ve checked other datasources code and my constructor looks okay to me, I’m new to typescript maybe I’m doing something wrong.

---

<div class="post-metadata">

**Author:** ![daniellee](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/daniellee/32/41_2.png) [@daniellee](https://community.grafana.com/u/daniellee)\
**Post date:** [April 28, 2017, 7:09am UTC](https://community.grafana.com/t/datasource-plugin-example-help/705/2 "2017-04-28T07:09:43Z")

</div>

I took your code and built it with tsc and loaded it into Grafana without any problems. How are you building your code? Have you transpiled the code into JavaScript?

A very basic setup for building TypeScript (might need sudo for the npm install to install it as a global package):

```auto
npm install -g typescript
tsc *.ts

```

---

<div class="post-metadata">

**Author:** ![philsmith](https://avatars.discourse-cdn.com/v4/letter/p/d78d45/32.png) [@philsmith](https://community.grafana.com/u/philsmith)\
**Post date:** [April 28, 2017, 10:53am UTC](https://community.grafana.com/t/datasource-plugin-example-help/705/3 "2017-04-28T10:53:42Z")

</div>

Yes I have, and it loads everything works until I click on Save and Test. It does say the error is coming from SystemJS. Should I be using something else?

---

<div class="post-metadata">

**Author:** ![daniellee](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/daniellee/32/41_2.png) [@daniellee](https://community.grafana.com/u/daniellee)\
**Post date:** [April 28, 2017, 1:15pm UTC](https://community.grafana.com/t/datasource-plugin-example-help/705/4 "2017-04-28T13:15:04Z")

</div>

Here are the build options that Grafana uses - tsconfig.json. Might be worth setting one up locally but it worked for me with just tsc.

```auto
{
    "compilerOptions": {
        "sourceMap": true,
        "declaration": true,
        "outDir": "public_gen",
        "noImplicitAny": false,
        "target": "es5",
        "rootDir": "public/",
        "module": "system",
        "noEmitOnError": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitReturns":false,
        "noImplicitThis":false,
        "noImplicitUseStrict":false,
        "noUnusedLocals":false,
        "moduleResolution": "classic"
    },
    "include": [
        "public/app/**/*.ts"
    ],
    "exclude": [
        "public/vendor/**/*",
        "public/**/*.d.ts"
    ]

}

```

---

<div class="post-metadata">

**Author:** ![daniellee](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/daniellee/32/41_2.png) [@daniellee](https://community.grafana.com/u/daniellee)\
**Post date:** [April 28, 2017, 1:26pm UTC](https://community.grafana.com/t/datasource-plugin-example-help/705/5 "2017-04-28T13:26:40Z")

</div>

Here is your example slightly adapted:

```auto
export class ExampleDatasource {

  private type: any;
  private url: any;
  private name: any;
  private q: any;
  private backendSrv: any;
  private templateSrv: any;

  /** @ngInject */
  constructor(instanceSettings, $q, backendSrv, templateSrv) {
    this.type = instanceSettings.type;
    this.url = instanceSettings.url;
    this.name = instanceSettings.name;
    this.q = $q;
    this.backendSrv = backendSrv;
    this.templateSrv = templateSrv;
  }

  query(options): any {

  }

  testDatasource(): any {
      var d = this.q.defer();
      d.resolve(true);
      return d.promise;
  }
}

```

With the following tsconfig.json:

```auto
{
    "compilerOptions": {
        "sourceMap": true,
        "declaration": true,
        "noImplicitAny": false,
        "target": "es5",
        "module": "system",
        "noEmitOnError": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitReturns":false,
        "noImplicitThis":false,
        "noImplicitUseStrict":false,
        "noUnusedLocals":false,
        "moduleResolution": "classic"
    }
}

```

---

<div class="post-metadata">

**Author:** ![philsmith](https://avatars.discourse-cdn.com/v4/letter/p/d78d45/32.png) [@philsmith](https://community.grafana.com/u/philsmith)\
**Post date:** [April 28, 2017, 3:26pm UTC](https://community.grafana.com/t/datasource-plugin-example-help/705/6 "2017-04-28T15:26:24Z")

</div>

Thanks Daniel, that fixed it. It was indeed my build task, it’s working now.

---

<div class="post-metadata">

**Author:** ![gaugustos](https://avatars.discourse-cdn.com/v4/letter/g/ce7236/32.png) [@gaugustos](https://community.grafana.com/u/gaugustos)\
**Post date:** [August 4, 2017, 8:41pm UTC](https://community.grafana.com/t/datasource-plugin-example-help/705/7 "2017-08-04T20:41:45Z")

</div>

I tested the same code above and get the same error message. But i’m using es2015 and transpiling with Grunt.

---

<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:** [December 29, 2022, 11:55am UTC](https://community.grafana.com/t/datasource-plugin-example-help/705/8 "2022-12-29T11:55:17Z")

</div>

Closed on December 29, 2022, 11:55am UTC

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