I have a data taken at various times of day for more than a year. I want to plot the data by time of day. In other words, the x-axis will go from midnight to midnight (00:00 to 23:59).

I'm using Chartkick with High Charts, although I could use Chart.js.

I could create a column with just time of day, but a direct way would be cleaner.

The chart code for all data plotted for recent data is, i.e., from months ago to now:

<%= line_chart Data.where(statdate: date_in_the_past..current_date).pluck(:statdate, :data %>

Trying @ppotaczek's code

The deep dive. Already had the same src for high charts and added code to a scripts tag and added the id="container". line 224 is what to do with an an error. Haven't gone beyond that yet.

highcharts.src.js:224 Uncaught Error: Highcharts error #13: www.highcharts.com/errors/13/
at Object.<anonymous> (highcharts.src.js:224)
at B (highcharts.src.js:1676)
at u (highcharts.src.js:246)
at a.getContainer (highcharts.src.js:31053)
at a.firstRender (highcharts.src.js:31988)
at a.<anonymous> (highcharts.src.js:30306)
at B (highcharts.src.js:1676)
at a.init (highcharts.src.js:30180)
at a.getArgs (highcharts.src.js:30152)
at new a (highcharts.src.js:30094)