Question

我正在尝试创建一个包含仪表板的Google图表，非常类似于：https://google-developers.appspot.com/chart/interactive/docs/gallery/controls，我遇到的问题是我的数据格式错误，我不知道原因。这是代码。我相信这与它有关 google.visualization.DataTable和google.visualization.arrayToDataTable

感谢您的帮助！

PHP

  $result = $conn->query("SELECT 
                        date,
                        ebay_sales,
                        amazon_sales,
                        ssllc_sales 
                        FROM stayingsharpllc_.sales
                        WHERE date > '2014-09-01'
                        GROUP BY date
                        ORDER BY date asc
                        LIMIT 2;"
                        );




  $rows = array();
  $table = array();
  $table['cols'] = array(

    // Labels for your chart, these represent the column titles.
    /* 
        note that one column is in "string" format and another one is in "number" format 
        as pie chart only required "numbers" for calculating percentage 
        and string will be used for Slice title
    */

    array('label' => 'Date', 'type' => 'string'),
    array('label' => 'eBay Sales', 'type' => 'number'),
    array('label' => 'Amazon Sales', 'type' => 'number'),
    array('label' => 'SSLLC Sales', 'type' => 'number')

    );
    /* Extract the information from $result */
    foreach($result as $r) {

      $temp = array();

      // the following line will be used to slice the Pie chart

      $temp[] = array('v' => (string) $r['date']); 

      // Values of each slice
      $temp[] = array('v' => (int) $r['ebay_sales']); 
      $temp[] = array('v' => (int) $r['amazon_sales']); 
      $temp[] = array('v' => (int) $r['ssllc_sales']); 
      $rows[] = array('c' => $temp);
    }

     $table['rows'] = $rows;

     // convert data into JSON format
     $jsonTable = json_encode($table);
     //echo $jsonTable;
    } catch(PDOException $e) {
    echo 'ERROR: ' . $e->getMessage();
    }

?>

这是图表代码

  // dashboard

  google.load('visualization', '1.0', {'packages':['controls']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawDashboard);

  // Callback that creates and populates a data table,
  // instantiates a dashboard, a range slider and a pie chart,
  // passes in the data and draws it.
  function drawDashboard() {

    // Create our data table.
    var data = google.visualization.DataTable(<?=$jsonTable?>);

    // Create a dashboard.
    var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));

    // Create a range slider, passing some options
    var donutRangeSlider = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'filter_div',
      'options': {
        'filterColumnLabel': 'Amazon Sales'
      }
    });

    // Create a Column, passing some options
    var columnChart = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'chart_div',
       'options': {
        'width': 800,
        'height': 300,
        'legend': 'right'
      }
    });

    // Establish dependencies, declaring that 'filter' drives 'pieChart',
    // so that the pie chart will only display entries that are let through
    // given the chosen slider range.
    dashboard.bind(donutRangeSlider, columnChart);

    // Draw the dashboard.
    dashboard.draw(data);
  }

和Divs：

   </script>
  </head>

  <body>

    <!--Div that will hold the dashboard-->
   <div id="dashboard_div">
    <!--this is the div that will hold the pie chart-->
 <div id="filter_div"></div>
    <div id="chart_div"></div>
    <div id="table_div"></div>

Answer 1

新的Google信息中心使用的是日期格式 new Date(2008,1,28)。它也不能是字符串格式。它必须是datetime格式。我还在研究如何制作一个看起来正确的数组。如果我发现它会重新发布。

Answer 2

所以答案（至少对我有用）是在查询中格式化我的日期，如

    $result = $conn->query("SELECT 
                        DATE_FORMAT(DATE_SUB(DATE(order_date),INTERVAL 1 MONTH),'Date(%Y, %m, %d)') as date,

然后确保日期不是字符串并且是日期

array('label' => 'Date', 'type' => 'date'),

最后我在绑定后错过了}

    dashboard.bind(RangeSlider, Chart);

    // Draw the dashboard.
    dashboard.draw(data);
    }

再次，不确定这是完美的＆＃34;清洁＆＃34;解决方案，但它对我有用。如果有人有更好的方法，请分享。

使用PHP，JSON和google.visualization.DataTable创建一个谷歌仪表板图表

2 个答案: