billboard.js icon indicating copy to clipboard operation
billboard.js copied to clipboard

Updating JSON keys with `.config()` does not update charts

Open NoiSek opened this issue 5 years ago • 4 comments

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 avatar Feb 12 '19 18:02 NoiSek

@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);

netil avatar Feb 13 '19 02:02 netil

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).

NoiSek avatar Feb 14 '19 17:02 NoiSek

@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!

angajime avatar Oct 29 '19 09:10 angajime

Hi @angajime, updated the missing definition for .load() api. Thanks for the comments.

netil avatar Nov 29 '19 01:11 netil