[New Plugin] Simple Charts

Hey Bubblers, I just released “Simple Charts” — a very simple plugin to add a bar or line chart to your app.

A few advantages:

  1. You can fix the max and min Y axis values
  2. The chart currently supports up to 3 series of data
  3. The chart’s values can be statically added (do not need to rely on database values), calculated on the page, or dynamically refer to the database
  4. You can add units to your Y axis tick labels (i.e. to support units such as “$” or “inches”)

Example in run mode and editor mode.

Let me know if you’d like to customize other aspects of your chart and I can look into it. Happy Bubbling!

19 Likes

Just subscribed to your plugin, @alex4!

I was longing for the ability to fix the max and min of the Y axis in a chart.

I’m trying to migrate my charts built with Bubble’s Line/Bar Chart, but I’m having difficulties to perform math operations with data that requires grouping.

That’s what I used to have with Bubble’s plugin:

image

How would I go about this with your plugin? So far I can only build the first part:

image

Thanks again for building this!

Hi @Lucien, thanks for the feedback and happy to hear that the Y max/min is helpful to you!

There currently isn’t a way to do more complex math operations within the plugin right now (although I’m looking into it). In the meantime, here are a couple of ideas on how you can achieve getting the sum of the group divided by the sum of a different field of that same group:

1. Manually create each Y-series value and separate by comma: You can refer to each of the grouped values separately within the “Series 1 - Y-Values” input do the calculations there and separate each number value with a comma. Not sure if this will work for your implementation since this is a pretty manual approach but see the screenshot below for an example:
14%20PM

2. Use the RepeatingGroup Tools Plugin: I actually haven’t used this plugin yet but it looks like you might be able to make those same calculations within a RepeatingGroup and dynamically refer to that the list of values within that RepeatingGroup – which you can refer to in the Simple Charts plugin.

Cheers,
Alex

Hey Alex,

Sorry for the slow reply.

You’re right, solution 2 may have worked, but your latest update of the plugin which now enables these complex calculations via the additional element “Complex List Calculations” is perfect for my case!

Thanks a lot for the quick turnaround!

1 Like

Happy to hear that the Complex List Calculations helps :+1:. Thanks for the feedback @lucien

@alex4 I just installed your plugin yesterday but keep getting an error in the console preventing the chart to render. Can you advise on this?

Thanks for the catch! I pushed an update and the chart should now be loading properly. Please take a look and let me know

All fixed! Thanks for the quick response!

2 Likes

Hi @alex4 - Great Plugin!

Quick question: Is there an option to show the actual #'s without hovering over the tool?

I need to convert my page into PDF, and obviously I would assume it won’t show without hover.

Also, will you be working on a Pie chart as well?

Thanks!

1 Like

Plugin Update: I’ve added the ability to add a Pie/Donut Chart to the Simple Charts plugin as well (in addition to Line/Bar charts).

You can check out the run mode example here: https://pluginsbyalex.bubbleapps.io/simple-charts

Here’s an example:

Screen Shot 2019-12-10 at 6.01.20 PM

Enjoy!

6 Likes

Hi Alex

Just bought your plugin as it looks very nice!
I did try to contact you by email but the link to you site is resulting in a 404…

So I try to put my question here:
I have a database contains prices (like for ex 1.99, 2.09, 3.25…)
When I do a search for “all prices” the return of the database is "1,99, 2,09, 3,25…)

As your chart needs a point this will not work.

can you please help me with that?
Ofcourse I do also accept advice of other Bubblers :innocent:

Thanks a lot

Marco

Update for the Simple Charts plugin – I’ve added a two more features, which you can view on the Simple Charts demo page. You can now do the following:

  1. Add up to 5 series of data for Bar/Line charts. Here’s an example:

Screen Shot 2020-01-27 at 4.35.46 PM

  1. Turn on/off the horizontal and vertical gridlines for Bar/Line charts. Example of turning the vertical gridlines off:

Screen Shot 2020-01-27 at 4.36.49 PM

Enjoy!
Alex

1 Like

Another update for the Simple Charts plugin. You can now display the data labels for each series’ values directly on the chart by turning on a field called “Show Data Labels?”

This should be helpful in cases where you don’t expect a user to hover over each chart values to see the tooltip.

Here are a couple of screenshots (demo page link here):
Screen Shot 2020-02-15 at 12.25.40 PM

Screen Shot 2020-02-15 at 12.36.02 PM

Screen Shot 2020-02-15 at 12.36.21 PM

Enjoy! Please send feedback to pluginsbyalex@gmail.com

Alex

5 Likes

Hi Alex
I recently subscribed to your plugin and noticed that when i load the chart element onto my page, the pre-loaded data doesn’t chart the first set of data in series 1.


When i tried to use my own data in it, I get the same issue.
same data

Can you help?

Hi @jimmytu0 – thanks for reaching out!

It looks like the “Y Axis - min value” vield might be empty. If you leave it empty, it will start at the lowest Y value. However, if you’d like the Y Axis to start at zero, you can enter 0 for that value. Here’s a screenshot of that setting set to zero as as the output graph:


Screen Shot 2020-03-25 at 10.08.16 AM

Hope that helps. Let me know if you have any questions!

Hi Alex,
Thanks for the quick response. Your response worked!

BTW are you working on future revisions of your graphs where you allow the legend to be in different areas?

2 Likes

Hey @jimmytu0 – glad to hear the fix worked out! I can look into future versions of the graph where the legend can be in different areas. Keep you posted!

Alex

Hi all – I just pushed an update for the Simple Charts plugin – users can now add an Area Chart (in addition to Bar, Line, Donut, and Pie charts). You’ll see it as another option in the “Chart Type” input on the Element Editor (below):

Screen Shot 2020-03-30 at 11.10.42 AM

Here’s an example of what the Area Chart looks like in Run Mode:

Screen Shot 2020-03-30 at 11.08.39 AM

Enjoy and don’t hesitate to reach out with feedback!

hey @jimmytu0 – I’ve just pushed an update where you can specify the location of the chart’s legend (top, bottom, left, right, or don’t show). Take a look and feel free to provide feedback. You can view the updated demo here.

Here’s an example of setting the legend to be on the left side of a line chart:
Screen Shot 2020-03-31 at 3.18.06 PM

Here’s where to access it in the Element editor:
Screen Shot 2020-03-31 at 3.18.41 PM

Let me know if you have any questions!
Alex

1 Like

Thanks for letting me know about the update!
Being able to change the legend location is helpful!

Thanks!

2 Likes