π» We highly encourage you to take a look at the editor page for the demo, where you can see how the charts were built. Here's the demo (with link to editor):
https://techblocksco.bubbleapps.io/boxplot-charts
If you have any questions, don't hesitate to reach out to our team via the support URL or support email. We are very responsive! (See support thread here:
https://forum.bubble.io/t/new-plugin-box-and-whisker-boxplot-charts/140510/4).
----------------------- Getting Started ------------------------
1. Place the plugin chart element on your page
2. Enter the series names, X Axis values, and series labels. For example, you could set the following:
**Series name = "revenue",
**Series X-Axis values = "2018, 2019, 2020"
Keep the number of items in each list the same. For example, if you are using 10 data points on the Y-axis, be sure to use 10 data points on the X-axis.
These comma-separated values can be dynamic searches (e.g. refer to search for a list of items from your database)
3. Enter your boxplot series values. Each series list should be a comma-separated list and each series value should be separated by a semi-color. For example:
100, 200, 300;
200, 300, 400;
300, 400, 500;
Entering this dataset would create three boxplots. The first boxplot would calculate the min, q1, median, q3, and max of "100, 200, 300", the second boxplot would do so for "200, 300, 400" and so on...
---------- Add a Data Series Via Workflow Action ------------
1. Add an infinite number of data series. From the workflow tab, add an action, go to the element actions sub-menu and select "Add a Data Series to Chart"
2. Enter the customizations on the workflow action's menu (e.g. series name, color, values, labels)
Voila! That series should be added to the chart!
------- Custom Tooltips when Chart's Value is Hovered --------
1. Add a Bubble group element to the page. This will be your tooltip.
2. Customize the size and style of the element based on what you'd like the tooltip to look like.
3. Add text inside of this group that refers to [your chart element]'s Hovered Item's X value, color, etc. which will update every time you hover a new value on the chart.
4. Enter an HTML attribute id for the group. Copy and paste it in the Chart element's "Custom Tooltip HTML id" input.
----------- Events when Value is Hovered ----------------
1. You can set up events to fire when a chart value is hovered. Open the workflow tab and Add the event called "A Chart Value is hovered" (this is in the Events --> Elements submenu).
2. This will trigger events on your page. Refer to the value hovered by accessing states on your chart. For example, you can access the "Hovered Point's X Value", Hovered Point's Y Value, and "Hovered Point's Series Name"
π Visit the instructions page here:
https://docs.techblocksco.com/?tab=Box-and-Whisker-ChartβοΈ Email feature requests to
[email protected]
Built on Bubble
