Cannot import chart.js library

[jbronikowski]

I am struggling to import chart.js library

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js

<canvas id="bar-chart" width="800" height="450"></canvas>

new Chart(document.getElementById("bar-chart"), {
  type: 'bar',
  data: {
    labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
    datasets: [
      {
        label: "Population (millions)",
        backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
        data: [2478, 5267, 734, 784, 433]
      }
    ]
  },
  options: {
    legend: { display: false },
    title: {
      display: true,
      text: 'Predicted world population (millions) in 2050'
    }
  }
});

I can see the lib getting loaded into the browser however its indicating the Chart is not defined which typically comes in when the lib is not fully loaded

[jbronikowski]

{
  "datasource": {
    "type": "mixed",
    "uid": "-- Mixed --"
  },
  "fieldConfig": {
    "defaults": {
      "thresholds": {
        "mode": "absolute",
        "steps": [
          {
            "color": "green",
            "value": null
          },
          {
            "color": "red",
            "value": 80
          }
        ]
      }
    },
    "overrides": []
  },
  "gridPos": {
    "h": 8,
    "w": 12,
    "x": 0,
    "y": 0
  },
  "id": 1,
  "options": {
    "everyRow": false,
    "editors": [
      "helpers"
    ],
    "externalStyles": [],
    "externalScripts": [
      {
        "id": "6cb37922-92a9-4861-bd98-5d3c4dec0d3f",
        "url": ""
      },
      {
        "id": "d0b25b01-83c6-46b9-81a8-7a2973ba3e02",
        "url": "https://cdn.jsdelivr.net/npm/chart.js"
      }
    ],
    "editor": {
      "language": "html",
      "format": "auto",
      "height": 200
    },
    "content": "<canvas id=\"bar-chart\" width=\"800\" height=\"450\"></canvas>",
    "defaultContent": "The query didn't return any results.",
    "helpers": "new Chart(document.getElementById(\"bar-chart\"), {\n  type: 'bar',\n  data: {\n    labels: [\"Africa\", \"Asia\", \"Europe\", \"Latin America\", \"North America\"],\n    datasets: [\n      {\n        label: \"Population (millions)\",\n        backgroundColor: [\"#3e95cd\", \"#8e5ea2\", \"#3cba9f\", \"#e8c3b9\", \"#c45850\"],\n        data: [2478, 5267, 734, 784, 433]\n      }\n    ]\n  },\n  options: {\n    legend: { display: false },\n    title: {\n      display: true,\n      text: 'Predicted world population (millions) in 2050'\n    }\n  }\n});",
    "styles": ""
  },
  "targets": [
    {
      "datasource": {
        "type": "datasource",
        "uid": "grafana"
      },
      "queryType": "randomWalk",
      "refId": "A"
    }
  ],
  "title": "Panel Title",
  "type": "marcusolsson-dynamictext-panel"
}

[mikhail-vl]

@jbronikowski Thank you for providing the details and script.

Chart.js should be similar to Plotly and works out of the box: https://volkovlabs.io/plugins/volkovlabs-dynamictext-panel/external/

We will check, maybe there is a race condition.

[asimonok]

@jbronikowski External scripts are not loaded while panel editing to see results you have to open a dashboard at first and go to panel edit. But also there is an issue with existence of DOM element which chart is applied to (you will get these results if you open the dashboard first) . We will add the after render code which is called when elements are ready.

[mikhail-vl]

@asimonok Chart.js works as expected in #231