Pleased to share with you all the next iteration of the plugin formerly known as amCharts for Bubble.
Chart Tools is a (growing) basket of tools to help you build amazing dashboards and other data visualizations for your Bubble apps. New plugin site now live here including new examples here.
You can now find the following elements in the basket:
The new Chart.js elements offer powerful charts without the watermarks.
All elements have a data summary engine attached that allows you to rollup / aggregate / count / sum / average your data before you chart it. You feed it the long list and it will visualize the highlights.
There is also now a full reference file created that covers all functionality across all the chart elements - linked directly here or via the plugin site.
A big thanks to everyone that has supported the tool so-far!
New in Version 3.0.0
Chart.js Pie and Bar / line elements added
Full color controls added to Series 3 - 8 in amCharts Bar / line
Horizontal chart option added in amCharts Bar / line
Decimal point control added in amCharts Bar / line
Improved transparency controls - this is now controlled via the slider in the color consoles
Improved line graph behaviour that starts a line at the left edge of the chart (instead of mid-block) when a line graph is assigned to Series 1
Please email suspected bugs to ed@chartbox.co or PM me on the forum.
@exception-rambler Is there a way to specify the size of the circle in a pie chart? I have a couple of charts next to each other and they are different sizes depending on the length of the labels and size of box for the chart element. The heights of the elements are the same, but I have to make one wider so the labels will fit. As you can see though, the circles are not the same size, and I would like them to all be consistent.
… is rooted deep within the backend code of chart.js… not hackable - by me, any how.
One workaround would be to create your own legend (given that Often, Sometimes etc. are predictably the outcomes) and have a small group for each legend title (containing the color block and text) and then conditionally show / hide the group based on whether that outcome is included within the query results.
hi @ryley.randall - best to drop me an email at ed@chartbox.co. You will need you to open up viewing access to your App and include a link to the editor.
Pulling data from an API should fine provided that the data arrives in the right formats for both category and value lists. I’m sure we can get it figured out pretty fast.
Until now Chart Tools has been managing grouping and aggregation via it’s own code. Bubble’s implementation is excellent though and I am currently coding Chart Tools over to take full advantage of it. This is not a like-for-like switch… more complex charts involving multiple Series will still need backend matching and consolidation.
All that is to say that the next update of Chart Tools will bring the full capabilities of Bubble’s new feature, along with some other neat updates to the Chart.js Elements, including a fourth Series, gradient fills, improved date handling and a multi-series radar Element.
Please be sure to read the documentation here and the guidance below before switching over. This update is not backwards compatible and you will need to make adjustments to each chart’s properties.
In Version 3.2.1
Note: Chart.js elements are now just called Chart Tools: Bar / line and Chart Tools: Pie
New with Chart Tools elements:
Integration with Bubble’s Group by:… tool for Chart Tools elements (amCharts elements do not integrate, but still offer out-the-box data summary tools)
Gradient fills for Bar and Line areas
Straight integration with Bubble date data - no need to apply a Formatted as operation
Override option for responsive labelling - you can now force axis labels to be shown for all data points
Line tension control adjusts the sharpness / curviness of the line with line graphs
Prefix values on the left or right Y-Axes with a unit of measurement - e.g. $ (suffix option to follow)
Control column / bar width
No changes have been made to amCharts elements
Note on integrating over to Version 3.2.1
This update is not backwards compatible. The data setup for each chart has been redesigned from the group up - therefore your current data options will not port over. Follow the order below to setup your data:
Thing to plot: Select the database Thing (or otherwise) that you are charting
Data Source: Run one search for the parent object that contains the fields that you use for your Series labels and values. The type of this Thing must match your selection in Thing to plot. You should apply constraints at this step of the process. You can also add a Group by:… operation - read here to understand how that works. You can also find an example in the Reference.
Label field & Value field: Select the Fields that contain your label and value data.
+ Label’s nested Thing & + Value’s nested Thing: If either your label or value data is contained in a linked object then you should select that Thing here. For example, if your label is a Company’s Name, but Company is a Thing in it’s own right, then you would select Company for + Label’s nested Thing followed by Name for + Nested label’s field (which will appear when you pick a Nested Thing)
If you get errors converting your existing chart over, then you should try from a new element. There are a lot of changes in the backend and switching over may need you to make a fresh start. You can revert to Version 3.0.1 if you have persistent problems and email ed@chartbox.co
I have just pushed a change to the Chart Tools elements (pie and bar/line) that brings support for API and Custom State data sources back to the plugin. Thanks to @CoachLani for spotting this.
In Version 3.3.0
If an API or Custom State is being used to plot a chart, then number should be selected as the Thing to Plot. The Values data should then be connected using Data Source, then Label data connected using Other Label Data. Effectively, this allows you to revert to the historical (pre-last update) method of connecting up data.
Hey @geoff.byron - glad it’s working for you so far.
%'s are a touch fiddly. They are definitely upcoming, perhaps not the next release but likely the one after. Releases are approx. monthly.
The last release brought date improvements and date format is now on the Next list, likely doable for the next release.
Yep, definitely. I’m not sure I’ll go as far as I did with the amCharts elements (8, I think)… but next calling point will be four. This is an easy upgrade to make and I’m planning on bringing it to the next release. Also upcoming next time is horizontal bar charts.
I have just pushed some upgrades and features to Chart Tools. Take a look below, there is a link included to the documentation after each.
In Version 3.4.0
New with Chart Tools elements:
Horizontal bar graph added: Just select horizontal bar from the Graph Type dropdown in Series 1 of a Bar/line chart. Note: it’s not possible to add horizontal line graphs to a horizontal chart. Reference
Four Series now available. Bar / line charts can now contain up to four series in any combination of bar or line graphs. These are compatible with Bubble’s :group by feature and run additional filtering to ensure data is coherent. Reference
Legend & Tooltip label upgrades: You now have finer control over the labels shown within tooltips (hover labels) and legends. This includes displaying % values @geoff.byron. Currently these upgrades are in pie only but will come to bar/line soon. Reference
Ensure a pie segment is always first: Sometimes you will want to insist that a specific pie segment is drawn first - this is common when creating Apple Watch Activity-style doughnut charts. Sometimes you can use filters to manage this, but it’s not always possible (@Andy_i). This behaviour can now be forced to ensure the correct pie segment is positioned at the top of the chart. Reference
Please email suspected bugs to ed@chartbox.co or PM me on the forum.
A feature suggestion: if we can have more control over the legend position so at the moment it wraps as in the attached, it would be good to say have it always shown on the left - for example, or at least have it so there is no overlap.
On legend layout this is mostly a product of the dimensions of your element - when the legend runs out of height it wraps to a second column. This is a good behaviour, unless - as above - there isn’t the width available to accommodate both.
In the example below I added only 7px of height to the second instance to remove the second column. I know you’re tight for space, but this is likely your best route for now.
I have added font sizing to the roadmap. Once live, this will allow you to pack more legend into the same space and will be another option for you.
As another feature suggestion, if you could expand the option for colours to specify a particular colour for a particular label.
So at the moment it keeps the colours consistent, but you could have the colour for one label different from another if the options are different.
So if you look at the attached I am using the same scale options but because some answers do not have a particular label it seems to assign the colour to the next in the list.
A feature request would be like the label at the 12 o’clock position but for colours where an additional option would say assign this colour to this label, this colour to this label etc…
