🏠 back to Observable

Dynamic modify data

#1

I want to change the data array of a chart (https://observablehq.com/@fplgameweek/fpl-time-lapse) depending on the user that is running my page.

I have an aurelia (similar to react) webpage where I’m inserting my data with this code:

let target = document.getElementById('timelapse').contentDocument;   
const runtime = new Runtime();
runtime.module(notebook, name => {
  if (name == 'chart')
    return new Inspector(target.body);
});

This works great, but the data is the original since I havent changed anything. How can I add my own array to my notebook?

#2

I think you’re looking for module.redefine:

let target = document.getElementById('timelapse').contentDocument;   
const runtime = new Runtime();
const module = runtime.module(notebook, name => {
  if (name == 'chart')
    return new Inspector(target.body);
});
module.redefine('data', [... data goes here ...]);
2 Likes
#3

Excellent, this was exactly what I was looking for.

Thanks

#4

One more question on this. When adding more bars than before I see that I need to modify height. How should this be done?

I can do the same with ‘height’ but this changes only the “outer” height. The graph height is still only showing the top.

In the picture below there should have been 6 bars, only 3 are visible.
image

#5

You’ll need to redefine the n variable, too, which is currently set to 3.

1 Like
#6

That was it! Great forum :slight_smile:

One more question still (on another matter). My font seems to be lost from my original notebook. I get this look in my site:
image
Bold is lost, also the number indicating current year is very small (not visible above). Why is this?

#7

I’m guessing that you’re missing the default styles that are used on observablehq.com. To quote from Downloading and Embedding Notebooks:

The inspector doesn’t include any inline styles, but there is a default stylesheet (see source) if you want it.

Edit: That’s only for the inspector. I’m not sure if the Observable CSS is available somewhere.

Edit 2: The following code, when run inside a cell while on observablehq.com gives you a textarea from which you can copy the CSS:

html`<textarea>${document.querySelector('style').textContent}`
1 Like