[New Plugin] Simple Charts

Another learning:

  1. When you use dynamic data for the dataset values including the dataset id and you change these values including the ID it has the same effect as adding a dataset via workflow.

Example: If I have a dataset with the ID 1 and then I change the values and the ID to 2 then two different datasets are displayed. Again changing the ID to 3 creates another dataset, etc.

(So it might be that if you do not change the ID but change the values you create another dataset but as the chart tool only shows the first dataset with the same ID it seems nothing changes?)

Hi @m.bb – thanks for reaching out!

I’ll take a look on Monday and get back to you. Have a great rest of your weekend.

Best,
Alex

1 Like

Hi @m.bb hope your week is off to a good start.

As a start, I’ve pushed some fixes for the “remove dataset” action. This should hopefully fix the issues you’re seeing with the general issue with additional datasets (old datasets that have been removed popping back up again). I’ve tested it on my end with various configurations, could you please update the plugin/refresh the page and let me know if it’s working properly on your end?

I’ll look at item #3 in your list in the meantime.

Best,
Alex

Thanks @alex4 for the quick reply - much appreciated!

I have looked at it and so far it seems:

  • If I use an empty chart (no data set initially) and just use workflows to add or remove datasets everything works as expected. Adding a dataset (or 2 or 3) does exactly that, and in reverse each of them can be removed. No pop-up of old datasets or anything else that looks crazy.
  • If I set an initial dataset then things are still weird. First page reload render is spot on but if you remove or change data from there you get funny results…

@m.bb – thanks for the additional info. That’s very helpful – looking into this and will keep you posted as I push a fix!

Alex

@m.bb I’ve pushed a fix that should resolve the issue associated with the element property data changing. Take a look and let me know how it works out for you. Thanks for flagging the issue!

Alex


( Radar Chart - Using Workflow to insert new series via Entering Color Code)



( Radar Chart - Using Workflow to insert new series via Option)

When I try to insert series with workflow event,
Case 1. Entering Color code directly, it works fine
Case 2. Using Dynamic data from whatever method ( this case i use option in bubble) , graph color only apply to border, but inside is black !

Hi @neofrigate – thanks for reaching out! I wasn’t able to reproduce the issue you’re reporting.

Could you share a link to the editor page so I can take a closer look?

Thanks,
Alex

@alex4 Do you have any intent on adding Bubble Graphs?

https://www.chartjs.org/samples/latest/scriptable/bubble.html

1 Like

Thank you for reply, i will put my link soon !
btw, is there chart element loaded event trigger ? chart element loaded little late with a lot of data .
I am afraid users leave before chart shows

Hey @brad.a.farley – I was actually able to find some time today to publish a first version of a bubble chart type. You can see the demo at chartsdemo.bubbleapps.io (above radar charts and below scatter charts) – I plan to make updates to this chart so don’t hesitate to reach out with requests.

Alex

1 Like

Just checking before purchase: can I use dynamic “Search:filter:count” values to plot location and determine the radii of each point?

Hi @brad.a.farley — yep, all of the charts in the plugin enable you to insert dynamic data for the values. Feel free to give it a test run first by subscribing instead of purchasing!

Cheers,
Alex

Hey @alex4 , thanks for taking the time to develop the plugin and answering all of our questions! I’m having some trouble making my use case work and was wondering if you had any suggestions on how to implement it.

In short, I’m trying to create this chart:

For some context - Each point corresponds to a specific unit of an apartment building, with the X-axis being the date on which it was rented and the Y-axis being the price at which it was rented. We show this chart on a page that represents a single building (which can have multiple unit types, like a 1 Bed 1 Bath or a 2 Bed 1 Bath), with the colour dimension representing the various unit types in that building. Lastly, we need the users to be able to filter the chart such that they can see just 1 unit type if they so choose - currently we use a drop down to allow the user to make this selection.

Some complications I’ve run into that I haven’t been able to resolve with about an hour of research and testing:

  • How can we use dates as the X-Axis values? It seems that the plugin doesn’t like that the X-axis values we passed were dates. The chart currently looks like the screenshot below. I suspect whats happening is that since the plugin expects the X-axis to be continuous numerical values, and doesn’t have functionality to convert Dates into a Unix Timestamp, it just defaults all the X-axis values to 0. I suppose we could rework our database to include a timestamp field, but then our X-axis labels wouldn’t be user-readable as it too would be a timestamp. I looked around quite a bit but I don’t believe there’s a way to convert a timestamp in the label field into a date directly in the plugin.

  • How can we dynamically set the minimum value for X-axis, with X-axis as dates? For some buildings we have limited historical data, say 3 months, whereas for others we may have 6 months or more. We’d like to be able to set the minimum value on the X-axis dynamically according to what the earliest date a unit in that building was rented, in order to limit the chart to the range of dates for which we have data for a given building. This seemed like it would be fairly straightforward (and I believe it would be if the X-axis wasn’t a date), but we couldn’t get the plugin to accept a date as the minimum X-axis value which is probably related to the first issue.

  • How can we filter and/or toggle between series using a dropdown? Finally, as mentioned above we need our users to be able to interact with the chart by filtering specific unit types using a dropdown. Essentially they should be able to see just the orange points, or just the green points (referring to the original screenshot of the desired chart above, reminder that colours == unit types) should they so choose, with the default being that all unit types are shown on initial page load.

I know these are probably a bit more complicated than the normal use case for this plugin, so if the answer is “not in scope” then I understand. If however there’s a fairly straightforward way we could do this given the current plugin, and/or some quick fixes we could help deploy that allow for these functionalities we would love to work with you to make it happen - thanks in advance for your thoughts and advice!

Hi @daichi.alias – thanks for reaching out! Apologies for the slower response as I’ve been off the grid for the last few days. Thanks for clearly outlining your questions here. Very helpful.

Using dates as X-Axis values:
The ChartJS library (what this plugin uses) takes in coordinate points for their scatter and bubble charts. Although taking in dates for the X axis is not built in to ChartJS, it would be possible for me to build something custom here to enable your use case. This feature wasn’t on my backlog but I have previously added features to my plugins on a sponsorship basis. No pressure, just offering in case this is something you’re interested in. Feel free to send me a DM if that is the case.

Add Filter / Toggle Between Series with Dropdown
You can approach this in two ways depending on your needs:

  1. Element properties: You can add up to one series via element properties (at the bottom of the element inspector on the design tab for Scatter chart). Dynamically enter the Series name as the dropdown value (assuming the dropdown values are the names of the series here). In the inputs for the X and Y values, you’d do your search for the numeric values and filter by the series in the dropdown.

  2. You can also do this using workflows. In your dropdown, again, you’d use the name of your series as options (e.g. Series 1, Series 2, Series 3). Using workflows, whenever a new series name is selected in the dropdown, you would set a workflow to remove the previous series from the chart and add the new series (the one that the dropdown is now set to) to the chart

Hope that helps! Let me know if you need additional support.
Alex

Thanks Alex, I’m loving the chart tool, does an excellent job…I do have a couple questions about configuring a couple options or if it’s possible.

In the image below I show your chart tool on top and a similar set of data in a chart in Excel on the bottom. I’d like to know if it’s possible to add the left-hand label, reduce the number of data points on the X-axis zero line and make the legend colors square instead of rectangles.

And one final ask…is it possible that, on a line chart, that the hover/popup shows not just the single line/point hovered but the value of all lines at that vertical crossing…similar to the example below? I can see how to get a custom hover for a single data point (maintooltip1), just not all of those shown .

image

This is my attempt, I just can’t determine how (or if) I can address more than one point at a time since it appears that only the hovered point is exposed to the dynamic data.
image

1 Like

Hi Alex! I’m loving the charts, and it’s worked really well so far, but I just came across a weirdness. The chart works fine in dev and shows the results, but stays invisible in prod. There are no conditions that hide the chart and it is set as “visible on page load”.

Any idea why this could be ?

Thanks for the requests @chris.charette241 – I’ll look into those requests and see if I can add them to the backlog. The ability to see different series’ data when you’re hovering a single point seems like it could make sense for other use cases as well.

Hi @dee – thanks for reaching out!

That’s strange – the plugin does not have any logic that handles dev vs live mode differently. Is your data structured the same/similarly on the live site? It sometimes helps to create a simple text element next to the chart (populated with the same dynamic expression as the series values) to verify what numbers should be showing up on the chart.

If you’re still stuck, I’m happy to take a look if you send me the editor link – feel free to DM that to me if needed.

Best,
Alex

Hey, searching on box plot for bubble, and wondered what the outcome was for this?