Geek asks and answers

Google API: calibration animation

I'm trying to make a google gauge pointer, but it doesn’t move, I set the animation configuration, as it is supposed to be set in var options, for example, duration: 1000 and easing: 'inAndOut', I n00b in the Google API, so for my attempts of ignorance.

Can someone help me. here is the tutorial link I'm using. the code works, but in part, the caliber pointer should move slowly to it max, however in my case this will not work. here is the code.

<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Match',80],
    ]);

    var options = {
      width: 440, height: 140,
      greenFrom: 70, greenTo: 100,
      yellowFrom:50, yellowTo: 70,
      redFrom:0, redTo: 50,
      minorTicks: 5,
      animation:{
          duration: 1000,
          easing: 'inAndOut',
        },
      majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
    chart.draw(data, options);
    clearChart();
  }
</script>
</html>
+5
source share
2 answers

Turns out I figured it out myself, there is a good answer on google forums here

, 0 ( ) , ( setInterval() )

, , .

<html>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
  google.load('visualization', '1', {packages:['gauge']});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      ['Match',0],
    ]);

    var options = {
      width: 440, height: 140,
      greenFrom: 70, greenTo: 100,
      yellowFrom:50, yellowTo: 70,
      redFrom:0, redTo: 50,
      minorTicks: 5,
      animation:{
          duration: 1000,
          easing: 'inAndOut',
        },
      majorTicks : ['0','10','20','30','40','50','60','70','80','90','100']
    };

    var chart = new google.visualization.Gauge(document.getElementById('chart_div<%=id%>'));
    chart.draw(data, options);
    clearChart();

    // This is new.
    setTimeout(function(){
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Match',80],
      ]);
      chart.draw(data, options);
    }, 200);
  }
</script>
</html>
+9

, - , , setValue . ( , , ).

// set up the value here that we are moving from - this allows the gauge needle to animate when we set the actual value later
if (!widgetArray[i].googleArrayToDataTable) { // check if we've initialised

    widgetArray[i].googleArrayToDataTable = new google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      [widgetArray[i].label, 0]
    ]);
}
else {

    widgetArray[i].googleArrayToDataTable = google.visualization.arrayToDataTable([
      ['Label', 'Value'],
      [widgetArray[i].label, (widgetArray[i].googleOldNeedleValue * widgetArray[i].dialMax / widgetArray[i].googleOldDialMax)]
    ]);
}
// remember these values - I need to do this for my application to ensure the needle looks ok when switching values
widgetArray[i].googleOldNeedleValue = widgetArray[i].needleVal;
widgetArray[i].googleOldDialMax = widgetArray[i].dialMax;

majorTickIncrement = widgetArray[i].dialMax / 5;

var options;

if (widgetArray[i].range2End > 0)
    options = {
        height: 240,
        animation: { duration: 1000, easing: 'inAndOut' },
        //redFrom: 0, redTo: KRAvalues.targetVal,
        redFrom: 0, redTo: widgetArray[i].range1End,
        yellowFrom: widgetArray[i].range1End, yellowTo: widgetArray[i].range2End,
        greenFrom: widgetArray[i].range2End, greenTo: widgetArray[i].range3End,
        minorTicks: 5, max: widgetArray[i].dialMax,
        majorTicks: ['0', majorTickIncrement, majorTickIncrement * 2, majorTickIncrement * 3, majorTickIncrement * 4, widgetArray[i].dialMax]
    };
else
    options = {
        height: 240,
        animation: { duration: 1000, easing: 'inAndOut' },
        minorTicks: 5, max: widgetArray[i].dialMax,
        majorTicks: ['0', majorTickIncrement, majorTickIncrement * 2, majorTickIncrement * 3, majorTickIncrement * 4, widgetArray[i].dialMax]
    };

if (!widgetArray[i].googleChart) { // initialise gauge if required
    widgetArray[i].googleChart = new google.visualization.Gauge(document.getElementById(widgetArray[i].name + 'chart_div'));
}

// this animates the needle
// draw old value
widgetArray[i].googleChart.draw(widgetArray[i].googleArrayToDataTable, options);
// set new value
widgetArray[i].googleArrayToDataTable.setValue(0, 1, widgetArray[i].needleVal);
// draw new value
widgetArray[i].googleChart.draw(widgetArray[i].googleArrayToDataTable, options);
0

More articles:


All Articles