All topics

Creating a curve through div points on a graph

Lucvs

6 months ago

Hey guys,

I have a bit of an unusual issue with my toddle project. I've created a graph where I'll have 7 dots where the positioning is set to style variables that will come from my db, this functionality is working as intended, but I would like to create a curve that runs through these 7 dots.

So far I've tried to make a custom action where I import my 7 point variables and create a SVG bezier curve that should run through thoose 7 points and then set that as innerHTML of the div, but for some reason it seems like it can't find the div?

I've tried doing it both inside and outside of a component.

Does anyone have an idea where I may be going wrong, or another (easier) solution to this?
Max

6 months ago

What does your action look like?
@Max
What does your action look like?
Lucvs

6 months ago

This is what I ended up with
Max

6 months ago

Okay. And how do you pass the element to the function?
@Max
Okay. And how do you pass the element to the function?
Lucvs

6 months ago

As a variable, where I used a toddle formula to get the element by id, then pass that in as one of the arguments to be used
Tod

6 months ago

Great energy @Lucvs! Your continuous contribution to the toddle Community just made you advance to Community Level 4!
Max

6 months ago

- Did you set the ID on the div you want to find?
- can you add a console log in the action for the element and see if it is defined
- try not to store it in a variable (I'm not sure this is possible...) and use the formula directly on the input of the action
Lucvs

6 months ago

Yep, I did set the ID.

I looked at the console before, and I keep getting some variations of it not being defined or null.

What would it look like if it wasn't stored as a variable?
@Lucvs
Yep, I did set the ID.

I looked at the console before, and I keep getting some variations of it not being defined or null.

What would it look like if it wasn't stored as a variable?
Max

6 months ago

You have an fx button at the input of your action, where you attach your variable. Don't attach the variable here, but the get element by ID formula
@Max
You have an fx button at the input of your action, where you attach your variable. Don't attach the variable here, but the get element by ID formula
Lucvs

6 months ago

Seems like it can't find it still
Max

6 months ago

Ah, now you changed your custom action. It will not work that way.
The custom action was fine
Can you share the link to your project? Then I can have a look
@Max
Can you share the link to your project? Then I can have a look
Lucvs

6 months ago

Yep https://toddle.dev/projects/plum_cliegg_lars_distinctive__alrus/
Much appreciated
Max

6 months ago

Can you publish your project? Then I can clone it and make the adjustments
@Max
Can you publish your project? Then I can clone it and make the adjustments
Lucvs

6 months ago

Done
Max

6 months ago

Here is a working version: https://toddle.dev/projects/randomtests/branches/svg/components/astropage?leftpanel=design&rightpanel=attributes&canvas-width=800&canvas-height=800&mode=design

The issue is that you call that action on load of the page. That means that it is called once the page is loaded. But that does not mean that all elements have been rendered. This probably works on the live/preview site, but not the editor, as it is slower. Here, I added a 1000ms delay, which is a dirty workaround. What I would do is create a component for your chart and call that action inside that component on load. It does not have to be / should not be on page level
@Max
Here is a working version: https://toddle.dev/projects/randomtests/branches/svg/components/astropage?leftpanel=design&rightpanel=attributes&canvas-width=800&canvas-height=800&mode=design

The issue is that you call that action on load of the page. That means that it is called once the page is loaded. But that does not mean that all elements have been rendered. This probably works on the live/preview site, but not the editor, as it is slower. Here, I added a 1000ms delay, which is a dirty workaround. What I would do is create a component for your chart and call that action inside that component on load. It does not have to be / should not be on page level
Lucvs

6 months ago

Thanks a lot Max!

So I would trigger the action when the component loads, or on page load?
Max

6 months ago

In the component on load.
@Max
In the component on load.
Lucvs

6 months ago

Ok, I tried doing this inside a component before, but it still wouldn't render. Wouldn't this suggest that I'd still have to use some delay to get it to render properly?
@Lucvs
Ok, I tried doing this inside a component before, but it still wouldn't render. Wouldn't this suggest that I'd still have to use some delay to get it to render properly?
Max

6 months ago

I am pretty sure this should work within a component, but of course I might be wrong. Test and see 😊
*without sleep
@Max
I am pretty sure this should work within a component, but of course I might be wrong. Test and see 😊
Lucvs

6 months ago

Alright, thanks a lot for your help 🙂

Creating a curve through div points on a graph

Lucvs

Max

Lucvs

Max

Lucvs

Tod

Max

Lucvs

Max

Lucvs

Max

Lucvs

Max

Lucvs

Max

Lucvs

Max

Lucvs

Max

Lucvs