Skip to main content

External JavaScript and CSS

Version

Dynamic Text Panel supports the external resources starting from version 4.1.0.

Dynamic Text Panel enables the loading of additional JavaScript and CSS resources using external URLs like CDN (Content Delivery Network).

Use that functionality to include additional visual elements and execute JavaScript functions in the JavaScript Code editor.

To prevent the loading of third-party URLs, you can store CSS and JS files in the public folder on your Grafana instance.

Loading Google Material CSS and JS files from an external resource.
Loading Google Material CSS and JS files from an external resource.
Sanitization

You need to disable the sanitization configuration to see external resources in the plugin options.

Manual scripts​

In the event when a library can not be referenced as an external script, you always can reference and initiate it directly in the JavaScript->After Content Ready

Alternative way to load an external llibrary.
Alternative way to load an external llibrary.

Content​

Into the Content:

<pre class="mermaid">
    graph LR
    A --- B
    B-->C[fa:fa-ban {{data.0.test}}]
    B-->D(fa:fa-spinner);
</pre>

JavaScript​

Into the JavaScript->After Content Ready:

const script = document.createElement("script");

script.src = "https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js";

document.body.appendChild(script);

mermaid.initialize({ startOnLoad: true });

mermaid.run({
  querySelector: ".mermaid",
  suppressErrors: false,
});

External JavaScript resources​

Below you can find a collection of breathtaking use cases for the external JavaScript resources in the Dynamic Text plugin.

Plotly 3D Scatter​

Thanks to our community member yosiasz for the provided solution.

Use the following external Plotly's 3D Scatter chart library:

https://cdn.plot.ly/plotly-2.24.1.min.js
info

Grafana's edit mode might prevent displaying Plotly charts. Save and check the result on the dashboard.

You can run this example in two ways:

  • inserting the provided code from the below into the Default content
  • inserting the provided code from the below into the Content

Use the Default Content​

Option 1. Use that option when the data source is set to return nothing.
Option 1. Use that option when the data source is set to return nothing.

Use the Content​

Option 2. Use that option when the data source is set to return something.
Option 2. Use that option when the data source is set to return something.

Code to copy​

Into the Content or Default Content:

<body>
  <div id="addisAbeba">
    <!-- Plotly chart will be rendered inside this DIV -->
  </div>
</body>

Into the JavaScript->Before Content Rendering:

JavaScript code for Plotly example
docs/volkovlabs-dynamictext-panel/js/plotly.js
loading...

Mermaid​

Mermaid is a popular JavaScript-based diagramming and charting tool that dynamically creates and modifies diagrams using Markdown-defined text definitions.

info

Previously we maintained two Dynamic Text plugin builds. One with embedded Mermaid Library and the other without.

The main reason being the Mermaid Library size. After we added the External Resources feature, the need to maintain two builds has vanished. Now, anyone who needs the Mermaid library can simply load it as an external resource.

Mermaid diagrams displayed using the Dynamic Text Panel plugin.
Mermaid diagrams displayed using the Dynamic Text Panel plugin.

Example​

Mermaid diagrams example.
Mermaid diagrams example.

Use the following external library

https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js

Code to copy​

Use the following for the Content (when your data source is set to return something) or in the Default Content (when your data source returns nothing):

flowchart LR
<pre class="mermaid">
    graph LR
    A --- B
    B-->C[fa:fa-ban {{data.0.test}}]
    B-->D(fa:fa-spinner);
</pre>

Use the following for the JavaScript->After Content Ready:

mermaid.initialize({ startOnLoad: true });

mermaid.run({
  querySelector: ".mermaid",
  suppressErrors: false,
});

Chart.js​

Chart.js is one of the popular open-source charting libraries. The Dynamic Text plugin makes using chart.js in Grafana possible!

Chart.js diagrams displayed using the Dynamic Text Panel plugin.
Chart.js diagrams displayed using the Dynamic Text Panel plugin.

Example​

Chart.js diagram example.
Chart.js diagram example.

Use the following external library

https://cdn.jsdelivr.net/npm/chart.js

Code to copy​

Use the following for the Content:

<canvas id="myChart"></canvas>

Use the following for the JavaScript->After Content Ready:

const ctx = document.getElementById("myChart");

new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
      },
    ],
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  },
});