[TW5] Introducing a simple BarChart plugin

[Jed Carty]

I just released the BarChart plugin, it adds a simple widget that can be used to make progress bars or bar charts in tiddlywiki based on filters. I have some demos on the demo site here showing its use as a progress bar, a simple one line stacked bar chart and a more normal multi-bar stacked bar chart.

I am planning on creating other simple data visualisation widgets later.

I made a purely wikitext version but it doesn't was much more complex to use and didn't have some features, like being able to give fewer colours than you have sections in your bar chart.

I wrote this instead of using d3.js or snap.svg or any of the other existing libraries because it is much simple and smaller and if you have a single use tiddlywiki and just want one type of visualisation this will not add much to your wiki.

The plugin is in the OokTech plugin library and the code is on GitHub, links are on the demo site or on the directory site here.

I am going to work on this a bit more to make more options for displaying the progress, the inspiration come from a request and this doesn't exactly do what was requested so I will work on that a bit.

I also noticed that all the plugin library tiddlers in my plugins point to the http version instead of the https version and change it, so the OokTech plugin library should be available from wikis served on https sites now, if you have trouble you may need to reinstall a plugin manually to get tiddler for the https version of the plugin library.

[HC Haase]

Damm you beat me to it.. I was working on my own lightweight bar chart plugin.

But hey, now my feature wish exist.

NICE

I would like to have bars side by side and not stacked(percent). I am thinking this might be possible by setting the left side of the bar to transparent/bg color.

[@TiddlyTweeter]

Ciao Jed

That is really ELEGANT even on first iteration. I'm currently working on getting it working with Thomas Elmiger's ToDoNow plugin. Its proving very easy. Your plugin gives me access to a very pertinent overview of how I'm progressing in getting stuff done in an elegant, minimalist way.

I have one question & one suggestion ...

1 - The COLOURS are a bit overpowering. Is there a way to change them to something less in-your-face?

2 - Could it be done that you can show BOTH the percentage completed and a COUNT of the number of tiddlers finished / unfinished?

Many thanks

Best wishes
Josiah

[Danielo Rodríguez]

I love this kind of small , simple and focused plugins. Very nice implementation, and the most important thing to me : it looks stunning on mobile. Very well done.

I was just guessing if do you mind if I include your plugin library as part of Noteself distribution. This means, including your plugin library preinstalled

[Jed Carty]

Ok, responding in order:

HC Haase,

I am planning on adding normal bar chart type bars, the reason it isn't here yet is that I need to make sure that the chart is understandable. I think that the stacked bars are easier to understand without external markings than the side-by-side bars. In my experience once you start adding much in the way of annotations it quickly becomes complex and I want to make sure that I do it reasonably from the start to prevent troubles in the future.

TiddlyTweeter,

1) I am terrible at picking reasonable colours, if you have suggestions I can change the defaults and the demo. I am dyslexic so I tend to go for colours that give good contrast above other concerns and it usually results in horrifically ugly interfaces, but in this case red green and yellow were just the first three colours I typed in. You can set the colours used to any valid css colours using either the names or numeric values.

2) Yes, this is one of the planned additions but in the same way as above, adding options like this becomes complicated and because there has to be an option for every tiny piece the simplicity that makes it useful gets lost quickly.

Danielo,

That sounds good to me! They are there to be used.

[@TiddlyTweeter]

Ciao Jed

Thank you very much for clarifying that issue on colours. I found your code remarkably easy to read and modify. Thanks!

Josiah

[Jed Carty]

you don't need to modify the code, just put colors='pink,orange,blue' in the widget to make it use pink orange and blue.

[Lost Admin]

Please don't. 'pink,violet,blue' would be less painful.

Jed, perhaps use something like this when picking colors: http://paletton.com/#uid=3000u0kaRqA37Kd6HvJfbm2iZhi

[Jed Carty]

That wasn't a suggestion to use those colors, I was just saying that you set the colors used when you use the widget like this:

<$ProgressBar filters='[[SomeFilter]],[[SomeOtherFilter]]' colors='color1,color2'/>

It doesn't require changing anything in the code. I will update the default colors to something later tonight, and maybe add an option to make vertical bars and maybe side-by-side things.

[Lost Admin]

I really need to stop trying to make jokes in text forums. They just don't translate as well as I hope.

I like the progress bar add-in too.

[Jed Carty]

I have been looking at how to update this plugin and I posted an experimental version here http://ooktech.com/jed/ExampleWikis/BarChart/#Bar%20Chart%20Creator

You can make the charts vertical or horizontal and you can make the sections into multiple bars instead of just a single bar and I made a tool that lets you design your chart and outputs the widget code so you don't have to remember everything. That may be my solution to how complex things get when you start adding options to something like this.

[Danielo Rodríguez]

For some reason vertical does not work on my phone. Only a black small bar is shown. Everything else works fine.

By the way, I do like the original colors. At the end , colors were made for the different likings !

[Jed Carty]

Yeah, the vertical part is a problem, the height needs to be set to a height using a unit other than % for it to display. That is one reason that this is an experimental version.

[@TiddlyTweeter]

Ciao Jed

First: Let me say that is brilliant! Why? Because it both generates the code one needs AND helps people like me understand it. I think its a good tool that balances needed coding well whilst enabling one to get things done.

Thanks for clarifying on the VERTICAL. I too did not understand the need to set the height in units rather than %.

Small Comments:

1 - I think it would be intuitively better to have the radio buttons for right on the right & left on the left. But its not that important.

2 - At least for, me the radio buttons don't clear to nothing if you click around them (previously used turn blue). But maybe that is just a limitation of the underling system rather than anything to do with this. It doesn't stop anything working.

Anyway, I find it really useful. Thank you.
Josiah

[Jed Carty]

There are some updates, mostly to the code side of things but now you can:

* Set the width and height css units separately

* Change how bars are labeled, but there aren't many options yet.

* Use both normal (upright) and inverted (hanging) bar charts as well as charts that start on the right or on the left

* Now something is shown regardless of what you have the height set to, but it may not be correct if you have a small height and are using the stacked mode.

* The chart now uses the full height and width that you give with the appropriate dimensions determined automatically for both width and height

* Maybe something else I forgot

The creator tool is updated, so you can play with that to see how everything works.

I would like to make some sort of annotations for the charts this makes, but I don't have any good ideas about how to do that so I may take a quick look at this again tomorrow and unless I have some specific ideas move the changes to the normal plugin library and be done with this for now.

Josiah,

Good point about left and right, I am not sure why I didn't notice that. As far as the radio buttons go I am not sure what you are referring to, they have been working as expected on both firefox and safari.

The experimental version is still here http://ooktech.com/jed/ExampleWikis/BarChart/

[Thomas Elmiger]

Hi Jed

I think this was mentioned somewhere before: In some cases it might be interesting to have two labels like: label="%" label2="n" where label2 could be placed outside the graphic where necessary (e.g. at the origin or end of the bar, above the bar, …).
Great stuff anyway, I like your configuration tool very much!

All the best!
Thomas

[@TiddlyTweeter]

Ciao Jed

I have been using this a lot. Its a very useful tool.

The ONLY issue I have had is with Labeling. I'm not sure its something the tool itself should get into.

However, I have an example you might want to look at that elucidates the issues a bit ...
 

Excuse all the colours! It makes it overly visually noisy. But I'm using the colors at the moment to visually connect the overview at the start of the table with the individual item lines below it.

At the moment your tool has options for COUNTS & PERCENTAGES.

IF it also could just insert a SINGLE LETTER per measure I could do away with all the excess color.

So, for instance, IF the first bar read "a, b, c, d, e, f, g", rather than have numbers, I could type each letter next to each of the other bar lines (e.g. ORG -> a - ORG, b - NOI etc). Then I could lose all the color noise.

Hope you understanding what I am talking about. Please ask if its unclear.

Whatever, its a great gadget! So, Thank you.

Best wishes
Josiah


For instance, if the first,  

[Jed Carty]

I could add another optional input that is a comma separated list of labels. That would be pretty easy. I am currently in the US though so it will be a week or two at the earliest before I can get to it.

[HC Haase]

This also sound great..
would it be possible to have text instead of a single letter? I think this would make it much more usable.
and it could be so cool if wiki text was accepted. But maybe that is an other level code-work?

My use case:
I am counting categories of stuff in my wiki (e.g. work, academia ...) and want to show a percent bar on the left side of the text/count.
This is how it looks now

if the label could be wiki text, I could have my title, count widget, %bar for each line. That would be very nice (and much quicker and more elegant than using a html table with a progress bar or each category as in the pic below (white colour is not a count, just reaming of total))

[Jed Carty]

I am working on some paid work at the moment, but I am hoping to make it so that you can put in at least simple wikitext as the labels. I will be able to at least add simple strings as labels. Positioning the labels may have to wait until later, I will see how it goes.

[HC Haase]

cool

[HC Haase]

I was playing around with this plugin again.
Could it be possible to just input a number or field reference (with a number) to get the chart? Currently you have to give it a filter counting tiddlers.

I like it to track my progress with my reading