Hi,
I am currently working on a project that import data from an API call to get fuel prices and display them in a line graph format. I am currently having trouble with the display of the X-axis when it comes to the dateTime formatting. Before I explain the problem, below is the data that I am working with from the API call:
[{id: 9142, dateTime: "2022-03-09T05:05:07.913", state: "Oregon", regular: 4.66, midGrade: 4.79,…},…] 0: {id: 9142, dateTime: "2022-03-09T05:05:07.913", state: "Oregon", regular: 4.66, midGrade: 4.79,…} 1: {id: 9193, dateTime: "2022-03-10T05:05:04.947", state: "Oregon", regular: 4.72, midGrade: 4.87,…} 2: {id: 9244, dateTime: "2022-03-11T05:04:54.91", state: "Oregon", regular: 4.74, midGrade: 4.92,…} 3: {id: 9295, dateTime: "2022-03-12T05:04:53.517", state: "Oregon", regular: 4.74, midGrade: 4.92,…} 4: {id: 9346, dateTime: "2022-03-13T05:04:53.54", state: "Oregon", regular: 4.73, midGrade: 4.92,…} 5: {id: 9397, dateTime: "2022-03-14T05:05:06.73", state: "Oregon", regular: 4.74, midGrade: 4.92,…} 6: {id: 9448, dateTime: "2022-03-15T05:04:55.69", state: "Oregon", regular: 4.74, midGrade: 4.92,…} 7: {id: 9499, dateTime: "2022-03-16T05:05:00.057", state: "Oregon", regular: 4.73, midGrade: 4.92,…} 8: {id: 9550, dateTime: "2022-03-17T05:05:14.053", state: "Oregon", regular: 4.71, midGrade: 4.92,…} 9: {id: 9601, dateTime: "2022-03-18T05:05:27.097", state: "Oregon", regular: 4.7, midGrade: 4.92,…} 10: {id: 9652, dateTime: "2022-03-19T05:05:15.56", state: "Oregon", regular: 4.7, midGrade: 4.91,…} 11: {id: 9703, dateTime: "2022-03-20T05:05:06.317", state: "Oregon", regular: 4.71, midGrade: 4.91,…} 12: {id: 9754, dateTime: "2022-03-21T05:05:06.853", state: "Oregon", regular: 4.71, midGrade: 4.9,…} 13: {id: 9805, dateTime: "2022-03-22T05:05:03.377", state: "Oregon", regular: 4.71, midGrade: 4.91,…}
The problem I am having with this is once the AJAX called the API to get the data, I have to flip the array in the reverse order for it to display the correctly and below is the output of how it looks like:
As shown above, the start date is in the wrong position and the end date is at the start position of the graph. If I didn't reverse the array, I would have the opposite direction of the graph but the graph does not align correctly (shown below):
I was wondering if the igDataChart has it way of configuring the timeDate format or is it something else? Any suggestion would be great!
Thank you
Hello Tu,
Thank you for contacting Infragistics Support!
I believe that you will find the following sample I have prepared for you very helpful. As you can observe when setting the axisX type to categoryDateTimeX, the igDataChart manages successfully to order the items and you won’t have to reverse or sort the array. For example, I have placed the following date “2022-03-02T05:05:04.947” in the middle of the array and it is still displayed at the beginning of the chart. Please let me know if you need any additional information.
Best Regards, Martin Evtimov Software Developer Infragistics, Inc.
Hi Martin,
Thank you for your reply and helping out, I tried to implement this and test it out and it works when the array is static. Currently, I'm working on this with an API call and using ajax to get the data, and the data would not update on the DataChart with the ajax call with this layout. Is there a way to use this layout calling the usage of a dynamically rather than static?
Thank you,