--- /dev/null
+<html>
+ <head>
+ <title>Natural Tiny Logger (NT-Logger)</title>
+
+ <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+ <script type="text/javascript" src="./timeline/timeline.js"></script>
+ <link rel="stylesheet" type="text/css" href="./timeline/timeline.css">
+
+ <style>
+ body {font: 10pt arial;}
+
+ div.timeline-frame {
+ border-color: gray;
+ }
+
+ div.timeline-axis {
+ border-color: gray;
+
+ background-color: gray;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#EEEFF1'); /* for IE */
+ background: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#EEEFF1)); /* for webkit browsers */
+ background: -moz-linear-gradient(top, #F9F9F9, #EEEFF1); /* for firefox 3.6+ */
+ }
+
+ div.timeline-axis-text {
+ font: bold 12px arial;
+ color: black;
+ }
+
+ div.timeline-event {
+ border: none;
+ background-color: cornflowerblue;
+ }
+ div.timeline-event-selected {
+ background-color: mediumslateblue;
+ }
+ div.timeline-event-content {
+ margin: 0px;
+ }
+
+ div.timeline-groups-axis {
+ border-color: gray;
+ }
+ div.timeline-groups-text {
+ font: bold 12px arial;
+ color: black;
+ }
+
+ div.event {
+ border: 1px solid white;
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+
+ font: bold 12px arial;
+ color: black;
+
+ padding: 2px;
+ margin: 1px;
+ overflow: hidden;
+ }
+
+ </style>
+
+ <script type="text/javascript">
+ var timeline = null;
+
+ google.load("visualization", "1");
+
+ // Set callback to run when API is loaded
+ google.setOnLoadCallback(drawVisualization);
+
+ // Called when the Visualization API is loaded.
+ function drawVisualization() {
+ // Create and populate a data table.
+ var data = new google.visualization.DataTable();
+ data.addColumn('datetime', 'start');
+ data.addColumn('datetime', 'end');
+ data.addColumn('string', 'content');
+ data.addColumn('string', 'group');
+
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+ // Insert target timeline data here
+
+ // specify options
+ var options = {
+ width: "100%",
+ height: "auto",
+ layout: "box",
+ editable: false,
+ eventMargin: 5, // minimal margin between events
+ eventMarginAxis: 0, // minimal margin beteen events and the axis
+ showMajorLabels: true,
+ axisOnTop: true,
+ groupsChangeable : true,
+ groupsOnRight: false
+ };
+
+ // Instantiate our timeline object.
+ timeline = new links.Timeline(document.getElementById('mytimeline'));
+
+ // Draw our timeline with the created data and options
+ timeline.draw(data, options);
+ }
+ </script>
+ </head>
+
+ <body>
+ <h1>Natural Tiny Logger (NT-Logger)</h1>
+ <div id="mytimeline"></div>
+ </body>
+
+</html>
+
OSDN Git Service
