Saving the Timeline

Overview

If KronoGraph is being used for investigative work, you may want to be able to reproduce a particular view of the timeline in order to show how a specific conclusion was reached.

KronoGraph enables you to:

• export a static image of the timeline that can then be shared
• create and restore a full snapshot of the timeline, so that users can view and scroll through a series of events starting from a particular view

Exporting an Image

import { createTimeline } from 'kronograph';
import { data } from './data';

const timeline = createTimeline('my-timeline');
timeline.set(data);
timeline.fit();
timeline.export({ type: 'png' }).then(({url}) => {
  window.open(url);
});

import React, {useEffect, useRef} from 'react';
import Timeline from 'kronograph/react/Timeline';
import { entities, events, markers } from './data';

export const Demo = () => {
  const timelineRef = useRef(null);

  useEffect(() => {
    timelineRef.current.export({type: 'png'}).then(({url}) => {
      window.open(url);
    })
  });

  return <Timeline
            ref={timelineRef}
            events={events}
            entities={entities}
            markers={markers}
          />;
};

Try exporting a timeline in our Export to PNG story.

Using Snapshots

If you want to save the current timeline component as a snapshot so that you can come back to it at a later date, and reload it exactly as it was, use the serialize function. serialize.

You can then use the load(snapshot) function the spread operator to restore the timeline to exactly how it was. This is illustrated in the Save/Load Snapshot story.