# Develop custom visualization **URL:** \ **Category:** Grafana Plugin Development\ **Created:** [August 31, 2017, 6:42am UTC](https://community.grafana.com/t/develop-custom-visualization/2522 "2017-08-31T06:42:41Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![mahadevaprasadap](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@mahadevaprasadap](https://community.grafana.com/u/mahadevaprasadap)\ **Post date:** [August 31, 2017, 6:42am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/1 "2017-08-31T06:42:41Z")
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. ---
**Author:** ![torkel](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/torkel/32/20_2.png) [@torkel](https://community.grafana.com/u/torkel)\ **Post date:** [August 31, 2017, 7:00am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/2 "2017-08-31T07:00:05Z")
> **[Legacy plugins](https://grafana.com/docs/grafana/latest/plugins/developing/development/)** > > Legacy plugins Note: Since Grafana 7.0, writing plugins using Angular is no longer recommended. If you’re looking to build a new plugin, refer to … Example plugin panel: > **[grafana/piechart-panel](https://github.com/grafana/piechart-panel)** > > Pie Chart Panel Plugin. Contribute to grafana/piechart-panel development by creating an account on GitHub. ---
**Author:** ![mahadevaprasadap](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@mahadevaprasadap](https://community.grafana.com/u/mahadevaprasadap)\ **Post date:** [August 31, 2017, 8:13am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/3 "2017-08-31T08:13:42Z")
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. ---
**Author:** ![daniellee](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/daniellee/32/41_2.png) [@daniellee](https://community.grafana.com/u/daniellee)\ **Post date:** [August 31, 2017, 8:40am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/4 "2017-08-31T08:40:07Z")
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/](https://grafana.com/blog/2016/04/08/timing-is-everything.-writing-the-clock-panel-plugin-for-grafana-3.0/) ---
**Author:** ![mahadevaprasadap](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@mahadevaprasadap](https://community.grafana.com/u/mahadevaprasadap)\ **Post date:** [September 2, 2017, 11:04am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/5 "2017-09-02T11:04:16Z")
Thank you Daniellee. The above link helped me well. ---
**Author:** ![daniellee](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/daniellee/32/41_2.png) [@daniellee](https://community.grafana.com/u/daniellee)\ **Post date:** [September 4, 2017, 6:45am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/6 "2017-09-04T06:45:38Z")
@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? ---
**Author:** ![mahadevaprasadap](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@mahadevaprasadap](https://community.grafana.com/u/mahadevaprasadap)\ **Post date:** [September 5, 2017, 6:34am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/7 "2017-09-05T06:34:59Z")
@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.,). ---
**Author:** ![daniellee](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/daniellee/32/41_2.png) [@daniellee](https://community.grafana.com/u/daniellee)\ **Post date:** [September 5, 2017, 7:14am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/8 "2017-09-05T07:14:26Z")
Any other improvements we can make? Are the two blog posts (which are step-by-step guides) missing anything? ---
**Author:** ![mahadevaprasadap](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@mahadevaprasadap](https://community.grafana.com/u/mahadevaprasadap)\ **Post date:** [September 6, 2017, 4:55am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/9 "2017-09-06T04:55:24Z")
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. ---
**Author:** ![daniellee](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/daniellee/32/41_2.png) [@daniellee](https://community.grafana.com/u/daniellee)\ **Post date:** [September 6, 2017, 7:47am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/10 "2017-09-06T07:47:10Z")
1. 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. 2. 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? ---
**Author:** ![mahadevaprasadap](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@mahadevaprasadap](https://community.grafana.com/u/mahadevaprasadap)\ **Post date:** [September 6, 2017, 10:17am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/11 "2017-09-06T10:17:38Z")
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. ---
**Author:** ![daniellee](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/daniellee/32/41_2.png) [@daniellee](https://community.grafana.com/u/daniellee)\ **Post date:** [September 6, 2017, 10:29am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/12 "2017-09-06T10:29:28Z")
What error are you getting? Is it a build time error (when you run grunt) or a run time error (in Grafana)? ---
**Author:** ![mahadevaprasadap](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@mahadevaprasadap](https://community.grafana.com/u/mahadevaprasadap)\ **Post date:** [September 6, 2017, 1:21pm UTC](https://community.grafana.com/t/develop-custom-visualization/2522/13 "2017-09-06T13:21:47Z")
Run time error ![image](https://us1.discourse-cdn.com/grafana/original/2X/4/439caa43bc9081a2291edcf3c4b43c0b13623b98.png) ---
**Author:** ![daniellee](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/daniellee/32/41_2.png) [@daniellee](https://community.grafana.com/u/daniellee)\ **Post date:** [September 6, 2017, 1:45pm UTC](https://community.grafana.com/t/develop-custom-visualization/2522/14 "2017-09-06T13:45:07Z")
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: ```auto 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. ---
**Author:** ![mahadevaprasadap](https://avatars.discourse-cdn.com/v4/letter/m/59ef9b/32.png) [@mahadevaprasadap](https://community.grafana.com/u/mahadevaprasadap)\ **Post date:** [September 8, 2017, 11:12am UTC](https://community.grafana.com/t/develop-custom-visualization/2522/15 "2017-09-08T11:12:15Z")
Thank you @daniellee. Some syntax problem in the ctrl file. Now its working fine.