weather channel script incorporation

98 views
Skip to first unread message

shown

unread,
Jul 10, 2012, 5:15:55 PM7/10/12
to google-visua...@googlegroups.com
I can't seem to integrate this Weather Channel script into any Google page.

<div id="wx_module_1742">
   <a href="http://www.weather.com/weather/local/98501">98501 (Olympia Weather Forecast, WA)</a>
</div>

<script type="text/javascript">

   /* Locations can be edited manually by updating 'wx_locID' below.  Please also update */
   /* the location name and link in the above div (wx_module) to reflect any changes made. */
   var wx_locID = '98501';

   /* If you are editing locations manually and are adding multiple modules to one page, each */
   /* module must have a unique div id.  Please append a unique # to the div above, as well */
   /* as the one referenced just below.  If you use the builder to create individual modules  */
   /* you will not need to edit these parameters. */
   var wx_targetDiv = 'wx_module_1742';

   /* Please do not change the configuration value [wx_config] manually - your module */
   /* will no longer function if you do.  If at any time you wish to modify this */
   /* configuration please use the graphical configuration tool found at */
   var wx_config='SZ=728x90*WX=FHW*LNK=SSNL*UNT=F*BGI=seasonal2*MAP=null|null*DN=ggec.co*TIER=0*PID=1321037092*MD5=df13eede52f7dfbd9177391832184da2';

   document.write('<scr'+'ipt src="'+document.location.protocol+'//wow.weather.com/weather/wow/module/'+wx_locID+'?config='+wx_config+'&proto='+document.location.protocol+'&target='+wx_targetDiv+'"></scr'+'ipt>');  
</script>

shown

unread,
Jul 11, 2012, 2:07:04 PM7/11/12
to google-visua...@googlegroups.com
Here's my attempt at it with pie chart.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
   /* Locations can be edited manually by updating 'wx_locID' below.  Please also update */
   /* the location name and link in the above div (wx_module) to reflect any changes made. */
   var wx_locID = '98501';

   /* If you are editing locations manually and are adding multiple modules to one page, each */
   /* module must have a unique div id.  Please append a unique # to the div above, as well */
   /* as the one referenced just below.  If you use the builder to create individual modules  */
   /* you will not need to edit these parameters. */
   var wx_targetDiv = 'wx_module_1232';

   /* Please do not change the configuration value [wx_config] manually - your module */
   /* will no longer function if you do.  If at any time you wish to modify this */
   /* configuration please use the graphical configuration tool found at */
   var wx_config='SZ=180x150*WX=FHW*LNK=SSNL*UNT=F*BGI=boat*MAP=null|null*DN=sunminer.net*TIER=0*PID=1321037092*MD5=123f1e22777f0c5289a4e21d5737f728';

   document.write('<scr'+'ipt src="'+document.location.protocol+'//wow.weather.com/weather/wow/module/'+wx_locID+'?config='+wx_config+'&proto='+document.location.protocol+'&target='+wx_targetDiv+'"></scr'+'ipt>');  
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
<div id="wx_module_1232">
   <a href="http://www.weather.com/weather/local/98501">Olympia Weather Forecast, WA (98501)</a>
</div>
  </body>
</html>

asgallant

unread,
Jul 11, 2012, 2:51:25 PM7/11/12
to google-visua...@googlegroups.com
I'm not sure why it doesn't work, but I made a work-around using jQuery's AJAX getScript method: http://jsfiddle.net/asgallant/5ENLu/ 

shown

unread,
Jul 11, 2012, 3:35:42 PM7/11/12
to google-visua...@googlegroups.com
The script still does not work for me when plugged into the html file.  Is there some import I'm missing?

asgallant

unread,
Jul 11, 2012, 4:43:17 PM7/11/12
to google-visua...@googlegroups.com
You are probably missing the jQuery library.  Put this in your HTML file, above the other javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>​ 

shown

unread,
Jul 11, 2012, 5:06:25 PM7/11/12
to google-visua...@googlegroups.com
It effectively increased the load time to no avail.  
new 3.html

asgallant

unread,
Jul 11, 2012, 5:52:55 PM7/11/12
to google-visua...@googlegroups.com
There are two things here:

1) You left the trailing </script> tag at the end of the url, it should be this exactly:
$.getScript(document.location.protocol + '//wow.weather.com/weather/wow/module/' + wx_locID + '?config=' + wx_config + '&proto=' + document.location.protocol + '&target=' + wx_targetDiv); 

2) The loading time has something to do with making the request from a secure connection (https); I get a 503 error when I try that.  You might want to try asking the weather channel's API support team or on StackOverflow

shown

unread,
Jul 15, 2012, 2:43:01 AM7/15/12
to google-visua...@googlegroups.com
I have yet to hear from either.  I still can not recreate jsfiddle's results.

asgallant

unread,
Jul 16, 2012, 3:43:23 PM7/16/12
to google-visua...@googlegroups.com
I wish I could help you more, but this is out of my realm of expertise.

shown

unread,
Jul 16, 2012, 4:08:10 PM7/16/12
to google-visua...@googlegroups.com
Can you get the JSFiddle results outside of the editor?  If so, could you post?

asgallant

unread,
Jul 16, 2012, 4:27:17 PM7/16/12
to google-visua...@googlegroups.com
Are you running from a secure server?  As I said, the request only fails when using https; you should be able to make it work by using this:

$.getScript('http://wow.weather.com/weather/wow/module/' + wx_locID + '?config=' + wx_config + '&proto=' + document.location.protocol + '&target=' + wx_targetDiv);  

Make the change, and open the file locally on your pc - it should work.

The problem is that if you are running on a secure server, the browser will (or should, if configured properly) throw a security-related error.  Depending on the browser settings, the page will either display correctly or bomb (IIRC, more stringent security settings will cause it to stop running scripts when a non-secure connection is established).
Reply all
Reply to author
Forward
0 new messages