Date.js conflict with animation

35 views
Skip to first unread message

Adrian Wade

unread,
Jan 21, 2016, 12:36:38 PM1/21/16
to Google Visualization API
I was working through animation examples to figure out why I couldn't get them to work. I discovered that a data.js include I'd been using is the culprit; 

<script type="text/javascript" src="dev/date.js"></script> 

Removing it gets my animations working and including it seems to break Google Chart animation examples reliably.

Does anyone know why that might be? date.js is useful and it would be nice to keep it.

Daniel LaLiberte

unread,
Jan 21, 2016, 1:11:24 PM1/21/16
to Google Visualization API
Hi Adrian,

So what's in your date.js code?  I would guess it modifies the JS built-in Array or Object, or perhaps Date, in some way that affects Google Chart's assumptions.

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@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/3719fb1e-af52-4665-9ec2-da3df3ea8cd7%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Adrian Wade

unread,
Jan 21, 2016, 1:22:19 PM1/21/16
to Google Visualization API
Daniel,

I downloaded it from here as pointed to by www.datejs.com

On Thursday, 21 January 2016 18:11:24 UTC, Daniel LaLiberte wrote:
Hi Adrian,

So what's in your date.js code?  I would guess it modifies the JS built-in Array or Object, or perhaps Date, in some way that affects Google Chart's assumptions.
On Thu, Jan 21, 2016 at 12:36 PM, Adrian Wade <adria...@gmail.com> wrote:
I was working through animation examples to figure out why I couldn't get them to work. I discovered that a data.js include I'd been using is the culprit; 

<script type="text/javascript" src="dev/date.js"></script> 

Removing it gets my animations working and including it seems to break Google Chart animation examples reliably.

Does anyone know why that might be? date.js is useful and it would be nice to keep it.

--
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.



--

Daniel LaLiberte

unread,
Jan 21, 2016, 2:17:31 PM1/21/16
to Google Visualization API
I see modifications of the built-in Date definition in that date.js code, so that is probably the cause of the incompatibility, but I don't know why yet.  Could you share one of your attempts that break so we can see it in action?

On Thu, Jan 21, 2016 at 1:22 PM, Adrian Wade <adria...@gmail.com> wrote:
Daniel,

I downloaded it from here as pointed to by www.datejs.com

On Thursday, 21 January 2016 18:11:24 UTC, Daniel LaLiberte wrote:
Hi Adrian,

So what's in your date.js code?  I would guess it modifies the JS built-in Array or Object, or perhaps Date, in some way that affects Google Chart's assumptions.
On Thu, Jan 21, 2016 at 12:36 PM, Adrian Wade <adria...@gmail.com> wrote:
I was working through animation examples to figure out why I couldn't get them to work. I discovered that a data.js include I'd been using is the culprit; 

<script type="text/javascript" src="dev/date.js"></script> 

Removing it gets my animations working and including it seems to break Google Chart animation examples reliably.

Does anyone know why that might be? date.js is useful and it would be nice to keep it.

--
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-visualizati...@googlegroups.com.



--

--
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-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@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/69be1b90-8081-43d7-82ab-cf6cc8bd7b37%40googlegroups.com.

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



--

Adrian Wade

unread,
Jan 21, 2016, 4:10:13 PM1/21/16
to Google Visualization API
<!DOCTYPE html>
<html lang="en">
  <head>
  <title>Google Example</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="date.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load('current', {'packages':['corechart']});
   google.charts.setOnLoadCallback(loadChart);

function loadChart() {
     // Some raw data (not necessarily accurate)
    var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                     'Rwanda', 'Average'],
                    ['2004/05', 165, 938, 522, 998, 450, 114.6],
                    ['2005/06', 135, 1120, 599, 1268, 288, 382],
                    ['2006/07', 157, 1167, 587, 807, 397, 623],
                    ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                    ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
    var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                     'Rwanda', 'Average'],
                    ['2004/05', 122, 638, 722, 998, 450, 614.6],
                    ['2005/06', 100, 1120, 899, 1268, 288, 682],
                    ['2006/07', 183, 167, 487, 207, 397, 623],
                    ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                    ['2008/09', 123, 491, 829, 826, 366, 569.6]];

    // Create and populate the data tables.
    var data = [];
    data[0] = google.visualization.arrayToDataTable(rowData1);
    data[1] = google.visualization.arrayToDataTable(rowData2);

    var options = {
      width: 400,
      height: 240,
      vAxis: {title: "Cups"},
      hAxis: {title: "Month"},
      seriesType: "bars",
      series: {5: {type: "line"}},
      animation:{
        duration: 1000,
        easing: 'out'
      },
    };
    var current = 0;
    // Create and draw the visualization.
    var chart = new google.visualization.ComboChart(document.getElementById('chart1'));
    var button = document.getElementById('b1');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
            button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
          });
      options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';

      chart.draw(data[current], options);
    }
    drawChart();

    button.onclick = function() {
      current = 1 - current;
      drawChart();
    }
}    
    </script>
  </head>
  <body>
     <button id='b1' disabled="disabled">Remove date.js to fix this</button>
    <div id="chart1" style="width: 900px; height: 500px;"></div>
  </body>
</html>



On Thursday, 21 January 2016 19:17:31 UTC, Daniel LaLiberte wrote:
I see modifications of the built-in Date definition in that date.js code, so that is probably the cause of the incompatibility, but I don't know why yet.  Could you share one of your attempts that break so we can see it in action?
On Thu, Jan 21, 2016 at 1:22 PM, Adrian Wade <adria...@gmail.com> wrote:
Daniel,

I downloaded it from here as pointed to by www.datejs.com

On Thursday, 21 January 2016 18:11:24 UTC, Daniel LaLiberte wrote:
Hi Adrian,

So what's in your date.js code?  I would guess it modifies the JS built-in Array or Object, or perhaps Date, in some way that affects Google Chart's assumptions.
On Thu, Jan 21, 2016 at 12:36 PM, Adrian Wade <adria...@gmail.com> wrote:
I was working through animation examples to figure out why I couldn't get them to work. I discovered that a data.js include I'd been using is the culprit; 

<script type="text/javascript" src="dev/date.js"></script> 

Removing it gets my animations working and including it seems to break Google Chart animation examples reliably.

Does anyone know why that might be? date.js is useful and it would be nice to keep it.

--
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.



--

--
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-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Adrian Wade

unread,
Jan 21, 2016, 4:15:40 PM1/21/16
to Google Visualization API
This is directly cut and paste from https://developers.google.com/chart/interactive/docs/animation#Examples - they all seem to exhibit the same behavior and work fine if you take date.js out.
Reply all
Reply to author
Forward
0 new messages