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.
Hello,
I have been trying to create a chart for a single query group by unique date.
I am trying to make sure if the date are same date regardless of the hours. It counts the total of impression. I converted the timestamp into Month-date-year.
I even tried to use distinct option in server connect. I wasn’t able to fix the problem.
Thank you in advance for your help
<dmx-chart id="chart1" type="bar" dmx-bind:data="QueryAdClick.data.Impression" legend="top" thickness="1" smooth="true" dataset-1:label="Impression" dataset-1:value="Total" responsive="true" point-style="cross" point-size="" labels="TimeStamp.formatDate('MMM-dd-yyyy')"></dmx-chart>
</div>
 I tried to use data formats for grouping: I can notice the change of date to 3 instead of 8. But there is no more value display.
<dmx-chart id="chart1" type="bar" dmx-bind:data="QueryAdClick.data.Impression.groupBy(`TimeStamp.formatDate('MMM-dd-yyyy')`)" legend="top" thickness="1" smooth="true" dataset-1:label="Impression" dataset-1:value="Total" responsive="true" point-style="cross" point-size="" labels="TimeStamp.formatDate('MMM-dd-yyyy')"></dmx-chart>
</div>```
Did you ever figure this out? I just tried the same method as I was trying to achieve the same as you but couldn’t get it to work, and then I stumbled upon this thread.
Edit: ended up doing it with a custom query instead
sorry for the late reply.
I wasn’t able to do it. Gave up on the idea.