date type not matches google chart requirements

Question

it was really really hard for me to run this project to this state right now. At the beginning, i had no clue how i can read file from csv and push it into an array. This works right now, mismatching the date value by adding it to Rows.

I think my code is simple and shows my problem. Im stuck.

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="jquery.csv.js"></script>

<script type="text/javascript">

    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);
    
function CSVArray(fileName, separator, callback) {
    
   $.get(fileName, function(fileContent){
       
        var result = [];        
        var textArray = fileContent.split(/(\r\n|\n|\r)/gm);        
        for (var i = 0; i < textArray.length; i++) {            
            if (textArray[i].length > 1) {                
                var elementArray = textArray[i].split(separator);                
    elementArray.splice(elementArray.length ,1 ); 
                result.push(elementArray);
        }
  }
        callback(result);
    });
} 

CSVArray("data.csv", ";", function(result) {
  arrayResult = result;
});

      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'Job'})
        dataTable.addColumn({ type: 'string', id: 'Status' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
  
        dataTable.addRows(arrayResult);
 
        chart.draw(dataTable);
}
   
</script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

data.csv

'ZS142770-Win Dateien DD---BtD Woche';'passed';new Date(2014, 10, 15);new Date(2014, 10, 15)

I guess my problem is, that the array contain all data as String and not as Object - right?

ErrorCode:

Error: Type mismatch. Value new Date(2014, 10, 15) does not match type date in column index 2

best regards Paul

score 1 · Accepted Answer · answered Aug 15 '17 at 12:18

you are correct about the problem,
you will need to convert the string to a real date

first, recommend changing the date values in the csv to another format
see more on that here --> Converting string to date in js

then you could create a date from the string, like...

elementArray[2] = new Date(elementArray[2]);

but if you can't change the values in the csv,
you can try using eval, which is pretty much never recommended
(but it should work)

elementArray[2] = eval(elementArray[2]);

next, you could have some timing issues with the layout of your code,
recommend waiting for google to load, before loading the csv
then draw the chart...

recommend setup similar to following...

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

function getData() {
  $.get("data.csv", function (fileContent) {
    var result = [];
    var textArray = fileContent.split(/(\r\n|\n|\r)/gm);
    for (var i = 0; i < textArray.length; i++) {
      if (textArray[i].length > 1) {
        var elementArray = textArray[i].split(";");
        // convert date
        elementArray[2] = eval(elementArray[2]);
        elementArray[3] = eval(elementArray[3]);

        // or with different format
        elementArray[2] = new Date(elementArray[2]);
        elementArray[3] = new Date(elementArray[3]);

        result.push(elementArray);
      }
    }
    drawChart(result);
  });
}

function drawChart(arrayResult) {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Job'})
  dataTable.addColumn({ type: 'string', id: 'Status' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows(arrayResult);

  chart.draw(dataTable);
}

thank you :) but im back with another problem i cant fix - Dygraph.TICK_PLACEMENT[a] is undefined - extending the graph wont work for me. i'll check back at home with chrome browser. Many people said, firefox cause the problem :) — h1_, Aug 15 '17 at 15:03

date type not matches google chart requirements

1 Answers1