From fd80837b94d0c950e39bc3200d339250e5eb9b20 Mon Sep 17 00:00:00 2001 From: jos Date: Fri, 22 May 2015 14:22:45 +0200 Subject: [PATCH] Updated the page timeline_examples.html --- css/examples.css | 18 +- examples/timeline/12_custom_styling.html | 100 ------- index.html | 6 +- network_examples.html | 50 ++-- timeline_examples.html | 331 ++++------------------- 5 files changed, 99 insertions(+), 406 deletions(-) delete mode 100644 examples/timeline/12_custom_styling.html diff --git a/css/examples.css b/css/examples.css index 6f99ca6b..6a5621b0 100644 --- a/css/examples.css +++ b/css/examples.css @@ -58,4 +58,20 @@ div.exampleTitle { line-height: 30px; border-bottom-left-radius:5px; border-bottom-right-radius:5px; -} \ No newline at end of file +} + +a.exampleLink:before { + content:''; + display:inline-block; + margin-left:15px; + width: 15px; + height: 10px; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + border-left: 5px solid #688fba; +} + +a.exampleLink { + display:block; + text-decoration: underline; +} diff --git a/examples/timeline/12_custom_styling.html b/examples/timeline/12_custom_styling.html deleted file mode 100644 index c0917b63..00000000 --- a/examples/timeline/12_custom_styling.html +++ /dev/null @@ -1,100 +0,0 @@ - - - - Timeline | Custom styling - - - - - - - - - - -

- The style of the Timeline can be fully customized via CSS: -

-
- - - - \ No newline at end of file diff --git a/index.html b/index.html index f6fb5c60..c47a7fb5 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,9 @@ - + + + + + diff --git a/network_examples.html b/network_examples.html index 99952d70..1620a9b6 100644 --- a/network_examples.html +++ b/network_examples.html @@ -22,23 +22,6 @@ - - @@ -76,10 +59,13 @@

Network Examples

- We have seperated the examples into groups to make it easier to navigate them. For the documentation, please click the button below:

- View docs » + This page contains examples which show how to use Network. For the documentation, please click the button below:

+ View docs » + +

basic usage

+ basic usage -

node styles

+

node styles

colors groups custom groups @@ -89,43 +75,51 @@ circular images node shadows node shapes -

edge styles

+ +

edge styles

arrows (also combined with dashes) different colors dashes smooth curves smooth curves in action -

labels

+ +

labels

label alignment (for edges only) label background colors and sizes label stroke multiline text -

layout

+ +

layout

hierarchical layout hierarchical layout - different methods hierarchical layout - user defined set the random seed so every network will be the same -

events

+ +

events

interaction events, click, rightclick, drag etc. physics events, stabilization etc. rendering events, use to draw custom items on the canvas. -

dynamic data

+ +

dynamic data

dataset for dynamic data dynamic data, playground importing data from gephi scaling the nodes with the value. scaling the nodes and edges with the value. scaling the nodes, edges and labels with the value. -

physics

+ +

physics

physics configuration -

example applications

+ +

example applications

les miserables cast loading bar during stabilization neighbourhood heighlight using nodes as a legend performance test with the worldcup data -

other

+ +

other

animation showcase clustering possibilities clustering by zoom diff --git a/timeline_examples.html b/timeline_examples.html index 1393af69..aa5f0770 100644 --- a/timeline_examples.html +++ b/timeline_examples.html @@ -4,7 +4,6 @@ - Timeline Examples @@ -17,42 +16,12 @@ - - - - - @@ -87,258 +56,68 @@
-
-

Timeline Examples

-View all examples » View docs » - -
This small code example shows the easiest way to get a timline up and running. This code has been taken from example 1. The working example is shown next to it. Click it to start the interaction.
-
-<div id="visualization"></div>
-
-<script type="text/javascript">
-  // DOM element where the Timeline will be attached
-  var container = document.getElementById('visualization');
 
-  // Create a DataSet (allows two way data-binding)
-  var items = new vis.DataSet([
-    {id: 1, content: 'item 1', start: '2014-04-20'},
-    {id: 2, content: 'item 2', start: '2014-04-14'},
-    {id: 3, content: 'item 3', start: '2014-04-18'},
-    {id: 4, content: 'item 4', start: '2014-04-16'}
-    {id: 5, content: 'item 5', start: '2014-04-25'},
-    {id: 6, content: 'item 6', start: '2014-04-27'}
-  ]);
-
-  // Configuration for the Timeline
-  var options = {};
-
-  // Create a Timeline
-  var timeline = new vis.Timeline(
-    container,
-    items,
-    options
-    );
-</script>
-
+
+

Timeline Examples

+ This page contains examples which show how to use Timeline. For the documentation, please click the button below:

+ View docs » + +

basic_usage

+ basic usage + +

interaction

+ animate window + click to use + event listeners + limit move and zoom of the window + navigation menu + set selection + +

editing

+ custom snapping of items + editing items + editing items, manipulate using callbacks + update data on event + +

items

+ HTML contents + point items + background areas + background areas with groups + item ordering + range overflow item + +

groups

+ groups + ordering of groups + subgroups + +

styling

+ item class names + item templates + axis orientation + custom CSS + grid styling + +

data handling

+ data serialization + load external data + +

other

+ custom time bars + data attributes + all data attributes + perforance of groups + hiding periods + localization + performance -

All examples

-
-
- - -
basic usage
- -
-
- - -
interactive
- -
-
- - -
performance
- -
-
- - -
html data
- -
-
- - -
groups
- -
-
- - -
event listeners
- -
-
- - -
custom time bar
- -
-
- - -
edit items
- -
-
- - -
order groups
- -
-
- - -
limit move and zoom
- -
-
- - -
points
- -
-
- - -
custom styling
- -
-
- - -
past and future
- -
-
- - -
group performance
- -
-
- - -
item class names
- -
-
- - -
navigation menu
- -
-
- - -
data serialization
- -
-
- - -
range overflow
- -
-
- - -
localization
- -
-
- - -
click to use
- -
-
- - -
set selection
- -
-
- - -
window adjustment
- -
-
- - -
data attributes
- -
-
- - -
all data attributes
- -
-
- - -
background areas
- -
-
- - -
external data
- -
-
- - -
templates
- -
- -
- - -
hiding times
- -
-
- - -
subgroups
- -
-
- - -
background areas with groups
- -
-
- - -
grid styling
- -
-
- - -
custom snapping
- -
-
- - -
add custom timebar
- -
-
- - -
item ordering
- -
-
- - -
requirejs example
- -




+