Trying to create a graph using the c3.js library with an x-axis interval of time.
The intervals are determined by selecting a date range in the date picker. For example, if we select the dates 2016-03-13 00:00 to 2016-03-13 04:00, we add 15 minutes to the start date until it is less than or equal to the end date.
The data points I am using are as follows:
["x", "2016-03-13 00:00", "2016-03-13 00:15", "2016-03-13 00:30", "2016-03-13 00:45", "2016-03-13 01:00", "2016-03-13 01:15", "2016-03-13 01:30", "2016-03-13 01:45", "2016-03-13 02:00", "2016-03-13 02:15", "2016-03-13 02:30", "2016-03-13 02:45", "2016-03-13 03:00", "2016-03-13 03:15", "2016-03-13 03:30", "2016-03-13 03:45", "2016-03-13 04:00"]
These data points work well without any issues when there is no Daylight Saving Time (DST) adjustment in the timezone. However, during DST application, the point between 2 am and 3 am is missing on the graph, causing the scale to be 23 hours.
It is essential to plot all data points on the graph regardless of whether DST is being observed or not.
Here is the code snippet that is currently not functioning correctly:
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%Y-%m-%d %H:%M', // 'xFormat' can be used as custom format of 'x'
columns: [
["x", "2016-03-13 00:00", "2016-03-13 00:15", "2016-03-13 00:30", "2016-03-13 00:45", "2016-03-13 01:00", "2016-03-13 01:15", "2016-03-13 01:30", "2016-03-13 01:45", "2016-03-13 02:00", "2016-03-13 02:15", "2016-03-13 02:30", "2016-03-13 02:45", "2016-03-13 03:00", "2016-03-13 03:15", "2016-03-13 03:30", "2016-03-13 03:45", "2016-03-13 04:00"],
['data1', 30, 200, 100, 400, 150, 250,30, 200, 100, 400, 150, 250.30, 200, 100, 400, 150]
]
},
axis: {
x: {
type: 'timeseries',
fit: true,
tick: {
format: '%Y-%m-%d %H:%M:%S'
}
}
}
});