CODEWITHSUNDEEP
javascriptarrayscsvchartsgoogle-visualization
h1_
h1_

Reputation: 35

date type not matches google chart requirements

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

Upvotes: 0

Views: 448

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

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);
}

Upvotes: 1

Related Questions