Custom Bar/Column Chart Plugin (Show Totals, Sort Categories, Sort Breakbys)
Steps to install (Current Version is V2.9.0):
- 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';
});
Also supports various chart types:
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.
-
Hey Pratik,
Appreciate the feedback!
The scope of this plugin was for a designer to pre-select the sort order of each widget. Viewers are not going to get into the edit mode of a widget to then change the sort order. So technically we can add this functionality to the dashboard level as some custom UI elements, but that is out of scope for this plugin.
Another option, would be to make all of your viewers into designers instead, and limit the role of a designer by leveraging the customize role API. That way you can limit what the designer can do, but still give them options to edit widgets (edit the sort order).
Best, Elliott
-
Hey Elliott,
Have a strange case using a stacked bar chart:
Right now I can only sort by the raw numbers in the values, So here, New York has the highest number of responses, but St. Louis has the largest of percentage of responses. Is there a way to sort by that percentage?
Here's a pivot -- Currently sorting by Col A, but I'd like to sort by Col C
-
Hey Brian,
I would tackle this use-case more out of the box.
I added a third value which is actually the percentage calculated out, which you can then sort on (granularity is super tiny compared to the rest of the numbers, so it looks like there are only 2 parts to the bar.
You can also hide the 3rd value (sort value), by leveraging the the additional tooltip plugin:
https://support.sisense.com/hc/en-us/community/posts/221225348-Additional-Data-Chart-Tooltip-Plugin
Which would also require a 1 line widget script to hide the value (adds it to the tooltip):
prism.additionalInfoTooltip (widget, {seriesIndexes:[2],displayCurrentSelection:true});
Hope this helps, this seems easier and more out of the box then trying to do it through a widget script or by updating this plugin.
Best, Elliott
-
Hey Aaron,
Thank you for the feedback! Also appreciate the name correction! =D
Hey Teh,
I'm not finding any issues on my end with the 2 plugins together. Here is an example I built to always show the top 10 of whatever category is picked, users can dynamically right click to change the category:
Can you provide more specific instances where the 2 plugins don't work together?
Best, Elliott
Please sign in to leave a comment.
Comments
102 comments