I am trying to use the CanvasJS library in my plugin, but the imports don’t seem to go right. I have downloaded the canvasjs.min file and the jquery.canvasjs.min file, they are both in the \external folder, which is inside the \src folder. My import statements are:
import * as canvasjsjquery from ‘./external/jquery.canvasjs.min’; import * as CanvasJS from ‘./external/canvasjs.min’;
This does not work. Not if they are put in the module.js file, and also not in the javascript file from the plugin itself.
The error that Grafana gives is: Cannot read property ‘style’ of undefined. This error only shows up if the statement
this.chart.render();
is in the code. this.chart is the variable that should contain the CanvasJS.Chart object. Therefore, I think that this.chart is undefined.
First of all, thank you for your answer . When I try to do the import the way the npm page for CanvasJS suggests, I get the error: Fetch error: 404 Not Found Instantiating http://localhost:8080/public/canvasjs Loading http://localhost:8080/public/plugins/grafana-example-panel/module.js Loading plugins/grafana-example-panel/module . Hence I think the ‘./external/’ part is needed for JavaScript in order to be able to find the file. However, when I use the statement import CanvasJS from ‘./external/canvasjs.min’; , I get the same error as before (Cannot read property ‘style’ of undefined). import CanvasJS from ‘./external/canvasjs’; also does not work (error 404, which seems logical to me since the filename is canvasjs.min, not canvasjs). Do you know what could be wrong?
Sorry, I meant the style of import rather than the exact syntax - you need external in the path.
I’ve never used CanvasJS before but there are a few things you can do to check why it is not working.
Check that it is initialized first. Use console.log(this.chart) and check the console in Chrome to see what the value is or just debug your JavaScript in Chrome.
How are you creating the Chart object? The first argument that the constructor takes in is the id of an html element. Does that html element exist and is the id field set to the correct value? (Basing this on the Getting Started guide).
If you still can’t get it to work - then try creating a simple html page outside of Grafana first to make sure your code for CanvasJS is working before trying to integrate it with Grafana.
Thanks for all your tips! I finally figured out what the problem was. The program doesn’t have enough time to load the CanvasJS library, a this.$timeout(() => { //function call}, 500); made the plug-in work!
. When I try to do the import the way the npm page for CanvasJS suggests, I get the error: Fetch error: 404 Not Found Instantiating