Custom Bar/Column Chart Plugin (Show Totals, Sort Categories, Sort Breakbys)
Featured
Steps to install (Current Version is V2.8.2):
- Download from my GitHub
- Download a ZIP of the project, Unzip the folder customBarColumnChart-master, add it to your plugin folder, and rename the folder customBarColumnChart
Description:
When you add a breakby to a bar or column chart, you lose the ability to see the total value for the bar/column, you lose the ability to sort the category based on the total amount in each bar/column, and you never had the ability to sort the breakby. This plugin allows you to do all 3 in an easy to use way. In addition, you can also sort a column/bar chart in any custom predefined configuration.
Example Usage:
- Put plugin in /plugins folder and make sure the folder is called: customBarColumnChart
- Create/Edit column/bar chart
- Activate "CUSTOMIZE CHART" option on the Design Panel.
- Play around with a few options
- EASY SUCCESS! =D
Here you can see the new menu option in the bottom right of the screen outlined in red:
I easily turned on the CUSTOMIZE CHART option, and decided that this chart would be more useful if I could show totals for each column, sort the categories descending, and sort inside the breakby so that the most recent dates are at the top of the column instead of at the bottom.
You can easily click between the various options to see what works best for your usecase! It works on both Column Charts + Bar Charts, and you can play around with all 3 Types (Classic, Stacked, Stack 100). This also supports slice/highlight filtering, drilling, jumping, and even PDF reporting.
Here is another chart that demonstrates a non-stacked bar chart:
In this second example, you can see how the categories are sorted ascending based on the total bar value, as well as how the breakby is now sorted from largest to smallest based on the totals. You can see breakby (legend) is in the same order as the category sorting on the above chart (Bikes was the largest total, Cables & Housing was the smallest total).
Did I mention it supports Column/Bar charts that have multiple series but no breakby as well!
You can even configure your own custom sorts:
This bar chart now has the categories sorted where the countries starting with M and N are at the top. The breakby can be sorted the same way. All you have to do is drag and drop items based on your liking. As soon as you click off to the side of the popup or click Save, the configuration will save. If you don't like the updates you made, just click cancel. If you ever want to you can reset the configuration as well.
There is also functionality to configure the Show Totals:
Here is the widget script for the left chart:
widget.on('processresult', function(w, args) {
//args.widget.custom.barcolumnchart.totalLabelEnabled = false;
args.widget.custom.barcolumnchart.totalSeriesName = 'Total (YOU CAN NAME THIS SERIES)';
args.widget.custom.barcolumnchart.totalPointColor = 'green';
args.widget.custom.barcolumnchart.totalPointFontSize = '20px';
args.widget.custom.barcolumnchart.totalPointSize = '7';
args.widget.custom.barcolumnchart.totalAsLine = true;
args.widget.custom.barcolumnchart.totalPointFontFamily = 'Times New Roman';
args.widget.custom.barcolumnchart.totalYAxisPercentSpacing = 100;
args.widget.custom.barcolumnchart.totalLabelPadding = 100;
});
Here is the widget script for the right chart:
widget.on('processresult', function(w, args) {
args.widget.custom.barcolumnchart.totalPointColor = '#19b9c9';
args.widget.custom.barcolumnchart.totalPointFontSize = '13px';
args.widget.custom.barcolumnchart.totalPointSize = '0';
args.widget.custom.barcolumnchart.totalAsLine = false;
args.widget.custom.barcolumnchart.totalPointFontFamily = 'Times New Roman';
});
Overall this plugin should be a huge nice to have for most! I hope you enjoy and I’d love to get your feedback! =D
Special Thanks to Artem Yevtushenko for his sorting breakby script. Very big thank you to Jason Sears for teaching me how to make the plugin more responsive and PDFable. Very big thank you to Shani Adani for showing me how to make the plugin responsive even when you change the chart types, and for helping me clean up the code.
-
Hi Elliott! This is a great plugin, thank you! We are finding it very useful!
I had a quick question though, is there a script to customize the font for the totals? We have a use case where we need to make the font larger for visibility sake when we download the widget to use in a powerpoint slide.
EDIT: I figured out how to do this by modifying the plugin itself, but it would be great to have the option to apply custom formatting to the font (size, weight, color, etc) within the plugin!
Thanks for everything you've done!
-
Hey Megan, Thank you for the great feedback!
V2.2.0 just dropped!
Just added the ability to add a quick widget script to customize the Show Totals easily. As of right now this is as an added script, I am considering adding to a popup. Please see above updated documentation as an example.
Hope you all enjoy! =D
-
V2.2.1 just dropped!
The widget will no longer automatically save configurations, instead the user has to click the apply button on the widget. So if the user refreshes the page or hits the cancel button, none of the configuration changes will apply. This also goes for that popup reset button. If you hit reset, the changes won't officially be applied until you hit apply or click away from the popup (it used to apply immediately even if you then hit the cancel button). Also that button is no longer red during hover effect. I also did some general code cleanup.
Hope you all enjoy! =D
-
V2.3.0 just dropped!
1) Converted the code to ES6 syntax. 2) Added a linter to the project. 3) Cleaned up all of the code. 4) Added some comments. 5) Fixed the Custom Break By Reset Button, it always sorts correctly regardless if a date field. 6) Fixed the Custom Break By Reverse option, wasn't working all the time with dates. 7) Added a new option for totalYAxisPercentSpacing (can be added to a script).
Hope you all enjoy! =D -
V2.4.0 just dropped!
Plugin now takes effect immediately when switching chart types (including the initial creation of the widget). Sometimes the Reverse Option doesn't take effect for both Categories + BreakBys. Page refresh solves the issue, but this needs further investigation.
Hope you all enjoy! =D
-
Hi Elliott,
Continue to really like the plugin and find new uses for it.
Could the position/size/transparency of the custom sorting popup be altered? When I'm trying to sort items on the fly, it obstructs the graph, so I kind of have to guess what items to move and then save and check and then go back and fix, then save, etc. It's not a big deal when there are 5 bars, but once it's a dozen or more, it can be a lot of back and forth.
Maybe a thinner box off to one side?
-
Hey Brian, That is a great suggestion! I'll think about it some more and see if I can make that part more intuitive (so you can see your changes in action).
V2.4.2 just dropped!
Added an extra option for a widget script to add extra spacing (padding) for the total line/dots. Also a little bit of code cleanup.
Hope you enjoy! =D
-
Hi Elliot,
I am on version 7.1.3, and it doesn't show in the Design Panel. As instructed in the documentation, I renamed the folder and added it to the plugin folder, created a Column/Bar chart, hit apply and refreshed the page several times but still don't see anything. Does this work for this version?
Thanks!
-
Hey Elvin,
Just tested on 7.1.3.11003. Works as expected. Can you try removing the plugin completely, and re-adding it. In addition, please try clearing your browser cache, I've noticed that it can keep previous parts of the plugin. Also, the plugin now works instantly when you create a widget, so there shouldn't be any need to refresh the page.
Let me know if you still can't get it to work.
Best,
Elliott
-
Hey Elliott,
The sidebar is great. Really nice solution.
Some follow ups -- Once in a while the sidebar and the preview can be misaligned after shuffling a few items around. See below. Not a huge deal, but figured you'd want to know.
Second, the animation when moving items highlights a target box in green -- to me this isn't super precise. Innately, I feel like that highlighting means "swap" or "replace". Could the animation highlight the border between the other listings, like when you're moving a column in Excel?
Third, on the live sorting, I've got three options -- Save, Cancel and Revert. Save obviously saves. Revert seems to completely remove all sorting and return the list to alphabetical. What does Cancel do? I would assume that it should cancel anything that I've done in the current sidebar session and return the sort to what existed prior to opening the custom sort configuration, but it seems like it just closes the window and leaves the sort with however it has been updated, which is the exact behavior of Save.
Thanks for your hard work on this Elliott!
-
V2.6.0 just dropped!
Made the code even cleaner! Fixed the bug where in the custom sort popup sometimes the list it out of sync with the chart. Also fixed the cancel button. In addition I gave the ability to name the Total series whatever you want in a widget script. Still working on the styling of the custom sort page.
Happy Holidays =D
-
Hey Brian,
Thank you for testing again! Everything should be working as expected. The live sort is still a bit interesting, and I do want to fix it up more, as well as the look of the drag and drop, making it more intuitive. Let me know if you have any other recommendations/suggestions.
Best,
Elliott
Please sign in to leave a comment.
Comments
66 comments