search

vasturiano / timelines-chart

Timelines Chart
http://vasturiano.github.io/timelines-chart/example/categorical/
MIT License
556 stars 121 forks source link

Start and End time of chart #75

Open sqall01 opened 4 years ago

sqall01 commented 4 years ago

Hi, is it possible to give the chart a start and end time in which the x-axis will be scaled? At the moment, the chart starts at the first occuring data point and ends at the last occuring data point. However, I would like to start the chart before the first data point (and also end it after the last one) so it does not look so squeezed together on the first/last data point.

Cheers, sqall

vasturiano commented 4 years ago

@sqall01 you can use .zoomX([start, end]) to programatically focus on a specific time range.

sqall01 commented 4 years ago

I already tried this. But it does not have an effect. Is this the same format that timeRange: [start, end] of each data point is using?

Here is an example in which I added an additional day to end and subtracted one for start:

<head>
  <script src="static/timelines-chart.js"></script>
</head>

<body>

<div id="timeline">
</div>

<script>

  const graphData = [

    {
      group: "PC-Name",
      data: [

        {
          label: "User1",
          data: [

            {
              timeRange: ["2020-03-03T16:59:16+01:00", "2020-03-03T16:59:26+01:00"],
              val: "No Logon Type",
              labelVal: "No Logon Type",
            },

          ],
        },

      ],
    },

  ];

  if (graphData.length !== 0) {
    TimelinesChart()(document.getElementById("timeline"))
            .zScaleLabel('Logon Types')
            .zQualitative(true)
            .maxHeight(1200)
            .zoomX("2020-03-02T16:58:16+01:00", "2020-03-04T16:59:16+01:00")
            .data(graphData);
  }

</script>

</body>

The timeline still just shows the 10 seconds of the event.

vasturiano commented 4 years ago

@sqall01 there's a few things going on here. First the zoomX function expects an array of two values, not two separate arguments. Also, the timestamps should be Date objects, not plain strings.

So the syntax should be: .zoomX([new Date('2020-03-02T16:58:16+01:00'), new Date('2020-03-04T16:59:16+01:00')])

And lastly, you should run zoomX after you load the data, otherwise the data load will cause a reset of whatever zoom you had set, so you're back where you started. Just swap the order of the methods:

TimelinesChart()(document.getElementById("timeline"))
            .zScaleLabel('Logon Types')
            .zQualitative(true)
            .maxHeight(1200)
            .data(graphData)
            .zoomX([new Date('2020-03-02T16:58:16+01:00'), new Date('2020-03-04T16:59:16+01:00')])
sqall01 commented 4 years ago

Ok, thank you. Does the "timeRange" key of a data point also take a Date object and not a string?

Also I did it like you suggested. However, now the timechart just is empty until I zoom in. To make sure that it is not the scale, I changed the zoom to:

    TimelinesChart()(document.getElementById("timeline"))
            .zScaleLabel('Logon Types')
            .zQualitative(true)
            .maxHeight(1200)
            .data(graphData)
            .zoomX(new Date("2020-03-03T16:57:16+01:00"), new Date("2020-03-03T16:59:50+01:00"));

and left the other data the same.

Arvind-puthucode commented 1 year ago

hey sqlall01 i did sort the issue out what you can do is give two data point as the scale you need with zero seconds of time from both start and end ans hre im assuming that your chart doesnt need less than 1 ms data points to be visible then use the minimum segment visible with 1 ms so that u can get the best of both suppose you also a segment with 0 ms then what you can do is make the time range of these dummy points negative ie startPoint<endPoint this i havent tried