Animation and custom formatted vAxis.

21 views
Skip to first unread message

Seann Herdejurgen

unread,
May 19, 2021, 1:07:46 PM5/19/21
to Google Visualization API
I just learned about Google Charts animation and have enabled them on my line charts. They look pretty cool when resizing charts, however I have a custom vAxis that reverts to it's default format during animation. My current vAxis format is:

      vAxis: { format:'short' },

And I update the vAxis with the following code:

// Prefix vAxis with dollar sign
function formatyaxis(chartId) {
   var axisLabels=document.getElementById(chartId).getElementsByTagName('text')
   for (var i=0; i<axisLabels.length; i++) {
      if (axisLabels[i].getAttribute('text-anchor')==='end' && !axisLabels[i].innerHTML.match(/\$/)) {
         axisLabels[i].innerHTML='$'+axisLabels[i].innerHTML
      }
   }
}

I use the following code to style the vAxis during initial formatting and re-formatting after an animation:

   var chart=new google.visualization.LineChart(document.getElementById(chartId))
   google.visualization.events.addListener(chart,'ready',()=>{ formatyaxis(chartId) })
   google.visualization.events.addListener(chart,'animationfinish',()=>{ formatyaxis(chartId) })

Is there anyway to prevent animations from reverting the format of the vAxis or hAxis when they execute?

Regards,
-Seann
Reply all
Reply to author
Forward
0 new messages