Line Graph with DATETIME on x Axis

Hi All,

I am hoping someone can help me with something. I am trying to create a line graph where the x axis is DATETIME. See image attached. The graph does not seem to recognise that this axis is a DATETIME value and does not space out the x axis correctly. Does anyone know how to resolve this? Apologies if I have missed something in the documentation.

I have tried converting the values to dates, but my data source may not have values for certain dates, and this causes the spacing on my x axis to be incorrect. I really hope there is a solution for this, otherwise I am back to the drawing board. Thanks.

EDIT: Maybe there is some other graphing tool that I can manually write the code for and utilise the Wappler database query that I have setup? If anyone has any suggestions or knows of any documentation for such, it would be greatly appreciated.

Otherwise, Am I correct in saying that the AC chart in Wappler is based on charts.js. Is there a way to manually set the x axis distribution to linear rather than series? Is this something that I should log as a feature request?

BUMPING this as I am really hoping someone can help me with this or at least point me in the direction of an alternative or workaround. Thanks everyone.

Hello @whlrb, are you trying to say that there are “skipped” dates on the x-axis? Meaning 2019-07-04 should be followed by 2019-07-05 and not 2019-07-12? Because if you are talking about spaces, I think they are correctly spaced.

If you are talking about the “skipped” dates, then it may have something to do with the source which is coming from your query. Make sure the data source has the correct series of dates. The chart will just show you what you are “feeding” it. Just an opinion from a non-Wappler expert.

Hi Zitro,

So my datasource does not necessarily have datapoints for every day. I need the chart to graph the points linearly and not in series. ie. if I don’t have any data points for a number of days, I need the chart to correctly space the points. Thanks for the reply.

I’m just trying to find out if this is a limitation of the chart component, and if so, I need to figure out a workaround.

Well I guess you still need to supply the dates to the x-axis for dates that have no data points. What may happen is the line chart will go down to 0 for those dates. It will only plot the dates you have supplied it, with or without values or data points. That is my understanding in charting.

If you want it to go down to zero, it is possible, you just need to supply the dates.
If you want a continuous line from the previous date with data point to the next one, it may be possible but you will have to control the query result.
If you want to have a space, it may not be possible as it will still draw a line from 1 point to another. You’ll have to tweak the js I think. But using Wappler, I cannot see any options for that. This is just what I have observed. The others may have answers for you.

1 Like