jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Added HTML data example

css_transitions
josdejong 11 years ago
parent
f3d1a63f17
commit
e0aa8eec53
17 changed files with 168 additions and 17 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -3
      HISTORY.md
  2. +1
    -0
      examples/timeline/03_much_data.html
  3. +69
    -0
      examples/timeline/04_html_data.html
  4. BIN
      examples/timeline/img/Hardware-Mobile-Phone-icon.png
  5. BIN
      examples/timeline/img/attachment-icon.png
  6. BIN
      examples/timeline/img/blog-post-edit-icon.png
  7. BIN
      examples/timeline/img/comments-icon.png
  8. BIN
      examples/timeline/img/community-users-icon.png
  9. +17
    -0
      examples/timeline/img/license.txt
  10. +36
    -0
      examples/timeline/img/license_aesthetica-2.txt
  11. +26
    -0
      examples/timeline/img/license_refresh-cl.txt
  12. BIN
      examples/timeline/img/mail-icon.png
  13. BIN
      examples/timeline/img/notes-edit-icon.png
  14. BIN
      examples/timeline/img/product-icon.png
  15. BIN
      examples/timeline/img/truck-icon.png
  16. +5
    -7
      src/util.js
  17. +5
    -7
      vis.js

+ 9
- 3
HISTORY.md View File

@ -2,19 +2,25 @@ vis.js history
http://visjs.org http://visjs.org
## 2012-04-25, version 0.0.7
## 2013-05-03, version 0.0.8
- Performance improvements: only visible items are rendered.
- Minor bug fixes and improvements.
## 2013-04-25, version 0.0.7
- Sanitized the published packages on npm and bower. - Sanitized the published packages on npm and bower.
## 2012-04-25, version 0.0.6
## 2013-04-25, version 0.0.6
- Css is now packaged in the javascript file, and automatically loaded. - Css is now packaged in the javascript file, and automatically loaded.
- The library uses node style dependency management for modules now, used - The library uses node style dependency management for modules now, used
with Browserify. with Browserify.
## 2012-04-16, version 0.0.5
## 2013-04-16, version 0.0.5
- First working version of the Timeline - First working version of the Timeline
- Website created. - Website created.

+ 1
- 0
examples/timeline/03_much_data.html View File

@ -51,6 +51,7 @@
var options = { var options = {
start: now.clone().add('days', -3), start: now.clone().add('days', -3),
end: now.clone().add('days', 11), end: now.clone().add('days', 11),
zoomMin: 1000 * 60 * 60 * 24, // a day
zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months zoomMax: 1000 * 60 * 60 * 24 * 30 * 3 // three months
//maxHeight: 300, //maxHeight: 300,
//height: '300px', //height: '300px',

+ 69
- 0
examples/timeline/04_html_data.html View File

@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | HTML data</title>
<style>
body, html {
font-family: arial, sans-serif;
font-size: 11pt;
}
span {
color: red;
}
span.large {
font-size: 200%;
}
</style>
<script src="../../vis.js"></script>
</head>
<body>
<p>
Load HTML contents in the Timeline
</p>
<div id="visualization"></div>
<script>
// create a couple of HTML items in various ways
var item1 = document.createElement('div');
item1.appendChild(document.createTextNode('item 1'));
var item2 = document.createElement('div');
item2.innerHTML = '<span>item 2</span>';
var item3 = document.createElement('div');
var span3 = document.createElement('span');
span3.className = 'large';
span3.appendChild(document.createTextNode('item 3'));
item3.appendChild(span3);
var item4 = 'item <span class="large">4</span>';
var item5 = document.createElement('div');
item5.appendChild(document.createTextNode('item 5'));
item5.appendChild(document.createElement('br'));
var img5 = document.createElement('img');
img5.src = 'img/attachment-icon.png';
img5.style.width = '48px';
img5.style.height = '48px';
item5.appendChild(img5);
var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';
// create data and a Timeline
var container = document.getElementById('visualization');
var data = [
{id: 1, content: item1, start: '2013-04-20'},
{id: 2, content: item2, start: '2013-04-14'},
{id: 3, content: item3, start: '2013-04-18'},
{id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
{id: 5, content: item5, start: '2013-04-25'},
{id: 6, content: item6, start: '2013-04-27'}
];
var options = {};
var timeline = new vis.Timeline(container, data, options);
</script>
</body>
</html>

BIN
examples/timeline/img/Hardware-Mobile-Phone-icon.png View File

Before After
Width: 48  |  Height: 48  |  Size: 3.4 KiB

BIN
examples/timeline/img/attachment-icon.png View File

Before After
Width: 48  |  Height: 48  |  Size: 2.7 KiB

BIN
examples/timeline/img/blog-post-edit-icon.png View File

Before After
Width: 48  |  Height: 48  |  Size: 4.1 KiB

BIN
examples/timeline/img/comments-icon.png View File

Before After
Width: 48  |  Height: 48  |  Size: 3.1 KiB

BIN
examples/timeline/img/community-users-icon.png View File

Before After
Width: 48  |  Height: 48  |  Size: 4.6 KiB

+ 17
- 0
examples/timeline/img/license.txt View File

@ -0,0 +1,17 @@
IMAGE LICENSES
REFRESH CL
http://www.iconarchive.com/category/system/refresh-cl-icons-by-tpdkdesign.net.html
License: Free for non-commercial use.
http://www.iconarchive.com/icons/tpdkdesign.net/refresh-cl/readme_eng.txt
AESTHETICA 2
http://www.iconarchive.com/category/application/aesthetica-2-icons-by-dryicons.html
License:
DryIcons Terms of Use
http://dryicons.com/terms/

+ 36
- 0
examples/timeline/img/license_aesthetica-2.txt View File

@ -0,0 +1,36 @@
Aesthetica Icon Set, version 2.0
http://dryicons.com/free-icons/preview/aesthetica-version-2/
Information
----------------------
This icon set contains 181 quality icons in the following formats:
Transparent PNG
16 x 16 px
24 x 24 px
32 x 32 px
48 x 48 px
128 x 128 px
Licensing
----------------------
The usage of DryIcons' work (icons, icon sets and graphics) is limited to the terms of the "Free License" and "Commercial License" use.
The DryIcons Free License means that you can use our icons, icon sets and graphics in any publicly accesible web site, web application or any form of presentation publicly accessible through the World Wide Web only according to the DryIcons Free License Terms and Conditions:
* You must put a back link with credits to http://dryicons.com on every page where DryIcons' Works are used (example: Icons by http://dryicons.com);
* You must include the correct back link to DryIcons website, which is: http://dryicons.com;
* You must place the link on an easy-to-see, recognizable place, so there is no confusion about the Original Author of the Works (DryIcons);
* When copying, or paraphrasing description text (or title) on one of the Works, you must make sure there are no spelling mistakes;
* Do not try to take credit or imply in any way that you and not DryIcons is the Original Author of the Works (icons, icon sets and graphics).
For a more detailed look at our Free License Agreement, please follow the link: http://dryicons.com/terms/#free-license
The DryIcons Commercial License means that you can use our Free Icon Sets and Free Graphics without being obligated to put a back link to DryIcons.com for a certain fee. After you complete yourpayment transaction DryIcons grants you a Commercial License.

+ 26
- 0
examples/timeline/img/license_refresh-cl.txt View File

@ -0,0 +1,26 @@
RefreshCL Icon Pack by TPDK ©2005 www.tpdkdesign.net
All rights reserved.
version 1.0 2005/18/11
Terms of use
Theses icons are copyrighted, and for personal use only.
Until now, COMMERCIAL USE is strictly forbidden.
You cannot (non-exhaustive list) :
- Use my icons in commercial website
- Use my icons in a professional website layout
- Sell or distribute those icons
For any other use, such as :
- using in non-commercial website
- using icon in free software under GPL licence
you need my authorization to use them. If you have my permission, you need to credit me in your terms and put a link to my website.
I would not be responsible fo any damage you may encounter while using this product.
For any question or request about the pack, please send me an email to tpdk@tpdkdesign.net.
Special thanks to customxp's & crystalxp's teams and members for help and support ;)
http://crystalxp.net
http://customxp.net
http://pngfactory.net
visit my deviantart webpage : http://tpdkcasimir.deviantart.com/

BIN
examples/timeline/img/mail-icon.png View File

Before After
Width: 48  |  Height: 48  |  Size: 3.2 KiB

BIN
examples/timeline/img/notes-edit-icon.png View File

Before After
Width: 48  |  Height: 48  |  Size: 2.8 KiB

BIN
examples/timeline/img/product-icon.png View File

Before After
Width: 32  |  Height: 32  |  Size: 1.6 KiB

BIN
examples/timeline/img/truck-icon.png View File

Before After
Width: 32  |  Height: 32  |  Size: 1.7 KiB

+ 5
- 7
src/util.js View File

@ -95,11 +95,9 @@ util.extend = function (a, b) {
/** /**
* Cast an object to another type * Cast an object to another type
* @param {Boolean | Number | String | Date | Moment | Null | undefined} object * @param {Boolean | Number | String | Date | Moment | Null | undefined} object
* @param {String | function | undefined} type Name of the type or a cast
* function. Available types:
* 'Boolean', 'Number', 'String',
* 'Date', 'Moment', ISODate',
* 'ASPDate'.
* @param {String | undefined} type Name of the type. Available types:
* 'Boolean', 'Number', 'String',
* 'Date', 'Moment', ISODate', 'ASPDate'.
* @return {*} object * @return {*} object
* @throws Error * @throws Error
*/ */
@ -116,8 +114,8 @@ util.cast = function cast(object, type) {
if (!type) { if (!type) {
return object; return object;
} }
if (typeof type == 'function') {
return type(object);
if (!(typeof type === 'string') && !(type instanceof String)) {
throw new Error('Type must be a string');
} }
//noinspection FallthroughInSwitchStatementJS //noinspection FallthroughInSwitchStatementJS

+ 5
- 7
vis.js View File

@ -126,11 +126,9 @@ util.extend = function (a, b) {
/** /**
* Cast an object to another type * Cast an object to another type
* @param {Boolean | Number | String | Date | Moment | Null | undefined} object * @param {Boolean | Number | String | Date | Moment | Null | undefined} object
* @param {String | function | undefined} type Name of the type or a cast
* function. Available types:
* 'Boolean', 'Number', 'String',
* 'Date', 'Moment', ISODate',
* 'ASPDate'.
* @param {String | undefined} type Name of the type. Available types:
* 'Boolean', 'Number', 'String',
* 'Date', 'Moment', ISODate', 'ASPDate'.
* @return {*} object * @return {*} object
* @throws Error * @throws Error
*/ */
@ -147,8 +145,8 @@ util.cast = function cast(object, type) {
if (!type) { if (!type) {
return object; return object;
} }
if (typeof type == 'function') {
return type(object);
if (!(typeof type === 'string') && !(type instanceof String)) {
throw new Error('Type must be a string');
} }
//noinspection FallthroughInSwitchStatementJS //noinspection FallthroughInSwitchStatementJS

Write Preview
Loading…
Cancel
Save