New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom charts #2318

Open
rohit-guitar opened this Issue Apr 5, 2016 · 8 comments

Comments

Projects
None yet
8 participants
@rohit-guitar

rohit-guitar commented Apr 5, 2016

Can i add my custom chart type in metabase?

@tlrobinson

This comment has been minimized.

Show comment
Hide comment
@tlrobinson

tlrobinson Apr 5, 2016

Member

Two things:

First, I'm curious what would your ideal way of adding custom charts be? Do you want:

  1. to build and upload fully custom visualizations using arbitrary JavaScript libraries you provide (D3, React, etc)
  2. to use a more limited declarative API such as vega or vega-lite which we could provide an in-app editor for
  3. other?

Second, we don't currently have a supported way to add custom charts. That said, if you're willing to recompile, and ok with the possibility the API might break with future updates, here are the basic steps:

  1. Create a new React component, here: https://github.com/metabase/metabase/tree/master/frontend/src/visualizations
  2. Import and register it here: https://github.com/metabase/metabase/blob/master/frontend/src/visualizations/index.js
  3. Rebuild Metabase, instructions here: https://github.com/metabase/metabase/blob/master/docs/developers-guide.md

Basically the React component takes a prop data that has a cols array containing metadata about the returned columns, and a rows array containing each rows' values as another array, i.e.

data: {
  cols: [
    { name: "column1", display_name: ..., base_type: ... },
    { name: "column2", display_name: ..., base_type: ... }
  ],
  rows: [
    ["a", 1],
    ["b", 2],
    ["c", 3],
    ...
  ]
}

Also note we need to do #2205 before you'll be able to save cards with new chart types, but that's an easy fix. Let me know if you need help with that.

Member

tlrobinson commented Apr 5, 2016

Two things:

First, I'm curious what would your ideal way of adding custom charts be? Do you want:

  1. to build and upload fully custom visualizations using arbitrary JavaScript libraries you provide (D3, React, etc)
  2. to use a more limited declarative API such as vega or vega-lite which we could provide an in-app editor for
  3. other?

Second, we don't currently have a supported way to add custom charts. That said, if you're willing to recompile, and ok with the possibility the API might break with future updates, here are the basic steps:

  1. Create a new React component, here: https://github.com/metabase/metabase/tree/master/frontend/src/visualizations
  2. Import and register it here: https://github.com/metabase/metabase/blob/master/frontend/src/visualizations/index.js
  3. Rebuild Metabase, instructions here: https://github.com/metabase/metabase/blob/master/docs/developers-guide.md

Basically the React component takes a prop data that has a cols array containing metadata about the returned columns, and a rows array containing each rows' values as another array, i.e.

data: {
  cols: [
    { name: "column1", display_name: ..., base_type: ... },
    { name: "column2", display_name: ..., base_type: ... }
  ],
  rows: [
    ["a", 1],
    ["b", 2],
    ["c", 3],
    ...
  ]
}

Also note we need to do #2205 before you'll be able to save cards with new chart types, but that's an easy fix. Let me know if you need help with that.

@camsaul

This comment has been minimized.

Show comment
Hide comment
@camsaul

camsaul Apr 5, 2016

Member

@tlrobinson it's inaccurate to say that #2205 needs to be done before someone can add a custom chart type. Custom charts will require changes to the source code regardless of whether or not the backend data validation code is removed; it's trivial to add new types to the list of valid visualization types.

Member

camsaul commented Apr 5, 2016

@tlrobinson it's inaccurate to say that #2205 needs to be done before someone can add a custom chart type. Custom charts will require changes to the source code regardless of whether or not the backend data validation code is removed; it's trivial to add new types to the list of valid visualization types.

@tlrobinson

This comment has been minimized.

Show comment
Hide comment
@tlrobinson

tlrobinson Apr 5, 2016

Member

@camsaul Sure, but we should do #2205 so in the future people adding custom charts don't need to worry about it.

Member

tlrobinson commented Apr 5, 2016

@camsaul Sure, but we should do #2205 so in the future people adding custom charts don't need to worry about it.

@siscia

This comment has been minimized.

Show comment
Hide comment
@siscia

siscia Apr 6, 2016

@tlrobinson I am not OP but I second that custom charts are very interesting.

In my opinion I would like to pass a js file that define a single function that takes as input the result of the query.

Most likely, will be necessary to declare what shape of data are accepted from the visualization.

siscia commented Apr 6, 2016

@tlrobinson I am not OP but I second that custom charts are very interesting.

In my opinion I would like to pass a js file that define a single function that takes as input the result of the query.

Most likely, will be necessary to declare what shape of data are accepted from the visualization.

@joshreuben456

This comment has been minimized.

Show comment
Hide comment
@joshreuben456

joshreuben456 commented Jan 20, 2017

👍

@robs15

This comment has been minimized.

Show comment
Hide comment
@robs15

robs15 Mar 24, 2017

This is still open. I'm interested in using this framework & would like to know if I can go ahead & build a custom chart as per the instructions by @tlrobinson ?

Thanks in advance.

robs15 commented Mar 24, 2017

This is still open. I'm interested in using this framework & would like to know if I can go ahead & build a custom chart as per the instructions by @tlrobinson ?

Thanks in advance.

@ryanmccoy

This comment has been minimized.

Show comment
Hide comment
@ryanmccoy

ryanmccoy Jul 25, 2017

@tlrobinson in response to your first post and question to the OP, and as an extremely interested party in this feature request:

I would love the ability to have both an in-app editor for declarative tools like Vega AND the ability to upload my own custom visualizations with the likes of D3, but if I had to choose one I would choose something like Vega for sure.

ryanmccoy commented Jul 25, 2017

@tlrobinson in response to your first post and question to the OP, and as an extremely interested party in this feature request:

I would love the ability to have both an in-app editor for declarative tools like Vega AND the ability to upload my own custom visualizations with the likes of D3, but if I had to choose one I would choose something like Vega for sure.

@timuric

This comment has been minimized.

Show comment
Hide comment
@timuric

timuric Feb 11, 2018

Having Vega charts would be a great start!

timuric commented Feb 11, 2018

Having Vega charts would be a great start!

derekbrimley added a commit to rovitracker/metabase that referenced this issue Apr 17, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment