timelines-chart
timelines-chart copied to clipboard
vasturiano
Start and End time of chart
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
@sqall01 you can use .zoomX([start, end]) to programatically focus on a specific time range.
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.
@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')])
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.
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
