billboard.js
billboard.js copied to clipboard
Updating JSON keys with `.config()` does not update charts
Description
Using .config()
to update data.keys.value
doesn't re-render / alter charts properly, which means that if you have data like this you cannot toggle between displaying different sets of data without loading and unloading the same set with .load()
to trigger a repaint:
[{
'timestamp': <timestamp>,
'some_y': 1.0,
'some_y2': 50,
'alternate_y': 10000,
'alternate_y2': 500,
'tertiary_y': 0.00004,
'tertiary_y2': 0.01
}]
Expected Behavior
Using .config()
to update data configuration should redraw the data as necessary, updating labels and axes.
Actual Behavior
Using .config()
to update data configuration does cause the chart to redraw, but the only change that occurs is the Y axis scales become distorted. Labels, values, and the data shown remains the same.
Steps to check or reproduce
See: https://codesandbox.io/s/8zz688847l
@NoiSek, .config()
is for minor options changes only.
In this case use .load()
instead.
var jsonData = [
{
timestamp: 1,
some_y: 1.0,
some_y2: 50,
alternate_y: 10000,
alternate_y2: 500,
tertiary_y: 0.00004,
tertiary_y2: 0.01
},
{
timestamp: 2,
some_y: 1.4,
some_y2: 59,
alternate_y: 11000,
alternate_y2: 480,
tertiary_y: 0.0002,
tertiary_y2: 0.014
}
];
var chart = bb.generate({
data: {
x: "timestamp",
json: jsonData,
...
};
setTimeout(() => {
chart.load({
json: jsonData,
keys: {
value: ["alternate_y", "alternate_y2"]
},
unload: ["some_y", "some_y2"]
});
}, 2000);
That's the solution I went with before filing this, and I don't disagree that it's perhaps the better approach to unload and reload data rather than changing keys.
If that functionality was never intended to work, however, then the documents should be more clear that it will not function as expected (or just that there are caveats to it's usage).
@netil I am trying to add new keys dynamically but the type chart.d.ts
is not including a keys
parameter. Even using ts-ignore, I can't use .load()
to update the keys. Any suggestion about this? Thanks!
Hi @angajime, updated the missing definition for .load()
api. Thanks for the comments.