Google Charts, calendar implementation with AJAX request

Question

I want to implement this nice calendar chart on my website.

https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/calendar

Assume the client performs an ajax request, on page load, and the server queries data from the database and responds with a multidimensional array in JSON Format.

How can i loop through to update the map?

 <script>
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 950,
       };

       chart.draw(dataTable, options);
   }
    </script>

Can you elaborate .... so, instead of adding hardcoded data, as in example above, you would like to make ajax request, and fill in that data to chart? — smartilabs, Dec 01 '19 at 22:16

score 1 · Accepted Answer · answered Dec 02 '19 at 13:09

in order to get a real date from the database via json,
you will need to use google's data table json format,
found here --> Format of the DataTable Constructor's JavaScript Literal data Parameter

and... --> Dates and Times Using the Date String Representation

which means your json will need to be formatted as follows...

{
  "cols": [
    {"label": "Date", "type": "date"},
    {"label": "Won/Loss", "type": "number"}
  ],
  "rows": [
    {"c":[{"v": "Date(2012, 3, 13)"}, {"v": 37032}]},
    {"c":[{"v": "Date(2012, 3, 14)"}, {"v": 38024}]},
    {"c":[{"v": "Date(2012, 3, 15)"}, {"v": 38024}]},
    {"c":[{"v": "Date(2012, 3, 16)"}, {"v": 38108}]},
    {"c":[{"v": "Date(2012, 3, 17)"}, {"v": 38229}]},
    {"c":[{"v": "Date(2013, 9, 4)"}, {"v": 38177}]},
    {"c":[{"v": "Date(2013, 9, 5)"}, {"v": 38705}]},
    {"c":[{"v": "Date(2013, 9, 12)"}, {"v": 38210}]},
    {"c":[{"v": "Date(2013, 9, 13)"}, {"v": 38029}]},
    {"c":[{"v": "Date(2013, 9, 19)"}, {"v": 38823}]},
    {"c":[{"v": "Date(2013, 9, 23)"}, {"v": 38345}]},
    {"c":[{"v": "Date(2013, 9, 24)"}, {"v": 38436}]},
    {"c":[{"v": "Date(2013, 9, 30)"}, {"v": 38447}]}
  ]}

otherwise, you will need to pass some sort of string that can be converted to a date on the client...

incorporating ajax would look something like the following snippet...

note: since the file is not available from here, SO,
the fail callback will be called in the following working snippet...

google.charts.load('current', {
  packages: ['calendar']
}).then(function () {
  var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

  var options = {
    title: 'Red Sox Attendance',
    height: 950
  };

  $.ajax({
    url: 'output.txt',
    type: 'GET',
    dataType: 'json'
  }).done(function (data) {

    // create data table, draw chart
    var dataTable = new google.visualization.DataTable(data);

    chart.draw(dataTable, options);

    $(window).on('resize', function () {
      chart.draw(dataTable, options);
    });

  }).fail(function (jqXHR, status, errorThrown) {

    // remove in production
    var dataTable = new google.visualization.DataTable({
      "cols": [
        {"label": "Date", "type": "date"},
        {"label": "Won/Loss", "type": "number"}
      ],
      "rows": [
        {"c":[{"v": "Date(2012, 3, 13)"}, {"v": 37032}]},
        {"c":[{"v": "Date(2012, 3, 14)"}, {"v": 38024}]},
        {"c":[{"v": "Date(2012, 3, 15)"}, {"v": 38024}]},
        {"c":[{"v": "Date(2012, 3, 16)"}, {"v": 38108}]},
        {"c":[{"v": "Date(2012, 3, 17)"}, {"v": 38229}]},
        {"c":[{"v": "Date(2013, 9, 4)"}, {"v": 38177}]},
        {"c":[{"v": "Date(2013, 9, 5)"}, {"v": 38705}]},
        {"c":[{"v": "Date(2013, 9, 12)"}, {"v": 38210}]},
        {"c":[{"v": "Date(2013, 9, 13)"}, {"v": 38029}]},
        {"c":[{"v": "Date(2013, 9, 19)"}, {"v": 38823}]},
        {"c":[{"v": "Date(2013, 9, 23)"}, {"v": 38345}]},
        {"c":[{"v": "Date(2013, 9, 24)"}, {"v": 38436}]},
        {"c":[{"v": "Date(2013, 9, 30)"}, {"v": 38447}]}
      ]
    });

    chart.draw(dataTable, options);

    $(window).on('resize', function () {
      chart.draw(dataTable, options);
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>

Google Charts, calendar implementation with AJAX request

1 Answers1