HTML Weather Widget

[exodusme]

Hello, I am trying to add a weather widget like the one contained on weatherwidget.io

I am using the HTML Content open source app in PowerBI. I have code setup in a column from a table I created. It looks like it is pulling something from the website as it says the location and weather in the box where the widget should be, but none of the widget/image is visible. I am hoping someone could instruct me on either another weather widget I could use to load into my powerbi report or if you could get the current one to work. Below is the code I copied from the websites.

<a class="weatherwidget-io" href="https://forecast7.com/en/40d71n74d01/new-york/" data-label_1="NEW YORK" data-label_2="WEATHER" data-theme="original" >NEW YORK WEATHER</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script',...');
</script>

again, when I put this into my report it only shows "NEW YORK WEATHER" and nothing else.

[exodusme]

Also tried the D3Js visual, but that isn't working either. I am guessing there is something fundamentally wrong with what I am doing. Any help is appreciated.

[Anonymous · Accepted solution]

Hi @exodusme,

In fact, power bi does not support work with live widget in report pages.  Normally power bi will limit these types of interactions from visual to directly invoke external/network resources and render the visual graph/contents due to security or performance reasons.

Power BI Security - Power BI | Microsoft Learn

In my opinion, I'd like to suggest you move these interaction to getting data steps.

For example:

You can add a new table to getting data from the weather-related API to get correspond weather information which update daily. Then you can use script-based visuals(R, Python) to be generate correspond weather visualization.

Regards,

Xiaoxin Sheng

[exodusme]

Also trying the widget on tomorrow.io and same thing is happening. it is just displaying the text in the "alt=" section

<script>
(function(d, s, id) {
if (d.getElementById(id)) {
if (window.__TOMORROW__) {
window.__TOMORROW__.renderWidget();
}
return;
}
const fjs = d.getElementsByTagName(s)[0];
const js = d.createElement(s);
js.id = id;
js.src="https://www.tomorrow.io/v1/widget/sdk/sdk.bundle.min.js";

fjs.parentNode.insertBefore(js, fjs);
})(document, 'script', 'tomorrow-sdk');
</script>

<div class="tomorrow"
data-location-id="111297"
data-language="EN"
data-unit-system="IMPERIAL"
data-skin="light"
data-widget-type="upcoming"
style="padding-bottom:22px;position:relative;"
>
<a
href="https://www.tomorrow.io/weather-api/"
rel="nofollow noopener noreferrer"
target="_blank"
style="position: absolute; bottom: 0; transform: translateX(-50%); left: 50%;"
>
<img
alt="Powered by the Tomorrow.io Weather API"
src="https://weather-website-client.tomorrow.io/img/powered-by.svg"
width="250"
height="18"
/>
</a>
</div>