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

Question

I am trying to create a google chart that has has a dashboard, much like: https://google-developers.appspot.com/chart/interactive/docs/gallery/controls , The issue I am having is that my data is the wrong format and I dont know why. 我正在尝试创建一个具有仪表盘的google图表，非常类似于： https : //google-developers.appspot.com/chart/interactive/docs/gallery/controls ，我遇到的问题是我的数据是错误的格式，我不知道为什么。 Here is the code. 这是代码。 I believe it has something to do with google.visualization.DataTable and google.visualization.arrayToDataTable 我认为这与google.visualization.DataTable和google.visualization.arrayToDataTable有关

Thank you for the help! 感谢您的帮助！

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

?>

Here is the chart code 这是图表代码

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

And the Divs: 和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

The new google dashboards use a date format that looks like new Date(2008,1,28) . 新的Google信息中心使用的日期格式类似于new Date(2008,1,28) 。 Also it can't be in a string format. 另外，它不能为字符串格式。 It has to be in a datetime format. 它必须是datetime格式。 I'm also working on how to make an array that will look correctly. 我也在研究如何制作一个看起来正确的数组。 Will repost if I find it. 如果找到，将重新发布。

Answer 2

so the answer (it worked for me, at least) was to format my date in the query like 所以答案（至少对我有用）是格式化查询中的日期格式，例如

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

Then to make sure the date was not a string and was a date 然后确保日期不是字符串，而是日期

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

and finally I was missing a } after the binds 最后在绑定之后我错过了一个}

    dashboard.bind(RangeSlider, Chart);

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

Again, not sure this is the perfect "clean" solution but it worked for me. 同样，不确定这是否是完美的“干净”解决方案，但它对我有用。 If someone has a better way to do it please share. 如果有人有更好的方法，请分享。

使用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