0

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!

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.