Using Google Line Graph with time in y-axis and Date in x-axis

Recently I was developing a small app to see the trend line of a process completion using Google chart tools. I was trying to put hour of the day in vertical or y-axis and date in horizontal or x-axis. I couldn't figure out any standard way to achieve this objective. So I did some kind of workaround.

On the x-axis I kept the date in standard format and used decimal value of hour in y-axis to render the graph. The value just helped to pull the curves but is not a good representation of data for end users. To make this more user readable, I added two things-

1. Used custom tooltip to give more information on that point. (Lines 6 to 9 in the JavaScript code below)
2. Added custom ticks in y-axis to represent hour of day instead of decimal value (Line 24)

This is sample PHP code to feed the graph data.

&lt;?php //this PHP code is used to generate JavaScript data - Lines 6 to 9 in the JavaScript code //$ctime -> this variable is having process completion time in seconds echo '[new Date(',date("Y",$ctime),',',(date("n",$ctime)-1),',',date("d",$ctime),'), ',date("G.i",$ctime),','<div ><p>Process Completed at ',date("H:i A",$ctime),'</p></div>']'; ?>

JavaScript Code

google.charts.load('current', &#123;'packages':['corechart']&#125;); google.charts.setOnLoadCallback(drawChart); function drawChart() &#123; var data = google.visualization.arrayToDataTable([ ['Day', 'Process',&#123;type: 'string', role: 'tooltip', 'p': &#123;'html': true&#125;&#125;], [new Date(2017,2,10), 8.18,'<div ><p>Process Completed at 8:18 AM</p></div>'], [new Date(2017,2,09), 10.12,'<div ><p>Process Completed at 10:12 AM</p></div>'], [new Date(2017,2,08), 8.15,'<div ><p>Process Completed at 8:15 AM</p></div>'], [new Date(2017,2,07), 9.36,'<div ><p>Process Completed at 9:36</p></div>'] ]); var options = &#123; title: 'Process Completion Trend - Last 4 Days', curveType: 'function', legend: &#123; position: 'bottom' &#125;, animation:&#123; duration: 1000, easing: 'out', startup: true &#125;, tooltip: &#123;isHtml: true&#125;, hAxis: &#123;format:'E, d-MMM'&#125;, vAxis: &#123; title: 'Time of day (GMT)', viewWindowMode:'maximized', //ticks is used to show custom text instead of actual integrar value //for example int value of 8 would be shown as 8:00 AM ticks: [ &#123;v: 8, f: '8:00 AM'&#125;, &#123;v: 9, f: '9:00 AM'&#125;, &#123;v: 10, f: '10:00 AM'&#125;, &#123;v: 11, f: '11:00 AM'&#125; ] &#125; &#125;; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); &#125;

<a href="https://assets.techvigil.com/assets/201703/419-google-chart-ticks.png" target="_blank" rel="noopener"></a>

Try on JSFiddle