Drag & Drop Charts

Hello!

I am trying to create a dashboard-creator app similar to cyfe.com or Google Data Studio.

I currently have the dashboard pages setup, but need to let the user add certain charts to their pages as well as drag them around where they want and also edit them.

We are currently working on the API’s that we want to include, and have gotten as far as adding a chart based on the integration and metrics for that integration that they choose, but don’t know where to start when it comes to making each chart on their dashboard “draggable”.

Has anyone built an analytics dashboard tool like this before?

You can try the Draggable Elements plugin.
Once installed, add a Drag/Drop group to your page.
Then create your chart on the Drag/Drop group.

Your users will then be able to drag their charts around on the page.
You will have to store the coordinates of each draggable chart so that when the page is loaded you can position them like before.

See this example.
Click and drag the charts around.
Note that i haven’t implemented saving the coordinates of the charts so on page load they will revert to their original position.
https://seanhootsdemo.bubbleapps.io/version-test/dragchart?debug_mode=true

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.