🏠 back to Observable

Dynamic modify data

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?

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

Excellent, this was exactly what I was looking for.

Thanks

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

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

1 Like

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?

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