使用PHP，JSON和google.visualization.DataTable创建Google仪表板图表

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);
    }

同样，不确定这是否是完美的“干净”解决方案，但它对我有用。 如果有人有更好的方法，请分享。

使用PHP，JSON和google.visualization.DataTable创建Google仪表板图表

问题描述

2 个解决方案

解决方案1
0 2015-03-19 16:37:44

解决方案2
0 2015-03-20 00:59:52

使用PHP，JSON和google.visualization.DataTable创建Google仪表板图表

问题描述

2 个解决方案

解决方案1 0 2015-03-19 16:37:44

解决方案2 0 2015-03-20 00:59:52

解决方案1
0 2015-03-19 16:37:44

解决方案2
0 2015-03-20 00:59:52