I am very much interested in developing the custom visualizations for Grafana but am not seeing any good resource to start with. Kindly help me if you can provide any pointer.
Example plugin panel:
I have already check the above links but did not understand how to start. Looks like am not educated enough to understand the above information. It might take time for me to understand and start developing. Thank you for the quick response.
You need to know some basic web development. JavaScript/TypeScript, HTML, CSS and how to use a build system like Grunt or Gulp.
The guides are also in blog form if that is easier to understand: https://grafana.com/blog/2016/04/08/timing-is-everything.-writing-the-clock-panel-plugin-for-grafana-3.0/
Thank you Daniellee. The above link helped me well.
@mahadevaprasadap just curious about our documentation. You did not find what you were looking for initially but I think all the information that is in the blog post is in the documentation. Is there anything we can do to improve it? Do we need more guides/tutorials?
@daniellee Yes, document needs much more improvements. I think its better to have complete guide to develop one simple visual including detailed steps (for example commands and etc.,).
Any other improvements we can make? Are the two blog posts (which are step-by-step guides) missing anything?
I believe most of the people having less technical knowledge also use Grafana. So if you provide complete step by step (including commands, Videos etc.l,) it would be great.
-
To repeat my question, is the blog post missing any steps? (For example, installing grunt - I think I assume that all web developers know how to install it. Which seems to be an incorrect assumption.) If you can think of anything while it is still fresh in your mind, then I can update the blog and docs now.
-
I am currently working on making it easy to write plugins in TypeScript (it is currently very hard) and will create some boilerplate repositories for each plugin type to make it easier to get started. But in your case, it sounds like you would like a tutorial in JavaScript/TypeScript and build scripts with every detail described step-by-step?
I followed the steps mentioned in the provided URL to replicate the same but the panel is not working and getting some JS error. Like you said I might have missed some steps that you assumed (other than installing Grunt :P).
Now if I had seen the video of building panel (except installations and basic stuffs) from the begining, I could have get the knowledge where I have missed and if I follow whatever there in video it should ideally work.
What error are you getting? Is it a build time error (when you run grunt) or a run time error (in Grafana)?
Run time error
Looks like the plugin id in the plugin.json does not match one of your filepaths.
Do you have a path like this in your code:
onInitEditMode() {
this.addEditorTab('Options', 'public/plugins/grafana-clock-panel/editor.html', 2);
}
The path above should be public/plugins/grafana-clock-panel_custom/editor.html in your case.
Thank you @daniellee. Some syntax problem in the ctrl file. Now its working fine.