用户输入后重绘谷歌答案

【问题标题】：Redraw google after user input用户输入后重绘谷歌
【发布时间】：2014-07-02 14:32:01
【问题描述】：

所以我有一个显示一段时间内数据的 Google Motion 图表。 PHP 调用数据库来获取图表数据，该数据存储到 JS 文件中，然后 html 文件绘制图表（使用 js 脚本）。

我希望有一个用户输入：

Start (millions):<input class="option" type="text" id="start" name="start" value="<?php echo $start?>"></input> |  
End (millions): <input class="option" type="text" id="end" name="end" value="<?php echo $end?>"></input> |

用户输入将设置图表的 x 值（以百万为单位）

绘制图形的 HTML 和 JS 脚本：

 function dataLoaded(myData) {

  };

  google.load('visualization', '1', {'packages':['motionchart']});
  google.setOnLoadCallback(drawChart);
var control = new google.visualization.ControlWrapper({
 'controlType': 'ChartRangeFilter',

 'options': {
   // Filter by the date axis.
   'filterColumnIndex': 0,
   'ui': {
     'chartType': 'MotionChart',
     'chartOptions': {
       'chartArea': {'width': '90%'},
     },
   }
 },

   });

  function drawChart() {
      // alert("dataLoaded called");
  var chartData = new google.visualization.DataTable();
      chartData.addColumn('number', 'Moving Avg Volume');


      chartData.addRows(chartDataRows);

      var upOptions = {};
      upOptions['state'] = {"playDuration":15000,"orderedByY":false,"iconType":"VBAR","yAxisOption":"6","nonSelectedAlpha":0.4,"yZoomedDataMin":0,"showTrails":false,"yZoomedDataMax":2.2,"xAxisOption":"6","iconKeySettings":[],"duration":{"multiplier":1,"timeUnit":"D"},"xZoomedDataMin":0,"yLambda":1,"yZoomedIn":false,"uniColorForNonSelected":false,"xZoomedIn":false,"dimensions":{"iconDimensions":["dim0"]},"orderedByX":true,"sizeOption":"_UNISIZE","xZoomedDataMax":122,"xLambda":1,"colorOption":"4"};
      upOptions['width'] = 900;
      upOptions['height'] = 600;

      var upchart = new google.visualization.MotionChart(document.getElementById('who_up_chart'));
      upchart.draw(chartData, upOptions);

 var downOptions = {};
    downOptions['state'] = {"playDuration":15000,"orderedByY":false,"iconType":"VBAR","yAxisOption":"5","nonSelectedAlpha":0.4,"yZoomedDataMin":0,"showTrails":false,"yZoomedDataMax":24000,"xAxisOption":"5","iconKeySettings":[],"duration":{"multiplier":1,"timeUnit":"D"},"xZoomedDataMin":0,"yLambda":1,"yZoomedIn":false,"uniColorForNonSelected":false,"showXScalePicker":true,"xZoomedIn":false,"dimensions":{"iconDimensions":["dim0"]},"orderedByX":true,"showYMetricPicker":true,"sizeOption":"_UNISIZE","xZoomedDataMax":122,"xLambda":1,"colorOption":"4"};
  downOptions['width'] = 900;
  downOptions['height'] = 600;
      var downchart = new google.visualization.MotionChart(document.getElementById('who_down_chart'));
     downchart.draw(chartData, downOptions);

      document.getElementById('loading').innerHTML='';
  }

我的 X 轴是从 0 到 100,000,000，因此如果用户输入 1,000,000 到 5,000,000，我希望图表重绘并仅显示这些点。

【问题讨论】：

为什么这个标签是highcharts？
@Mark 这是系统推荐的标签之一，我的错。你觉得你能帮我吗^^^/

标签： javascript php database google-visualization

【解决方案1】：

我认为您正在寻找的是DataView。 DataView 就像一个界面，用于更改您在 DataTable 中查看数据的方式，而无需实际更改数据。

var data = new google.visualization.DataTable();
var options = {
    //set your options
}

//Load Your Data Here.

var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 0, minValue: minTime, maxValue: maxTime}]);
var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
chart.draw(view, options)

我还注意到您在开头声明了一个 ChartRangeFilter 控件。要将其绑定到图表，两者都需要成为 google.visulization.Dashboard 的一部分。我无法确定 MotionChart 是否能够与控件绑定，但您可以尝试一下。

【讨论】：