Transforming DataTable to Google Spreadsheet

Question

I have made a simple timetable using Google Charts, although right now i use DataTable inside the code. Instead i want to use Google Spreadsheet as the source.

But i am struggling even though i follow https://developers.google.com/chart/interactive/docs/spreadsheets. I dont quite understand in which format should my datas be in the spreadsheet (such as columns and rows)

Here is the code:

<head>
  <h1>Vehicle Plan Time Table</h1>
  <style>
h1 {
  color: #3e74ab;
  text-shadow: 1px 1px;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
}

</style>
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

  var container = document.getElementById('timechart');
  var chart = new google.visualization.Timeline(container);

  var options = {
    colors: ['#113477', '#C0C0C0','#adc6e5', '#72aae4','#518cc2','#4A7FB0'],
    timeline: { rowLabelStyle: {fontName: 'Arial', fontSize: 20, color: '#0000' },
                   barLabelStyle: { fontName: 'Times New Roman', fontSize: 25 } },
            'width':2650,
                   'height':1200,
      avoidOverlappingGridLines: false
  };

  chart.draw(dataTable, options);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Position' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ Date(), 'Now', new Date(), new Date()],
    [ 'Project #1', 'F2', new Date(2022, 10, 30), new Date(2022, 11, 30) ],
    [ 'Project #1', 'F3', new Date(2022, 11, 30), new Date(2023, 5, 17) ],
    [ 'Project #1', 'F3.1', new Date(2023, 5, 17), new Date(2023, 9, 29) ],
  ]);
  chart.draw(dataTable,options);

  nowLine('timeline');

google.visualization.events.addListener(chart, 'onmouseover', function(obj){
  if(obj.row == 0){
    $('.google-visualization-tooltip').css('display', 'none');
  }
  nowLine('timeline');
})

google.visualization.events.addListener(chart, 'onmouseout', function(obj){
  nowLine('timeline');
})
}

function nowLine(div){

var height;
$('#' + div + ' rect').each(function(index){
  var x = parseFloat($(this).attr('x'));
  var y = parseFloat($(this).attr('y'));

  if(x == 0 & y == 0) {height = parseFloat($(this).attr('height'))}
})

var nowWord = $('#' + div + ' text:contains("Now")');

nowWord.prev().first().attr('height', height + 'px').attr('width', '1px').attr('y', '0');

}
</script>
<div id="timechart" style="height: 400px;"></div>

I have to apologize for my poor English skill. From your title of `Transforming DataTable to Google Spreadsheet`, I understood that you wanted to transform DataTable to Google Spreadsheet. But from your question of `I have made a simple timetable using Google Charts, although right now i use DataTable inside the code. Instead i want to use Google Spreadsheet as the source.`, I understood that you wanted to transform Google Spreadsheet to DataTable. So, I cannot understand your current issue and your goal. Can I ask you about the detail of your current issue and your goal? — Tanaike, Nov 22 '22 at 01:31
i have made a datatable inside the code, but i want it to be inside google spreadsheet. sorry if i wrote it not properly. — m3meg0d, Nov 22 '22 at 07:02
Thank you for replying. I would like to support you. But, I have to apologize for my poor English skill, again. Unfortunately, I cannot still understand your question. But I would like to try to understand it. When I could correctly understand it, I would like to think of a solution. I would be grateful if you can forgive my poor English skill. — Tanaike, Nov 22 '22 at 07:05
Thank you for your effort. Your english is understandable, I want Data i wrote "[ 'Project #1', 'F2', new Date(2022, 10, 30), new Date(2022, 11, 30) ], [ 'Project #1', 'F3', new Date(2022, 11, 30), new Date(2023, 5, 17) ], [ 'Project #1', 'F3.1', new Date(2023, 5, 17), new Date(2023, 9, 29) ]," in google spreadsheet. Now its in the code. I dont know how to write it in Google Spreadsheed. — m3meg0d, Nov 22 '22 at 10:32
Thank you for replying. In your goal, you want to copy the values from the HTML side to Google Spreadsheet. Is my understanding correct? If my understanding is correct, when I saw your script, I cannot find the script for putting the values to your Spreadsheet. Can I ask you about your script for this? If I misunderstood your reply, I apologize. — Tanaike, Nov 22 '22 at 11:55
Yes, exactly i want that. But i struggle. My values in code are `[ 'Project #1', 'F2', new Date(2022, 10, 30), new Date(2022, 11, 30) ], [ 'Project #1', 'F3', new Date(2022, 11, 30), new Date(2023, 5, 17) ], [ 'Project #1', 'F3.1', new Date(2023, 5, 17), new Date(2023, 9, 29) ],` but i dont know how to write them in spreadsheet. Thank you again for your efforts. — m3meg0d, Nov 22 '22 at 12:49
Thank you for replying. I cannot understand the relationship between `My values in code are,,,` and your showing script and your Spreadsheet. Can I ask you about the detail of it? — Tanaike, Nov 23 '22 at 01:15

Transforming DataTable to Google Spreadsheet

0 Answers0