Search code examples
javascriptdatetimeplottransformzingchart

Zingchart plotting X-axis with Times, not Dates

I want to plot data with my X-axis representing Timespans (elapsed times), not actual dates.

I have a series with the following (string) values:

times: "00:00:00", "00:01:00", "00:10:00", "00:11:00"

I parse these values into (int)

times: 0, 6000, 60000, 66000

But when I draw the graph, the hour field is wrong. It shows "2" instead of "0" or "00". Minutes and seconds seem fine: enter image description here

Here is my json code. I played with the Hours field, with no success:

// Description of the graph to be displayed
vm.chartJson = {
   type: 'line',
   scaleX: {
      transform: {  
         type: 'date',  
         all: '%H:%h:%G:%g:%i:%s'  
      }
   },
   series: [{ values: data }]
};

How can I display the Hours field, while still manipulating TIMES and not Datetimes? How would that go if the total number of hours goes above 24? I would be okay with either displaying the total number of hours, or adding a day field. Example: "124:22:01" or "5:4:22:01"

Thank you

Solution

  • Here is what I did to solve the issue:

    // Determine the format of x-axis
var format = '%i:%s';
if (data[data.length - 1][0] >= 3600000) format = '%G:%i:%s';

// Description of the graph to be displayed
vm.chartJson = {
  type: 'line',
     scaleX: {
     transform: {  
        type: 'date',  
        all: format
     }
  },
  series: [{ values: data }],
  "utc": true,
  "timezone": 0
};

    I can't display Hours more than 24, so I could display days if needed.