Add TMD widget to your own website

What does the widget do?

This widget allows users to incorporate summary statistics charts into their own websites. Any changes in the TMD will then be reflected automatically on the users website.

Setup

Add the following code snippets to your own website:

Insert the below snippet where on the website you want the widget to be:

<div class="tmd-widget" id="tmd-widget-container"></div>

Place this code snippet in the bottom or top of your code, replacing the <question_slug> with actual slugs:

<script src="https://elixir-europe-training.github.io/Training-Metrics-Database-widget/widget.js"></script>
<script>
  TMDWidget({
    container: '#tmd-widget-container',
    questions: [<question_slug>, <question_slug>],
  }).catch((error) => {
    console.error('TMDWidget failed to initialise', error);
  });
</script>

The following parameters are customizable for the widget:

• questions: A list of question slug ids for displaying. You can find the question slug in the admin panel in the TMD. If defined, questions are displayed in the order they are inputed.
• questionSets: A list of questionSets for displaying. If defined, all questions in the questionSet will be displayed. questionSets are listed by their slug.
• dataset: An optional UUID specifying a dataset from which the API will get node specific data. It needs to be combined with questions or questionSets.
• chartType: Define what chart type results should be shown in. Valid choices are 'pie' and 'bar'. Defaults to 'pie' if not defined.
• colors: A list of hex colors to be used for plotting. Defaults to ELIXIR colors
• endpoint: The API endpoint to get the data from. Defaults to "https://tmd.elixir-europe.org/metrics"

The widget defaults to showing all the data in the TMD unless otherwise specified. To only display your node's data, first log into the admin panel of the TMD, and create a dataset, specifying the dates for the data to be extracted. Save the uuid of this dataset, and input it as a parameter for the widget, input field dataset.

Either questionSets can be set, or questions, not both. In case of both being defined, questionSets take precedence.

Example

You can find an example page how the widget can look like on this page: https://elixir-europe-training.github.io/Training-Metrics-Database-widget/example.html