billboard.js 3.1 release: subchart & data loading enhancements!

What’s New?

Contain inline css props

From this release, some of inline css properties are removed to be set.

  • opacity: 1
  • visibility: “visible”
  • display: “block”
Inlined ‘opacity:1’ (bottom screenshot) removed from the elements(top screenshot).

subchart.init.range

This new option will make to initialize zoom-in indicated subchart range.
Simply indicate the range, and the initial chart will be rendered as indicated range value.

subchart: {
enabled: true,
init: {
// specify initial range domain selection
range: [2, 4]
}
}
Example screenshot of initial subchart range.

subchart.showHandle

Subchart’s selection range is controlled by drag interaction. The selected area is shown during the drag interaction, letting user to recognize easily the amount of area.

subchart: {
show: true,
showHandle: true
}

Data load append option

Dynamic data loading is one of the most used functionality.

// Given chart
const chart = bb.generate({
data: {
x: "x",
xFormat: "%Y-%m-%dT%H:%M:%S",
columns: [
["x", "2021-01-03T03:00:00", "2021-01-04T12:00:00", "2021-01-05T21:00:00"],
["data1", 36, 30, 24]
]
},
axis: {
x: {
type: "timeseries"
}
}
});

// load new data
chart.load({
columns: [
["x", "2021-01-13T08:00:00", "2021-01-15T08:00:00"],
["data1", 37, 40]
]
1});
When .load() is called, the current dataset is replaced by the new loaded data.
// load new data by appending it.
chart.load({
columns: [
// when existing chart has `x` value, should provide
// corresponding 'x' value.
// with 'append' option, the 'data1' will have `[36,30,24,37, 40]`.
["x", "2021-01-13T08:00:00", "2021-01-15T08:00:00"],
["data1", 37, 40]
],
append: true
});
With ‘append’ option, will append the new dataset to the current.

data.onshown/onhidden

These new option will give an alternative option to trigger some connected tasks during dataseries’ visibility changes.

data: {
onshown: function(ids) {
console.log("data shown:", ids);
},
onhidden: function(ids) {
console.log("data hidden:", ids);
},

}

data.labels.backgroundColors

This enhancement will make to render data label text background’s color with very simple effort.

data: {
labels: {
backgroundColors: "yellow",
// or specify colors for each dataseries.
backgroundColors: {
data1: "green",
data2: "rgba(0, 0, 0, 0.2)"
}
}
}

What’s Next?

The planned next release will be September. As always, we will be working to implement and enhance new functionality to bring ease data visualization on web platform.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store