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

Removed Graph3d.data, added Graph3d.setData and setOptions. Data and options can be passed when constructing a Graph3d

css_transitions
jos 10 years ago
parent
f2b1eed9d4
commit
a3c0b3565e
13 changed files with 164 additions and 180 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +27
    -25
      docs/graph3d.html
  2. +2
    -4
      examples/graph3d/example01_basis.html
  3. +3
    -5
      examples/graph3d/example02_camera.html
  4. +3
    -5
      examples/graph3d/example03_filter.html
  5. +3
    -6
      examples/graph3d/example04_animate.html
  6. +3
    -5
      examples/graph3d/example05_line.html
  7. +4
    -7
      examples/graph3d/example06_moving_dots.html
  8. +3
    -5
      examples/graph3d/example07_dot_cloud_colors.html
  9. +3
    -5
      examples/graph3d/example08_dot_cloud_size.html
  10. +3
    -5
      examples/graph3d/example09_mobile.html
  11. +3
    -5
      examples/graph3d/example10_styles.html
  12. +3
    -5
      examples/graph3d/example11_tooltips.html
  13. +104
    -98
      src/graph3d/Graph3d.js

+ 27
- 25
docs/graph3d.html View File

@ -91,22 +91,15 @@
verticalRatio: 0.5 verticalRatio: 0.5
}; };
// Instantiate our graph object.
graph3d = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph3d.draw(data, options);
// subscribe to event
graph3d.on("cameraPositionChange", function(event) {console.log(event);});
// create a graph3d
var container = document.getElementById('mygraph');
graph3d = new vis.Graph3d(container, data, options);
} }
</script> </script>
</head>
</head>
<body onload="drawVisualization();"> <body onload="drawVisualization();">
<div id="mygraph"></div> <div id="mygraph"></div>
<div id="info"></div>
</body> </body>
</html> </html>
@ -116,17 +109,19 @@
<h2 id="Loading">Loading</h2> <h2 id="Loading">Loading</h2>
<p> <p>
The class name of the Graph3d is <code>vis.Graph3d</code>
The class name of the Graph3d is <code>vis.Graph3d</code>.
When constructing a Graph3d, an HTML DOM container must be provided to attach
the graph to. Optionally, data an options can be provided.
Data is a vis <code>DataSet</code> or an <code>Array</code>, described in
section <a href="#Data_Format">Data Format</a>.
Options is a name-value map in the JSON format. The available options
are described in section <a href="#Configuration_Options">Configuration Options</a>.
</p> </p>
<pre class="prettyprint lang-js">var graph = new vis.Graph3d(container);</pre>
<pre class="prettyprint lang-js">var graph = new vis.Graph3d(container [, data] [, options]);</pre>
<p> <p>
After being loaded, the graph can be drawn via the function <code>draw()</code>,
provided with data and options.
</p>
<pre class="prettyprint lang-js">graph.draw(data, options);</pre>
<p>
where data is a vis <code>DataSet</code>, and options is a name-value map in the JSON format.
Data and options can be set or changed later on using the functions
<code>Graph3d.setData(data)</code> and <code>Graph3d.setOptions(options)</code>.
</p> </p>
<h2 id="Data_Format">Data Format</h2> <h2 id="Data_Format">Data Format</h2>
@ -535,12 +530,6 @@ options = {
Only applicable when animation data is available.</td> Only applicable when animation data is available.</td>
</tr> </tr>
<tr>
<td>draw(data, options)</td>
<td>none</td>
<td>Loads data, sets the provided options, and draws the 3d graph.</td>
</tr>
<tr> <tr>
<td>getCameraPosition()</td> <td>getCameraPosition()</td>
<td>An object with parameters <code>horizontal</code>, <td>An object with parameters <code>horizontal</code>,
@ -558,6 +547,19 @@ options = {
when data is changed, or when the layout of the webpage changed.</td> when data is changed, or when the layout of the webpage changed.</td>
</tr> </tr>
<tr>
<td>setData(data)</td>
<td>none</td>
<td>Replace the data in the Graph3d.</td>
</tr>
<tr>
<td>setOptions(options)</td>
<td>none</td>
<td>Update options of Graph3d.
The provided options will be merged with current options.</td>
</tr>
<tr> <tr>
<td>setSize(width, height)</td> <td>setSize(width, height)</td>
<td>none</td> <td>none</td>

+ 2
- 4
examples/graph3d/example01_basis.html View File

@ -45,10 +45,8 @@
}; };
// Instantiate our graph object. // Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
} }
</script> </script>
</head> </head>

+ 3
- 5
examples/graph3d/example02_camera.html View File

@ -71,13 +71,11 @@
verticalRatio: 0.5 verticalRatio: 0.5
}; };
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
// Draw our graph with the created data and options
graph.draw(data, options);
graph.on("cameraPositionChange", onCameraPositionChange); graph.on("cameraPositionChange", onCameraPositionChange);
//graph.redraw();
} }
</script> </script>
</head> </head>

+ 3
- 5
examples/graph3d/example03_filter.html View File

@ -48,11 +48,9 @@
filterLabel: "values" filterLabel: "values"
}; };
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
// Create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
} }
</script> </script>
</head> </head>

+ 3
- 6
examples/graph3d/example04_animate.html View File

@ -39,7 +39,6 @@
} }
} }
// specify options // specify options
var options = { var options = {
width: "600px", width: "600px",
@ -56,11 +55,9 @@
filterValue: "time" filterValue: "time"
}; };
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
} }
</script> </script>
</head> </head>

+ 3
- 5
examples/graph3d/example05_line.html View File

@ -42,11 +42,9 @@
verticalRatio: 1.0 verticalRatio: 1.0
}; };
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
graph.setCameraPosition(0.4, undefined, undefined); graph.setCameraPosition(0.4, undefined, undefined);
} }

+ 4
- 7
examples/graph3d/example06_moving_dots.html View File

@ -55,19 +55,16 @@
animationPreload: false, animationPreload: false,
animationAutoStart: true, animationAutoStart: true,
legendLabel: "color value", legendLabel: "color value",
cameraPosition:
{
cameraPosition: {
horizontal: 2.7, horizontal: 2.7,
vertical: 0.0, vertical: 0.0,
distance: 1.65 distance: 1.65
} }
}; };
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
} }
</script> </script>
</head> </head>

+ 3
- 5
examples/graph3d/example07_dot_cloud_colors.html View File

@ -51,11 +51,9 @@
} }
}; };
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
} }
</script> </script>
</head> </head>

+ 3
- 5
examples/graph3d/example08_dot_cloud_size.html View File

@ -52,11 +52,9 @@
} }
}; };
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
} }
</script> </script>
</head> </head>

+ 3
- 5
examples/graph3d/example09_mobile.html View File

@ -65,11 +65,9 @@
} }
}; };
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
} }
</script> </script>
</head> </head>

+ 3
- 5
examples/graph3d/example10_styles.html View File

@ -61,11 +61,9 @@
var camera = graph ? graph.getCameraPosition() : null; var camera = graph ? graph.getCameraPosition() : null;
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position if (camera) graph.setCameraPosition(camera); // restore camera position

+ 3
- 5
examples/graph3d/example11_tooltips.html View File

@ -64,11 +64,9 @@
var camera = graph ? graph.getCameraPosition() : null; var camera = graph ? graph.getCameraPosition() : null;
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position if (camera) graph.setCameraPosition(camera); // restore camera position

+ 104
- 98
src/graph3d/Graph3d.js View File

@ -5,9 +5,11 @@
* Graph is developed in javascript as a Google Visualization Chart. * Graph is developed in javascript as a Google Visualization Chart.
* *
* @param {Element} container The DOM element in which the Graph will * @param {Element} container The DOM element in which the Graph will
* be created. Normally a div element.
* be created. Normally a div element.
* @param {DataSet | DataView | Array} [data]
* @param {Object} [options]
*/ */
function Graph3d(container) {
function Graph3d(container, data, options) {
// create variables and set default values // create variables and set default values
this.containerElement = container; this.containerElement = container;
this.width = "400px"; this.width = "400px";
@ -70,7 +72,15 @@ function Graph3d(container) {
// create a frame and canvas // create a frame and canvas
this.create(); this.create();
};
// apply options (also when undefined)
this.setOptions(options);
// apply data
if (data) {
this.setData(data);
}
}
// Extend Graph with an Emitter mixin // Extend Graph with an Emitter mixin
Emitter(Graph3d.prototype); Emitter(Graph3d.prototype);
@ -320,92 +330,6 @@ Graph3d.prototype._convertTranslationToScreen = function(translation) {
this.ycenter - by * this.frame.canvas.clientWidth); this.ycenter - by * this.frame.canvas.clientWidth);
}; };
/**
* Main drawing logic. This is the function that needs to be called
* in the html page, to draw the Graph.
*
* A data table with the events must be provided, and an options table.
* @param {Object} data The data containing the events
* for the Graph.
* @param {Object} options A name/value map containing settings for the Graph.
*/
Graph3d.prototype.draw = function(data, options) {
var cameraPosition = undefined;
if (options !== undefined) {
// retrieve parameter values
if (options.width !== undefined) this.width = options.width;
if (options.height !== undefined) this.height = options.height;
if (options.xCenter !== undefined) this.defaultXCenter = options.xCenter;
if (options.yCenter !== undefined) this.defaultYCenter = options.yCenter;
if (options.filterLabel !== undefined) this.filterLabel = options.filterLabel;
if (options.legendLabel !== undefined) this.legendLabel = options.legendLabel;
if (options.xLabel !== undefined) this.xLabel = options.xLabel;
if (options.yLabel !== undefined) this.yLabel = options.yLabel;
if (options.zLabel !== undefined) this.zLabel = options.zLabel;
if (options.style !== undefined) {
var styleNumber = this._getStyleNumber(options.style);
if (styleNumber !== -1) {
this.style = styleNumber;
}
}
if (options.showGrid !== undefined) this.showGrid = options.showGrid;
if (options.showPerspective !== undefined) this.showPerspective = options.showPerspective;
if (options.showShadow !== undefined) this.showShadow = options.showShadow;
if (options.tooltip !== undefined) this.showTooltip = options.tooltip;
if (options.showAnimationControls !== undefined) this.showAnimationControls = options.showAnimationControls;
if (options.keepAspectRatio !== undefined) this.keepAspectRatio = options.keepAspectRatio;
if (options.verticalRatio !== undefined) this.verticalRatio = options.verticalRatio;
if (options.animationInterval !== undefined) this.animationInterval = options.animationInterval;
if (options.animationPreload !== undefined) this.animationPreload = options.animationPreload;
if (options.animationAutoStart !== undefined)this.animationAutoStart = options.animationAutoStart;
if (options.xBarWidth !== undefined) this.defaultXBarWidth = options.xBarWidth;
if (options.yBarWidth !== undefined) this.defaultYBarWidth = options.yBarWidth;
if (options.xMin !== undefined) this.defaultXMin = options.xMin;
if (options.xStep !== undefined) this.defaultXStep = options.xStep;
if (options.xMax !== undefined) this.defaultXMax = options.xMax;
if (options.yMin !== undefined) this.defaultYMin = options.yMin;
if (options.yStep !== undefined) this.defaultYStep = options.yStep;
if (options.yMax !== undefined) this.defaultYMax = options.yMax;
if (options.zMin !== undefined) this.defaultZMin = options.zMin;
if (options.zStep !== undefined) this.defaultZStep = options.zStep;
if (options.zMax !== undefined) this.defaultZMax = options.zMax;
if (options.valueMin !== undefined) this.defaultValueMin = options.valueMin;
if (options.valueMax !== undefined) this.defaultValueMax = options.valueMax;
if (options.cameraPosition !== undefined) cameraPosition = options.cameraPosition;
}
this._setBackgroundColor(options.backgroundColor);
this.setSize(this.width, this.height);
if (cameraPosition !== undefined) {
this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
this.camera.setArmLength(cameraPosition.distance);
}
else {
this.camera.setArmRotation(1.0, 0.5);
this.camera.setArmLength(1.7);
}
// draw the Graph
this.redraw(data);
// start animation when option is true
if (this.animationAutoStart && this.dataFilter) {
this.animationStart();
}
};
/** /**
* Set the background styling for the graph * Set the background styling for the graph
* @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor * @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor
@ -987,22 +911,99 @@ Graph3d.prototype._readData = function(data) {
this._redrawFilter(); this._redrawFilter();
}; };
/**
* Replace the dataset of the Graph3d
* @param {Array | DataSet | DataView} data
*/
Graph3d.prototype.setData = function (data) {
this._readData(data);
this.redraw();
};
/** /**
* Redraw the Graph. This needs to be executed after the start and/or
* end time are changed, or when data is added or removed dynamically.
* @param {DataSet} [data] Optional, new data table
* Update the options. Options will be merged with current options
* @param {Object} options
*/ */
Graph3d.prototype.redraw = function(data) {
// load the data if needed
if (data !== undefined) {
this._readData(data);
Graph3d.prototype.setOptions = function (options) {
var cameraPosition = undefined;
if (options !== undefined) {
// retrieve parameter values
if (options.width !== undefined) this.width = options.width;
if (options.height !== undefined) this.height = options.height;
if (options.xCenter !== undefined) this.defaultXCenter = options.xCenter;
if (options.yCenter !== undefined) this.defaultYCenter = options.yCenter;
if (options.filterLabel !== undefined) this.filterLabel = options.filterLabel;
if (options.legendLabel !== undefined) this.legendLabel = options.legendLabel;
if (options.xLabel !== undefined) this.xLabel = options.xLabel;
if (options.yLabel !== undefined) this.yLabel = options.yLabel;
if (options.zLabel !== undefined) this.zLabel = options.zLabel;
if (options.style !== undefined) {
var styleNumber = this._getStyleNumber(options.style);
if (styleNumber !== -1) {
this.style = styleNumber;
}
}
if (options.showGrid !== undefined) this.showGrid = options.showGrid;
if (options.showPerspective !== undefined) this.showPerspective = options.showPerspective;
if (options.showShadow !== undefined) this.showShadow = options.showShadow;
if (options.tooltip !== undefined) this.showTooltip = options.tooltip;
if (options.showAnimationControls !== undefined) this.showAnimationControls = options.showAnimationControls;
if (options.keepAspectRatio !== undefined) this.keepAspectRatio = options.keepAspectRatio;
if (options.verticalRatio !== undefined) this.verticalRatio = options.verticalRatio;
if (options.animationInterval !== undefined) this.animationInterval = options.animationInterval;
if (options.animationPreload !== undefined) this.animationPreload = options.animationPreload;
if (options.animationAutoStart !== undefined)this.animationAutoStart = options.animationAutoStart;
if (options.xBarWidth !== undefined) this.defaultXBarWidth = options.xBarWidth;
if (options.yBarWidth !== undefined) this.defaultYBarWidth = options.yBarWidth;
if (options.xMin !== undefined) this.defaultXMin = options.xMin;
if (options.xStep !== undefined) this.defaultXStep = options.xStep;
if (options.xMax !== undefined) this.defaultXMax = options.xMax;
if (options.yMin !== undefined) this.defaultYMin = options.yMin;
if (options.yStep !== undefined) this.defaultYStep = options.yStep;
if (options.yMax !== undefined) this.defaultYMax = options.yMax;
if (options.zMin !== undefined) this.defaultZMin = options.zMin;
if (options.zStep !== undefined) this.defaultZStep = options.zStep;
if (options.zMax !== undefined) this.defaultZMax = options.zMax;
if (options.valueMin !== undefined) this.defaultValueMin = options.valueMin;
if (options.valueMax !== undefined) this.defaultValueMax = options.valueMax;
if (options.cameraPosition !== undefined) cameraPosition = options.cameraPosition;
if (cameraPosition !== undefined) {
this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
this.camera.setArmLength(cameraPosition.distance);
}
else {
this.camera.setArmRotation(1.0, 0.5);
this.camera.setArmLength(1.7);
}
} }
this._setBackgroundColor(options && options.backgroundColor);
this.setSize(this.width, this.height);
// re-load the data
if (this.dataTable) {
this.setData(this.dataTable);
}
};
/**
* Redraw the Graph.
*/
Graph3d.prototype.redraw = function() {
if (this.dataPoints === undefined) { if (this.dataPoints === undefined) {
throw "Error: graph data not initialized"; throw "Error: graph data not initialized";
} }
this._resizeCanvas(); this._resizeCanvas();
this._resizeCenter(); this._resizeCenter();
this._redrawSlider(); this._redrawSlider();
@ -1028,6 +1029,11 @@ Graph3d.prototype.redraw = function(data) {
this._redrawInfo(); this._redrawInfo();
this._redrawLegend(); this._redrawLegend();
// start animation when option is true
if (this.animationAutoStart && this.dataFilter) {
this.animationStart();
}
}; };
/** /**
@ -2641,7 +2647,7 @@ Filter.prototype.getValue = function(index) {
/** /**
* Retrieve the (filtered) dataPoints for the currently selected filter index * Retrieve the (filtered) dataPoints for the currently selected filter index
* @param {Number} index (optional)
* @param {Number} [index] (optional)
* @return {Array} dataPoints * @return {Array} dataPoints
*/ */
Filter.prototype._getDataPoints = function(index) { Filter.prototype._getDataPoints = function(index) {

Write Preview
Loading…
Cancel
Save