CODEWITHSUNDEEP
javascriptdatetimechartsgoogle-visualization
Little squirrel
Little squirrel

Reputation: 29

Google chart "Cannot read property 'datefield' of undefined" for a datetime

I have problem with the google chart library. Actualy, i'm trying to display Datetime data to a timeline chart, so here is my fiddle :

google.charts.load('current', { 'packages': ['timeline'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var container = document.getElementById("occupancyChart");
    var chart = new google.visualization.Timeline(container);
    var jsonData = {
      "cols": [
        {
          "id": "Sensor_name",
          "type": "string"
        },
        {
          "id": "Start",
          "type": "datetime"
        },
        {
          "id": "End",
          "type": "datetime"
        }
      ],
      "rows": [
        {
          "c": [
            {
              "v": "Capteur"
            },
            {
              "v": "1789-04-29T22:00:00.000Z"
            },
            {
              "v": "1798-05-26T22:00:00.000Z"
            }
          ]
        }
      ]
    };
    
    var dataTable = new google.visualization.DataTable(
        jsonData
    );

    chart.draw(dataTable);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
    <div id="occupancyChart"></div>
</body>

In fact, jsonData doesn't exist, it's a ajax request, but it work, i got my data in the web page.

I tried to follow the API, so by using the datetime type in column, i tried to use format in documentation :

But with the ISO 8601, same trouble. Any suggestion ?

EDIT :

with debugger, when i modify the data by a date object, everithing work

Upvotes: 1

Views: 3672

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

1) use the following format when loading a data table from json... 

"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"

e.g. 

"Date(2017, 4, 3, 7, 31, 49, 0)"  // <-- 05/03/2017 07:31:49

note: the above string must have the month reduced by one and not all of the arguments are required...

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

see following working snippet... 

google.charts.load('current', { 'packages': ['timeline'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var container = document.getElementById("occupancyChart");
    var chart = new google.visualization.Timeline(container);
    var jsonData = {
      "cols": [
        {
          "id": "Sensor_name",
          "type": "string"
        },
        {
          "id": "Start",
          "type": "datetime"
        },
        {
          "id": "End",
          "type": "datetime"
        }
      ],
      "rows": [
        {
          "c": [
            {
              "v": "Capteur"
            },
            {
              "v": "Date(2017, 4, 10, 7, 16, 30)"
            },
            {
              "v": "Date(2017, 4, 11, 7, 12, 43)"
            }
          ]
        }
      ]
    };

    var dataTable = new google.visualization.DataTable(
        jsonData
    );

    chart.draw(dataTable);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="occupancyChart"></div>

Upvotes: 1

Related Questions