ApexCharts rangeBar chart Type - Coverting Ignition Datetime to chart datetime format

3rd Party Modules
,
1

@kyvislabs I am trying to create a Timeline chart (rangeBar) displaying the current periods of Loadshedding during the day.

How do I convert a ignition datetime stamp to the correct format the chart requires?

image
image511×537 26 KB

[
  {
    "x": "LoadShedding",
    "y": [
      "Fri Jan 12 14:51:00 SAST 2024",
      "Fri Jan 12 14:51:00 SAST 2024"
    ]
  },
  {
    "x": "LoadShedding",
    "y": [
      "Fri Jan 12 14:00:00 SAST 2024",
      "Fri Jan 12 14:00:00 SAST 2024"
    ]
  },
  {
    "x": "LoadShedding",
    "y": [
      "Sun Jan 14 02:00:00 SAST 2024",
      "Sun Jan 14 02:00:00 SAST 2024"
    ]
  },
  {
    "x": "LoadShedding",
    "y": [
      "Sun Jan 14 10:00:00 SAST 2024",
      "Sun Jan 14 10:00:00 SAST 2024"
    ]
  }
]
2

I suspect that your data binding is returning strings instead of date datatype. Can you check that or show us how you are generating the data?

The general rule is that you store and retrieve dates and times as datetime data types until the last possible moment and format them only for human consumption. That way you can do datetime calculations, manipulations, etc., and components such as date pickers, calendars and charts will not have to interpret them.

Timezones are another aspect of this and saving timestamps in UTC (Ignition's default) will greatly simplify managing your applications.

3 
ret=[]
data=system.dataset.toPyDataSet(value)
for event in data:

	eventDateStartString= event[0].replace('T',' ').replace('+02:00','')
	eventDateEndString= event[1].replace('T',' ').replace('+02:00','')

	eventDateStartTime=system.date.parse(eventDateStartString,'yyyy-MM-DD HH:mm:ss')
	eventDateEndTime=system.date.parse(eventDateEndString,'yyyy-MM-DD HH:mm:ss')

	eventDateEnd=system.date.format(eventDateEndTime,'yyyy-MM-DD hh:mm')
	eventDateStart=system.date.format(eventDateStartTime,'yyyy-MM-DD hh:mm')

I'm retrieving the data from a dataset, it is currently stored as a string (data is from an API) which I convert to a Ignition Datetime object.

Before I return the data I convert it to the correct string format.

I'm confused as it whether Apex charts module natively accepts Ignition Datetime object or only string datetimes?

If it is a string datetime what is the correct format? Can the format be provide to the charting component?

In the documentation they only provide examples with JavaScript datetimes
image

4

I haven't used Apex Charts module but looking at the docs for Plotting time scale on the X-axis example they show timestamps and not date strings. (There are two timestamps for each bar.)

  series: [{
    data: [{
      x: 'TEAM A',
      y: [1358447400000, 1358620200000]
    },
    {
      x: 'TEAM B',
      y: [1358447400000, 1358620200000]
    }]
  }]

Remove your string conversion and try converting the stored string to a timestamp. Have a look at Ignition's https://docs.inductiveautomation.com/display/DOC81/system.date.getDate. It will be quicker than an external library.

Alternatively, show us the database's string format and let's see if we can convert it in the SQL query.

5

Did you ever get this working by chance?

I have tried a few things, even just manually converting the series structure from the example and no luck.

Not Working - Example Data Structure 
[
  {
    "name": "Bob",
    "data": [
      {
        "x": "Design",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014178
            ],
            "$ts": 1551744000000
          },
          {
            "$": [
              "ts",
              192,
              1705464014179
            ],
            "$ts": 1552003200000
          }
        ]
      },
      {
        "x": "Code",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551484800000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551744000000
          }
        ]
      },
      {
        "x": "Code",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551744000000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551916800000
          }
        ]
      },
      {
        "x": "Test",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551571200000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552089600000
          }
        ]
      },
      {
        "x": "Test",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552003200000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552262400000
          }
        ]
      },
      {
        "x": "Validation",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552262400000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552694400000
          }
        ]
      },
      {
        "x": "Design",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551315600000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551571200000
          }
        ]
      }
    ]
  },
  {
    "name": "Joe",
    "data": [
      {
        "x": "Design",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551484800000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551744000000
          }
        ]
      },
      {
        "x": "Test",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551830400000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552694400000
          }
        ]
      },
      {
        "x": "Code",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551571200000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551916800000
          }
        ]
      },
      {
        "x": "Deployment",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1553040000000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1553212800000
          }
        ]
      },
      {
        "x": "Design",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552176000000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552694400000
          }
        ]
      }
    ]
  },
  {
    "name": "Dan",
    "data": [
      {
        "x": "Code",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552176000000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552780800000
          }
        ]
      },
      {
        "x": "Validation",
        "y": [
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1551744000000
          },
          {
            "$": [
              "ts",
              192,
              1705464014180
            ],
            "$ts": 1552089600000
          }
        ]
      }
    ]
  }
]

EDIT: I got it working shortly after with mills timestamps!

Working - Example Data Structure 
[
	{
	  "name": "Bob",
	  "data": [
		{
		  "x": "Design",
		  "y": [1551744000000,1552003200000]
		},
		{
		  "x": "Code",
		  "y": [1551484800000,1551744000000]
		},
		{
		  "x": "Code",
		  "y": [1551744000000,1551916800000]
		},
		{
		  "x": "Test",
		  "y": [1551571200000,1552089600000]
		},
		{
		  "x": "Test",
		  "y": [1552003200000,1552262400000]
		},
		{
		  "x": "Validation",
		  "y": [1552262400000,1552694400000]
		},
		{
		  "x": "Design",
		  "y": [1551315600000,1551571200000]
		}
	  ]
	},
	{
	  "name": "Joe",
	  "data": [
		{
		  "x": "Design",
		  "y": [1551484800000,1551744000000]
		},
		{
		  "x": "Test",
		  "y": [1551830400000,1552694400000]
		},
		{
		  "x": "Code",
		  "y": [1551571200000,1551916800000]
		},
		{
		  "x": "Deployment",
		  "y": [1553040000000,1553212800000]
		},
		{
		  "x": "Design",
		  "y": [1552176000000,1552694400000]
		}
	  ]
	},
	{
	  "name": "Dan",
	  "data": [
		{
		  "x": "Code",
		  "y": [1552176000000,1552780800000]
		},
		{
		  "x": "Validation",
		  "y": [1551744000000,1552089600000]
		}
	  ]
	}
  ]
2 Likes