Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
igDataChart Configuration
posted

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