Forum Discussion
HTML Weather Widget
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','weatherwidget-io-js');
</script>
again, when I put this into my report it only shows "NEW YORK WEATHER" and nothing else.
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
3 Replies
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>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.
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
