annotated timeline no longer working after at least a year of working as intended (coded in Perl) - very frustrating

69 views
Skip to first unread message

Craig

unread,
Aug 2, 2017, 9:22:59 AM8/2/17
to Google Visualization API
$progstr = "<html>  
                 <head>                      
                   <script type='text/javascript' src='http://www.google.com/jsapi'></script>
                  
                   <script type='text/javascript'>
                     google.load('visualization', '1', {'packages':['annotatedtimeline']});
                     google.setOnLoadCallback(drawChart);
      
                     function drawChart() {        
                       var data = new google.visualization.DataTable();        
                       data.addColumn('date', 'Date');
                       data.addColumn('number', '$iname');
                       data.addColumn('string', 'title1');        
                       data.addColumn('string', 'text1');";
                      
   $progstr .= "\n                       data.addRows([";

   # Do middle section.  
         
   $max = -10000000;
   $min = 10000000;
   $data = '';
   $i = 0;
   $j = 0;                
   foreach $perln (@perdata) { # Load behavior/performance data.
      if ($oemind ne 'm') {                  
        ($yr, $state, $stride, $invest, $dem) = split (':',$perln);
      } else {
           if ($i == 0) {
             $i = 1;
             next;
           }                      
           ($yr, $valx, $ratx, $state, $stride, $wtdstri) = split (':',$perln);
         }   
     
      if ($oemind eq 'o' || $oemind eq 'e') {
        if ($ditem == 1) {
          $data = $state;
        } elsif ($ditem == 2) {
            $data = $stride;
          } else {
              $data = $invest;
            }
      } else {
          if ($ditem == 1) {
            $data = $valx;
          } elsif ($ditem == 2) {
              $data = $ratx;
            } elsif ($ditem == 3) {
                $data = $state;
              } elsif ($ditem == 4) {
                  $data = $stride;
                } else {
                    $data = $wtdstri;
                  }
        } # Measure. 
      if ( (($oemind eq 'o' || $oemind eq 'e') && $ditem < 3) || ($oemind eq 'm' && $ditem > 2) ) {
        $data = 100 * $data;     
        $data = sprintf("%.1f",$data);             
      }
      # Need to set range for stride, investment, and wt stride.
      if ( (($oemind eq 'o' || $oemind eq 'e') && $ditem > 1) || ($oemind eq 'm' && $ditem > 3) ) {
        if ($data > $max) {
          $max = $data;
        }
        if ($data < $min) {
          $min = $data;
        }
      }
 
      $datex = $yr . ',6,1';

      $progstrs{$datex} = '                         [new Date(' . $yr . ',6,1), '; # Month indicator seems to begin with 0 in the Google API example.
      $progstrs{$datex} .= $data . ', undefined, undefined],';
      if ($j == 0) { # Get first performance indicator value for below.
        $defrst = $data;
        $j = 1;
      }     
      # Save this part to add to any marks below - same year = same values.
      $progstrs2{$datex} = $data . ', undefined, undefined';                  
   }
   $progstrs{$datex} = substr($progstrs{$datex},0,length($progstrs{$datex})-1); # Get rid of last comma.

   if ( (($oemind eq 'o' || $oemind eq 'e') && $ditem == 1) || ($oemind eq 'm' && $ditem == 3) ) { # State range.       
     $max = 100;       
   }
 
   $j = 0;
   foreach $tln (@tlnmrks) { # Interrogate marks and integrate the mark into the timeline.
     if (index(lc($tln),'analysis:') > -1) {
       last;
     }
     ($datex,$titlex,$textx) = split (':',$tln);
     $datex =~ tr/ //ds; # Eliminate spaces.
         
     $i = 0; # New date indicator.
     if (index($datex,',') > -1) { # Date of mark includes month and day -> new entry.
       ($yr,$mn,$da) = split (',',$datex);
       $mn = $mn - 1; # Month adjustment.
       $datex = $yr . ',' . $mn . ',' . $da;      
       $i = 1;         
     } else {
         $yr = $datex; # Marker date is an existing data year.
         $datex = $yr . ',6,1';         
       }
     $odatex = $yr . ',6,1'; # Date of existing behavior/performance record.
 
     # Add mark information to the right line.
     @sstrs = ();
     if (exists $progstrs2{$odatex}) {
       @sstrs = split (',', $progstrs2{$odatex});
     } else {
         if ($j) { 
           $sstrs[0] = $delast; # Been through once - take previous value.
         } else {
             $sstrs[0] = $defrst; # First time through - take first above.
           }
       }
    
     $sstrs[1] = "'" . $titlex . "'";
     $sstrs[2] = "'" . $textx . "'";
    
     $progstrs2{$datex} = join (',', @sstrs);
     # Dates are the same for an existing year.
    
     $progstrs{$datex} = '                         [new Date(' . $datex . '), ' . $progstrs2{$datex} . '],';
     $delast = $sstrs[0]; # Save last performance indicator value.
     $j = 1; # Been through once.           
   }

   # Sort the hash by the index into an array and add it to the program str.
   foreach $key (sort (keys(%progstrs))) { 
     $progstr .= $progstrs{$key};
   }
   $progstr = substr($progstr,0,length($progstr)-1) . ']'; # Get rid of last comma.

   # Add the last part.
   my @colors = ();
   $colors[0] = "#$banrcolr";
  
   $progstr .= "        ]);
 
                       var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));                      
                       chart.draw(data, {displayAnnotations: true, displayZoomButtons: false, allValuesSuffix: '$suf', fill: 40, thickness: 1, colors: ".@colors.", displayRangeSelector: false});      
                     }    
                     </script>  
                   </head>   
                   <body>     
                    
                     <div id='chart_div' style='width: 800px; height: 380px;'></div>
  
                   </body>
               </html>";

Daniel LaLiberte

unread,
Aug 2, 2017, 9:32:56 AM8/2/17
to Google Visualization API
The flash-based AnnotatedTimeline chart has long been deprecated, and is now replaced in the newer versions with the AnnotationChart.  Flash is generally going away as well, so you'd have escalating problems until you switch.  You are also using the old jsapi based loader.  Try upgrading to the new loader, and 'current' version of the library, and the AnnotatedTimeline should automatically switch over to the AnnotationChart.  See  https://developers.google.com/chart/interactive/docs/basic_load_libs#update-library-loader-code

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c3bbff6d-9f29-418c-9d72-006a180ec4d7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Craig

unread,
Aug 2, 2017, 9:57:06 AM8/2/17
to Google Visualization API

Thanks for responding sir.  It still does not work.  Its probably me.    I have a demo of an app that this is embedded in and I need to get it to work.   I appreciate your help.   What I just tried follows.

$progstr = "<html>  
                 <head>                      
                   <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
                  
                   <script type='text/javascript'>
                     google.load('current', {'packages':['annotatedtimeline']});

Daniel LaLiberte

unread,
Aug 2, 2017, 10:01:51 AM8/2/17
to Google Visualization API
You must also change your google.load and google.setOnLoadCallback calls to google.charts.load and google.charts.setOnLoadCallback.  Check the updating instructions again.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/48d57210-5f1c-4bfe-b4d5-f2d2eb456687%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Craig

unread,
Aug 2, 2017, 10:44:56 AM8/2/17
to Google Visualization API
I apologize for missing that.   I am accessing the timeline now but the colors parameter generates a 'Unable to get property 'color' of undefined or null reference'.   I get this with double quotes and 1 front dot or single quotes and 4 or 1 front dots.  The double quotes case with 4 front dots generates a perl interpreter syntax error.     
                      
                       chart.draw(data, {displayAnnotations: true, displayZoomButtons: false, allValuesSuffix: '$suf', fill: 40, thickness: 1, colors:'....@colors.', displayRangeSelector: false});      

Craig

unread,
Aug 2, 2017, 10:48:13 AM8/2/17
to Google Visualization API
I apologize for missing that.   I am accessing the timeline now but the colors parameter generates a 'Unable to get property 'color' of undefined or null reference'.   I get this with double quotes and 1 front dot or single quotes and 4 or 1 front dots.  The double quotes case with 4 front dots generates a perl interpreter syntax error.     
                      
                       chart.draw(data, {displayAnnotations: true, displayZoomButtons: false, allValuesSuffix: '$suf', fill: 40, thickness: 1, colors:'....@colors.', displayRangeSelector: false});      

Daniel LaLiberte

unread,
Aug 2, 2017, 10:57:08 AM8/2/17
to Google Visualization API
Colors option for AnnotationChart must be an array of strings.  It appears your colors value is just a string, and perhaps that worked for AnnotatedTimeline, but it wasn't documented that way.  Try changing to an array like this:  colors: ['red', 'blue']

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/438ef1c8-9f5d-4120-a59f-2cb41224fb83%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Craig

unread,
Aug 2, 2017, 11:18:14 AM8/2/17
to Google Visualization API
Again, thanks for all the help.   The colors came through this time with either ['@colors'] or ['$color[0]'], but the display is very different than what is was.  Following is how it did look.


Now this link shows what it looks like (use IE).   All of this is pretty well incorrect.






Auto Generated Inline Image 1

Daniel LaLiberte

unread,
Aug 2, 2017, 11:42:04 AM8/2/17
to Google Visualization API
It looks like your data values are actually different.  Can you display a Table of data instead to see what is being sent?  Perhaps your date formatted values are different from what is expected.  The vertical axis also looks very wrong, but again, what do your data values look like?  Are they strings with '%' in them?  What other options are you using that could change the format?

There could well be some undocumented features of the AnnotatedTimeline that the AnnotationChart is not backward compatible with.  We might make some more changes to increase the compatibility, depending on what the issues are.

It would be best if I could look at the actual web page that shows what you are seeing.  That way I can look at the generated JavaScript, rather than try to guess what is happening from the perl code.


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/78b7b218-eac0-4b3f-9103-e1a45da9678f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Craig

unread,
Aug 2, 2017, 12:16:37 PM8/2/17
to Google Visualization API
Following is the HTML file generated by the Perl program including the data rows and annotations.   The file is executed in the div/iframe following the file output in the Perl code.   I include this code after the generated file.   I hope this is what you were asking for.

<html>  

                 <head>                      

                   <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>

                  

                   <script type='text/javascript'>

                     google.charts.load('current', {'packages':['annotatedtimeline']});

                     google.charts.setOnLoadCallback(drawChart);

      

                     function drawChart() {        

                       var data = new google.visualization.DataTable();        

                       data.addColumn('date', 'Date');

                       data.addColumn('number', 'State');

                       data.addColumn('string', 'title1');        

                       data.addColumn('string', 'text1');

                       data.addRows([                         [new Date(2001,6,1), 64.5, undefined, undefined],                         [new Date(2003,0,15), 77.3,'Insurance For All','The Universal Coverage Act of 2003 is proposed.'],                         [new Date(2003,2,15), 77.3,'Insurance Finally','The Universal Coverage Act of 2003 passes.'],                         [new Date(2003,6,1), 77.3,'Funding Approved','The Universal Coverage Act funding is allocated.'],                         [new Date(2003,8,15), 77.3,'Funding Begins','The Universal Coverage Act funding of 2003 begins.'],                         [new Date(2005,6,1), 78.6, undefined, undefined],                         [new Date(2007,6,1), 78.6, undefined, undefined],                         [new Date(2009,6,1), 78.6, undefined, undefined],                         [new Date(2011,6,1), 78.6, undefined, undefined]        ]);

 

                       var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));                      

                       chart.draw(data, {displayAnnotations: true, displayZoomButtons: false, allValuesSuffix: '%', fill: 40, thickness: 1, colors:['#809FFF'], displayRangeSelector: false});      

                     }    

                     </script>  

                   </head>   

                   <body>     

                    

                     <div id='chart_div' style='width: 800px; height: 380px;'></div>

  

                   </body>

               </html>



print "     
    <form name='tabcontrol' style='margin-top:0'>         
       <DIV ID='container$i' $deStyl><iframe id='tabiframe' src='$in' width='840px' height='430px' BORDER=0 FRAMEBORDER=0 FRAMESPACING=0></iframe></DIV>
    </form>\n";

Daniel LaLiberte

unread,
Aug 2, 2017, 12:40:24 PM8/2/17
to Google Visualization API
The allValuesSuffix options is ambiguous about what happens with the '%' character.  It has a special meaning when used in a number format, which is to calculate the percentage for the value, as well as adding the percent character.  I'm not sure whether we should change the behavior now (perhaps this can be considered a bug), but you can work around this side effect of appending the '%' by preceding it with the formatting quote character, which is a single quote.  So in JavaScript, if you use double quotes around your suffix, it would be: allValuesSuffix: "'%" but if you use single quotes around the suffix, you have to escape single quote, like this:  allValuesSuffix: '\'%'.


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/1f4c6d0d-31f8-4fea-b5ea-6081fe41c0e0%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Craig

unread,
Aug 2, 2017, 1:05:51 PM8/2/17
to Google Visualization API
The double quote option worked on the %, but the annotations are still incorrect.    I get undefined text along the timeline and next to the annotations that are positioned below the graph.  And the interactivity of the annotations does not work.


Daniel LaLiberte

unread,
Aug 2, 2017, 2:05:01 PM8/2/17
to Google Visualization API
I don't see what undefined text you are referring to.  Here is a jsfiddle of the code you posted previously (with the fix for the % char):  https://jsfiddle.net/dlaliberte/73bp7wj3/  In the image you linked to previously, the annotations look correct.

What interactivity are you referring to?  In Chrome, everything looks fine to me, and clicking on annotations in the chart highlights the corresponding annotation in the table.  Perhaps there is some problem with IE.  Which version are you using?

On Wed, Aug 2, 2017 at 1:05 PM, 'Craig' via Google Visualization API <google-visua...@googlegroups.com> wrote:
The double quote option worked on the %, but the annotations are still incorrect.    I get undefined text along the timeline and next to the annotations that are positioned below the graph.  And the interactivity of the annotations does not work.


--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/d24717e4-bfc1-451e-87e0-9bbebee25277%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Craig

unread,
Aug 2, 2017, 2:24:13 PM8/2/17
to Google Visualization API
The link below shows the undefined tag along the timeline where A, B, etc. should be, annotations under the chart with the word undefined next to each annotation, and lack of annotation highlighting when I click on an annotation.      http://steepusa.no-ip.info/scx/timeline.cgi?tlstr=SKY:e:Health    I'm using the latest version of IE I believe.   The jsfiddle does look good when I bring it up in IE.   


Craig

unread,
Aug 2, 2017, 4:30:18 PM8/2/17
to Google Visualization API
I think the problem is that I'm currently running the information system the timeline is a part of in IE compatibility mode.    I'm doing this because of earlier quotation requirements ( that are no longer required ) when passing Perl variables into CSS and JavaScript.   When I take the timeline out of compatibility mode, the timeline works as it does in jsfiddle.    The whole application comprises about 200 modules.    They all work very well in compatibility mode.   The original timeline worked as intended in compatibility mode.   Although I intend to transition out of compatibility mode, it will take some coding and retesting time.  What can I do now?   Do I have any alternative short of canceling the upcoming demonstration?   Its taken some time to get this demonstration opportunity.   Why won't the timeline work in the IE compatibility mode? 

Daniel LaLiberte

unread,
Aug 2, 2017, 4:40:54 PM8/2/17
to Google Visualization API
I don't know what the issues are with IE compatibility mode, and I don't have an easy way to test this.   If you could capture an image of what you are seeing, that might help, but it is unlikely.

Maybe you can just put this chart in its own iframe to isolate it, assuming you can turn off the IE compatibility mode for that iframe.

You might try simplifying the chart even more.  Remove colors and allValuesSuffix options, since they cause some processing for security that might be problematic.

On Wed, Aug 2, 2017 at 4:30 PM, 'Craig' via Google Visualization API <google-visua...@googlegroups.com> wrote:
I think the problem is that I'm currently running the information system the timeline is a part of in IE compatibility mode.    I'm doing this because of earlier quotation requirements ( that are no longer required ) when passing Perl variables into CSS and JavaScript.   When I take the timeline out of compatibility mode, the timeline works as it does in jsfiddle.    The whole application comprises about 200 modules.    They all work very well in compatibility mode.   The original timeline worked as intended in compatibility mode.   Although I intend to transition out of compatibility mode, it will take some coding and retesting time.  What can I do now?   Do I have any alternative short of canceling the upcoming demonstration?   Its taken some time to get this demonstration opportunity.   Why won't the timeline work in the IE compatibility mode? 

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/1f24c6c2-a500-4ed2-b938-ba18bea5b2cf%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Craig

unread,
Aug 2, 2017, 5:13:13 PM8/2/17
to Google Visualization API
Daniel, I found a way to slip out of compatibility mode for the timeline using a meta tag and back in when I exit.   All is well for the moment.   Thank you very much for your help.   I really appreciate IT.

Reply all
Reply to author
Forward
0 new messages