Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I've already read multiple questions/answers here and on other websites but I just can't get it to work.

I have a database containing Date and Count. With PHP I've constructed a nested array which when encoded becomes valid json. At least according to http://jsonlint.com/. The json (from what I can see) looks like the ones on https://google-developers.appspot.com/chart/interactive/docs/php_example.

The only thing I'm trying to do is create a column chart with Google API (shouldn't be so hard)... I want Count (quantity) on the y-axis and the date on the x-axis.

Here's one json output example (believe me I've tried several):

{"cols":[{"id":"","label":"Date","type":"date"},{"id":"","label":"Count","type":"number"}],"rows":[{"c":[{"v":"2013-02-08"},{"v":"13"}]},{"c":[{"v":"2013-02-09"},{"v":"80"}]},{"c":[{"v":"2013-02-10"},{"v":"2021"}]},{"c":[{"v":"2013-02-11"},{"v":"18"}]},{"c":[{"v":"2013-02-12"},{"v":"8"}]},{"c":[{"v":"2013-02-13"},{"v":"4"}]},{"c":[{"v":"2013-02-14"},{"v":"687"}]},{"c":[{"v":"2013-02-15"},{"v":"6674"}]},{"c":[{"v":"2013-02-16"},{"v":"656"}]},{"c":[{"v":"2013-02-17"},{"v":"646"}]},{"c":[{"v":"2013-02-18"},{"v":"672"}]},{"c":[{"v":"2013-02-19"},{"v":"656"}]},{"c":[{"v":"2013-02-20"},{"v":"653"}]},{"c":[{"v":"2013-02-21"},{"v":"697"}]},{"c":[{"v":"2013-02-22"},{"v":"696"}]},{"c":[{"v":"2013-02-23"},{"v":"679"}]},{"c":[{"v":"2013-02-24"},{"v":"647"}]},{"c":[{"v":"2013-02-25"},{"v":"638"}]},{"c":[{"v":"2013-02-26"},{"v":"636"}]},{"c":[{"v":"2013-02-27"},{"v":"629"}]},{"c":[{"v":"2013-02-28"},{"v":"644"}]},{"c":[{"v":"2013-03-01"},{"v":"5648"}]},{"c":[{"v":"2013-03-02"},{"v":"4378"}]},{"c":[{"v":"2013-03-03"},{"v":"664"}]},{"c":[{"v":"2013-03-04"},{"v":"663"}]},{"c":[{"v":"2013-03-05"},{"v":"630"}]},{"c":[{"v":"2013-03-06"},{"v":"640"}]},{"c":[{"v":"2013-03-07"},{"v":"16"}]},{"c":[{"v":"2013-03-08"},{"v":"25"}]},{"c":[{"v":"2013-03-09"},{"v":"31"}]},{"c":[{"v":"2013-03-10"},{"v":"324"}]},{"c":[{"v":"2013-03-11"},{"v":"9"}]},{"c":[{"v":"2013-03-12"},{"v":"22"}]},{"c":[{"v":"2013-03-13"},{"v":"23"}]},{"c":[{"v":"2013-03-14"},{"v":"31"}]},{"c":[{"v":"2013-03-15"},{"v":"29"}]},{"c":[{"v":"2013-03-16"},{"v":"40"}]},{"c":[{"v":"2013-03-17"},{"v":"15"}]},{"c":[{"v":"2013-03-18"},{"v":"5"}]},{"c":[{"v":"2013-03-19"},{"v":"13"}]},{"c":[{"v":"2013-03-20"},{"v":"24"}]},{"c":[{"v":"2013-03-21"},{"v":"53"}]},{"c":[{"v":"2013-03-22"},{"v":"808"}]},{"c":[{"v":"2013-03-23"},{"v":"59"}]},{"c":[{"v":"2013-03-24"},{"v":"24"}]},{"c":[{"v":"2013-03-25"},{"v":"2"}]},{"c":[{"v":"2013-03-26"},{"v":"16"}]},{"c":[{"v":"2013-03-27"},{"v":"1546"}]},{"c":[{"v":"2013-03-28"},{"v":"1554"}]},{"c":[{"v":"2013-03-29"},{"v":"1587"}]},{"c":[{"v":"2013-03-30"},{"v":"1570"}]},{"c":[{"v":"2013-03-31"},{"v":"1552"}]},{"c":[{"v":"2013-04-01"},{"v":"1559"}]},{"c":[{"v":"2013-04-02"},{"v":"1568"}]},{"c":[{"v":"2013-04-03"},{"v":"1566"}]},{"c":[{"v":"2013-04-04"},{"v":"1574"}]},{"c":[{"v":"2013-04-05"},{"v":"1558"}]},{"c":[{"v":"2013-04-06"},{"v":"1626"}]},{"c":[{"v":"2013-04-07"},{"v":"1562"}]},{"c":[{"v":"2013-04-08"},{"v":"1536"}]},{"c":[{"v":"2013-04-09"},{"v":"1565"}]},{"c":[{"v":"2013-04-10"},{"v":"1551"}]},{"c":[{"v":"2013-04-11"},{"v":"1547"}]},{"c":[{"v":"2013-04-12"},{"v":"1628"}]},{"c":[{"v":"2013-04-13"},{"v":"1541"}]},{"c":[{"v":"2013-04-14"},{"v":"1515"}]},{"c":[{"v":"2013-04-15"},{"v":"1537"}]},{"c":[{"v":"2013-04-16"},{"v":"1536"}]}]}

And the API script

// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});

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

function drawChart() {
  var jsonData = $.ajax({
      url: "chartjson.php",
      dataType:"json",
      async: false
      }).responseText;

  // Create our data table out of JSON data loaded from server.
  var data = new google.visualization.DataTable(jsonData);

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240});
}

I'm at the point where I'm seriously considering making the charts in excel and upload screenshots everyday.

Any ideas on how to solve this? Am I even close (don't be mean)?

Any help is much appreciated!

share|improve this question

1 Answer 1

Feeling a bit stupid... After some more digging I found out that I had to use 'string' for the dates rather than dates which then solved the whole issue.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.