<commit_before><html>

<head>
  <title>vis.js | timeline documentation</title>

  <link href='css/prettify.css' type='text/css' rel='stylesheet'>
  <link href='css/style.css' type='text/css' rel='stylesheet'>

  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>

<body onload="prettyPrint();">
<div id="container">

<h1>Timeline documentation</h1>

<h2 id="Overview">Overview</h2>
<p>
  The Timeline is an interactive visualization chart to visualize data in time.
  The data items can take place on a single date, or have a start and end date (a range).
  You can freely move and zoom in the timeline by dragging and scrolling in the
  Timeline. Items can be created, edited, and deleted in the timeline.
  The time scale on the axis is adjusted automatically, and supports scales ranging
  from milliseconds to years.
</p>


<h2 id="Contents">Contents</h2>
<ul>
  <li><a href="#Overview">Overview</a></li>
  <li><a href="#Example">Example</a></li>
  <li><a href="#Loading">Loading</a></li>
  <li><a href="#Data_Format">Data Format</a>
    <ul>
      <li><a href="#items">Items</a></li>
      <li><a href="#groups">Groups</a></li>
    </ul>
  </li>
  <li><a href="#Configuration_Options">Configuration Options</a></li>
  <li><a href="#Methods">Methods</a></li>
  <li><a href="#Events">Events</a></li>
  <li><a href="#Editing_Items">Editing Items</a></li>
  <li><a href="#Styles">Styles</a></li>
  <li><a href="#Data_Policy">Data Policy</a></li>
</ul>

<h2 id="Example">Example</h2>
<p>
  The following code shows how to create a Timeline and provide it with data.
  More examples can be found in the <a href="../examples">examples</a> directory.
</p>

<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Timeline | Basic demo&lt;/title&gt;

  &lt;style type="text/css"&gt;
    body, html {
      font-family: sans-serif;
    }
  &lt;/style&gt;

  &lt;script src="../../dist/vis.js"&gt;&lt;/script&gt;
  &lt;link href="../../dist/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="visualization"&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;
  var container = document.getElementById('visualization');
  var items = [
    {id: 1, content: 'item 1', start: '2013-04-20'},
    {id: 2, content: 'item 2', start: '2013-04-14'},
    {id: 3, content: 'item 3', start: '2013-04-18'},
    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: 'item 5', start: '2013-04-25'},
    {id: 6, content: 'item 6', start: '2013-04-27'}
  ];
  var options = {};
  var timeline = new vis.Timeline(container, items, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>


<h2 id="Loading">Loading</h2>
<p>
  Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library.
  in a subfolder of your project. Include the libraries script and css files in the
  head of your html code:
</p>

<pre class="prettyprint lang-html">
&lt;script src="vis/dist/vis.js"&gt;&lt;/script&gt;
&lt;link href="vis/dist/vis.css" rel="stylesheet" type="text/css" /&gt;
</pre>

The constructor of the Timeline is <code>vis.Timeline</code>
<pre class="prettyprint lang-js">var timeline = new vis.Timeline(container, items, options);</pre>


The constructor accepts three parameters:
<ul>
  <li>
    <code>container</code> is the DOM element in which to create the graph.
  </li>
  <li>
    <code>items</code> is an Array containing items. The properties of an
    item are described in section <a href="#Data_Format">Data Format</a>.
  </li>
  <li>
    <code>options</code> is an optional Object containing a name-value map
    with options. Options can also be set using the method
    <code>setOptions</code>.
  </li>
</ul>

<h2 id="Data_Format">Data Format</h2>

<p>
  The timeline can be provided with two types of data:
</p>
<ul>
  <li><a href="#items">Items</a> containing a set of items to be displayed in time.</li>
  <li><a href="#groups">Groups</a> containing a set of groups used to group items
    together.</li>
</ul>

<h3 id="items">Items</h3>
<p>
  The Timeline uses regular Arrays and Objects as data format.
  Data items can contain the properties <code>start</code>,
  <code>end</code> (optional), <code>content</code>,
  <code>group</code> (optional), and <code>className</code> (optional).
</p>

<p>
  A table is constructed as:
</p>

<pre class="prettyprint lang-js">
var items = [
  {
    start: new Date(2010, 7, 15),
    end: new Date(2010, 8, 2),  // end is optional
    content: 'Trajectory A'
    // Optional: fields 'id', 'type', 'group', 'className'
  }
  // more items...
]);
</pre>

<p>
  The item properties are defined as:
</p>

<table>
  <tr>
    <th>Name</th>
    <th>Type</th>
    <th>Required</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>id</td>
    <td>String | Number</td>
    <td>no</td>
    <td>An id for the item. Using an id is not required but highly
      recommended. An id is needed when dynamically adding, updating,
      and removing items in a DataSet.</td>
  </tr>
  <tr>
    <td>start</td>
    <td>Date</td>
    <td>yes</td>
    <td>The start date of the item, for example <code>new Date(2010,09,23)</code>.</td>
  </tr>
  <tr>
    <td>end</td>
    <td>Date</td>
    <td>no</td>
    <td>The end date of the item. The end date is optional, and can be left <code>null</code>.
      If end date is provided, the item is displayed as a range.
      If not, the item is displayed as a box.</td>
  </tr>
  <tr>
    <td>content</td>
    <td>String</td>
    <td>yes</td>
    <td>The contents of the item. This can be plain text or html code.</td>
  </tr>
  <tr>
    <td>type</td>
    <td>String</td>
    <td>'box'</td>
    <td>The type of the item. Can be 'box' (default), 'range', or 'point'.
      <!-- TODO: describe rangeoverflow -->
    </td>
  </tr>
  <tr>
    <td>group</td>
    <td>any type</td>
    <td>no</td>
    <td>This field is optional. When the group column is provided,
      all items with the same group are placed on one line.
      A vertical axis is displayed showing the groups.
      Grouping items can be useful for example when showing availability of multiple
      people, rooms, or other resources next to each other.<br>
    </td>
  </tr>
  <tr>
    <td>className</td>
    <td>String</td>
    <td>no</td>
    <td>This field is optional. A className can be used to give items
      an individual css style. For example, when an item has className
      'red', one can define a css style
      <code>
        .red {
        background-color: red;
        border-color: dark-red;
        }
      </code>.
      More details on how to style items can be found in the section
      <a href="#Styles">Styles</a>.
    </td>
  </tr>
</table>

<h3 id="groups">Groups</h3>
<p>
  Like the items, groups are regular JavaScript Arrays and Objects.
  Using groups, items can be grouped together.
  Items are filtered per group, and displayed as

  Group items can contain the properties <code>id</code>,<commit_msg>Updated documentation on className<commit_after><html>

<head>
  <title>vis.js | timeline documentation</title>

  <link href='css/prettify.css' type='text/css' rel='stylesheet'>
  <link href='css/style.css' type='text/css' rel='stylesheet'>

  <script type="text/javascript" src="lib/prettify/prettify.js"></script>
</head>

<body onload="prettyPrint();">
<div id="container">

<h1>Timeline documentation</h1>

<h2 id="Overview">Overview</h2>
<p>
  The Timeline is an interactive visualization chart to visualize data in time.
  The data items can take place on a single date, or have a start and end date (a range).
  You can freely move and zoom in the timeline by dragging and scrolling in the
  Timeline. Items can be created, edited, and deleted in the timeline.
  The time scale on the axis is adjusted automatically, and supports scales ranging
  from milliseconds to years.
</p>


<h2 id="Contents">Contents</h2>
<ul>
  <li><a href="#Overview">Overview</a></li>
  <li><a href="#Example">Example</a></li>
  <li><a href="#Loading">Loading</a></li>
  <li><a href="#Data_Format">Data Format</a>
    <ul>
      <li><a href="#items">Items</a></li>
      <li><a href="#groups">Groups</a></li>
    </ul>
  </li>
  <li><a href="#Configuration_Options">Configuration Options</a></li>
  <li><a href="#Methods">Methods</a></li>
  <li><a href="#Events">Events</a></li>
  <li><a href="#Editing_Items">Editing Items</a></li>
  <li><a href="#Styles">Styles</a></li>
  <li><a href="#Data_Policy">Data Policy</a></li>
</ul>

<h2 id="Example">Example</h2>
<p>
  The following code shows how to create a Timeline and provide it with data.
  More examples can be found in the <a href="../examples">examples</a> directory.
</p>

<pre class="prettyprint lang-html">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Timeline | Basic demo&lt;/title&gt;

  &lt;style type="text/css"&gt;
    body, html {
      font-family: sans-serif;
    }
  &lt;/style&gt;

  &lt;script src="../../dist/vis.js"&gt;&lt;/script&gt;
  &lt;link href="../../dist/vis.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="visualization"&gt;&lt;/div&gt;

&lt;script type="text/javascript"&gt;
  var container = document.getElementById('visualization');
  var items = [
    {id: 1, content: 'item 1', start: '2013-04-20'},
    {id: 2, content: 'item 2', start: '2013-04-14'},
    {id: 3, content: 'item 3', start: '2013-04-18'},
    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: 'item 5', start: '2013-04-25'},
    {id: 6, content: 'item 6', start: '2013-04-27'}
  ];
  var options = {};
  var timeline = new vis.Timeline(container, items, options);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>


<h2 id="Loading">Loading</h2>
<p>
  Install or download the <a href="http://visjs.org" target="_blank">vis.js</a> library.
  in a subfolder of your project. Include the libraries script and css files in the
  head of your html code:
</p>

<pre class="prettyprint lang-html">
&lt;script src="vis/dist/vis.js"&gt;&lt;/script&gt;
&lt;link href="vis/dist/vis.css" rel="stylesheet" type="text/css" /&gt;
</pre>

The constructor of the Timeline is <code>vis.Timeline</code>
<pre class="prettyprint lang-js">var timeline = new vis.Timeline(container, items, options);</pre>


The constructor accepts three parameters:
<ul>
  <li>
    <code>container</code> is the DOM element in which to create the graph.
  </li>
  <li>
    <code>items</code> is an Array containing items. The properties of an
    item are described in section <a href="#Data_Format">Data Format</a>.
  </li>
  <li>
    <code>options</code> is an optional Object containing a name-value map
    with options. Options can also be set using the method
    <code>setOptions</code>.
  </li>
</ul>

<h2 id="Data_Format">Data Format</h2>

<p>
  The timeline can be provided with two types of data:
</p>
<ul>
  <li><a href="#items">Items</a> containing a set of items to be displayed in time.</li>
  <li><a href="#groups">Groups</a> containing a set of groups used to group items
    together.</li>
</ul>

<h3 id="items">Items</h3>
<p>
  The Timeline uses regular Arrays and Objects as data format.
  Data items can contain the properties <code>start</code>,
  <code>end</code> (optional), <code>content</code>,
  <code>group</code> (optional), and <code>className</code> (optional).
</p>

<p>
  A table is constructed as:
</p>

<pre class="prettyprint lang-js">
var items = [
  {
    start: new Date(2010, 7, 15),
    end: new Date(2010, 8, 2),  // end is optional
    content: 'Trajectory A'
    // Optional: fields 'id', 'type', 'group', 'className'
  }
  // more items...
]);
</pre>

<p>
  The item properties are defined as:
</p>

<table>
  <tr>
    <th>Name</th>
    <th>Type</th>
    <th>Required</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>id</td>
    <td>String | Number</td>
    <td>no</td>
    <td>An id for the item. Using an id is not required but highly
      recommended. An id is needed when dynamically adding, updating,
      and removing items in a DataSet.</td>
  </tr>
  <tr>
    <td>start</td>
    <td>Date</td>
    <td>yes</td>
    <td>The start date of the item, for example <code>new Date(2010,09,23)</code>.</td>
  </tr>
  <tr>
    <td>end</td>
    <td>Date</td>
    <td>no</td>
    <td>The end date of the item. The end date is optional, and can be left <code>null</code>.
      If end date is provided, the item is displayed as a range.
      If not, the item is displayed as a box.</td>
  </tr>
  <tr>
    <td>content</td>
    <td>String</td>
    <td>yes</td>
    <td>The contents of the item. This can be plain text or html code.</td>
  </tr>
  <tr>
    <td>type</td>
    <td>String</td>
    <td>'box'</td>
    <td>The type of the item. Can be 'box' (default), 'range', or 'point'.
      <!-- TODO: describe rangeoverflow -->
    </td>
  </tr>
  <tr>
    <td>group</td>
    <td>any type</td>
    <td>no</td>
    <td>This field is optional. When the group column is provided,
      all items with the same group are placed on one line.
      A vertical axis is displayed showing the groups.
      Grouping items can be useful for example when showing availability of multiple
      people, rooms, or other resources next to each other.<br>
    </td>
  </tr>
  <tr>
    <td>className</td>
    <td>String</td>
    <td>no</td>
    <td>This field is optional. A className can be used to give items
      an individual css style. For example, when an item has className
      'red', one can define a css style like:
      <pre class="prettyprint lang-css">
.vis.timeline .red {
  color: white;
  background-color: red;
  border-color: darkred;
}</pre>
      More details on how to style items can be found in the section
      <a href="#Styles">Styles</a>.
    </td>
  </tr>
</table>

<h3 id="groups">Groups</h3>
<p>
  Like the items, groups are regular JavaScript Arrays and Objects.
  Using groups, items can be grouped together.
  Items are filtered per group, and displayed as

  Group items can contain the properties <code>id</code>,
{'fraction_non_alphanumeric': 0.17055527976739238, 'fraction_numerical': 0.014892560811289979, 'mean_word_length': 3.451388888888889, 'pattern_counts': {'":': 0, '<': 483, '<?xml version=': 0, '>': 483, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5678452', 'n_tokens_mistral': 5063, 'n_tokens_neox': 4859, 'n_words': 1562}