Streaming live at 10am (PST)

Javascript/ HTML code for dynamic changes to iframe


#1

Hi,

I want to embed some different currency charts on my page which depend on the currency codes I have in my current CMS fields. Unfortunately I can't reference the charts using the currency codes directly as I've had to create them myself through highcharts (so they have a mixture of 7 random characters which are not associated with any references in the collection currently).

I wanted to see if there is a way I could do this through conditional IF statements in Javascript/ HTML on the page to build the reference list rather than reuploading the items again. Forgive me if this post seems a little "amateur hour".

There will be over 20 different charts, but as an example, here are 3 different HTML embeded charts I would need to set a reference:

The AUD chart div id = 'uminhun'

The EUR chart div id= 'abydihu'

The USD chart div id = 'ogyhaty'

Could I put some Javascript in the body of the page (I realise the code is not there)

If Currency1 = USD { a = 'ogyhaty'}

else if Curency1 = EUR { a = 'abydihu'}

else if Currency 1 = AUD { a = 'uminhun'}

Could I change the references in the first embed chart to something like:

<div id='highcharts-**(var = a)'**><script src='//cloud.highcharts.com/inject/**(var = a)**' defer='defer'></script></div>

Really appreciate some help with my amateur approach!

Here's the Preview Link - go to Imports Template

Example Profile Link On Live Site


#2

Welcome to the Webflow forum!

Could you please edit and provide ALL the necessary details in your post including the project read-only link and published link so we can take a look at your site/issue?

Hope to hear from you soon. Thanks!


#3

Thanks Samliew - apologies, I have updated now.


#4

Try this


#5

Hey - thanks for getting back so quickly. It doesn't seem to be working currently. I've copied it and tried a few other options but the chart doesn't show up on the site now - on the published version I've tried it on the first 2 charts.

For reference, code used is:


#6

You have an additional ), breaking the entire script.


#7

Ok, I'm sorry for how bad I'm being with this but where? I swear it's an exact match to your code... To me it doesn't look like there's an extra ")"?


#8

Must be exact for ALL code snippets


#9

It's working now! I deleted the column that contained the original code and copied the exact code from above and it's working perfectly.

Thank you so much for the help on this, I really really appreciate it! :grinning:


#10

Ok... so hopefully final question. I can't run the script in the 3 different sections of the chart - it only appears in the first. I've tried thinks like changing:
var country --> var county2
and changing a --> b

Do you have suggestions of what I could include or take out to run this script in the 3 separate areas?


#11

You don't need to change the script. Just change the purple dynamic variable.


#12

Hey, so I have changed the 3 fields in my list that are dependent on 3 currency values. However, when I have two of the same currencies in the page then the charts don't appear

i.e

Example1: http://www.tradeaccelerator.co.uk/import/import-margarine-and-other-edible-animal-or-vegetable-fats-or-oils
Chart1 = ImpCountry1Currency = EUR (Chart shows)
Chart2 = ImpCountry2Currency = EUR (Chart doesn't show)
Chart3 = ImpCountry3Currency = EUR (Chart doesn't show)

Example2: http://www.tradeaccelerator.co.uk/import/import-vegetable-waxes-beeswax-and-other-insect-waxes
Chart1 = ImpCountry1Currency = EUR (Chart shows)
Chart2 = ImpCountry2Currency = CNY (Chart shows)
Chart3 = ImpCountry3Currency = USD (Chart shows)