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

Parents
No Data
Reply
  • 740
    Verified Answer
    Offline posted

    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.

Children