Ebay API Question posted in
The official documentation of all the APIs offered by Ebay can be found here.

Using PHP, JSON and google.visualization.DataTable to create a google dashboard chart – Ebay API

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. Here is the code. I believe it has something to do with
google.visualization.DataTable and google.visualization.arrayToDataTable

Thank you for the help!

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:

   </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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    The new google dashboards use a date format that looks like
    new Date(2008,1,28). Also it can’t be in a string format. It has to be in a datetime format. I’m also working on how to make an array that will look correctly. Will repost if I find it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search