Non zerobased bar chart

[netil]

Description

Provide new way to draw bar shape.
Specifying the set of start and end data, bar will be drawn for indicated data range, not from the x axis as a baseline.

The dataset will be as:

bb.generate({
	data: {
          columns: [
            ["data1", 
                // specify start/end point
                [10, 140],
                [220, 450],
                [310, 780],
                [270, 770],

               // for numeric value, will work as zerobased as now.
               500,
            ]
        ],
        type: "bar",
    },
});

[brianjenkins94]

This would also be useful for making gantt charts and waterfalls.

[ajaxlab]

@brianjenkins94 We're working for this now 😄

[brianjenkins94]

I was able to accomplish something close enough to a gantt/waterfall using:

const groups = ["offset", "#1111", "#2222", "#3333", "#4444", "#5555", "#6666", "#7777"];

const chart = bb.generate({
	"data": {
		"type": "bar",
		"json": [{"dateCreated":1633113787000,"ticketNumber":"123456","label":"123456","assignee":"John Doe","account":"Acme Corp.","offset":1637016124550,"#1111":93073770,"#2222":95986930,"#3333":58013510,"#4444":4297670,"#5555":1108100,"#6666":5558250,"#7777":502230}],
		"keys": {
			"x": "label",
			"value": groups
		},
		"colors": {
			"offset": "transparent"
		},
		"groups": [groups],
		"order": null
	},
	"axis": {
		"x": {
			"type": "category"
		},
		"y": {
			"min": new Date().setMonth(new Date().getMonth() - 1),
			"max": new Date().getTime(),
			"padding": {
				"top": 0,
				"bottom": 0
			},
			"tick": {
				"format": function(index, categoryName) {
					return new Date(index).toLocaleDateString("en-US");
				}
			}
		},
		"rotated": true
	},
	"legend": {
		"hide": true
	}
});

But it required calculating the offset from the epoch and manually specifying the min/max on the window.

I can put together a codepen if there's interest.

[brianjenkins94]

Do you have to set something to get this feature to work? How do you tell it to expect values to be non-zero-based?

Edit: Oh you pass in an array instead of a value. 🤦‍♂️