diff --git a/docs/graph3d.html b/docs/graph3d.html index 534fa69f..0277405f 100644 --- a/docs/graph3d.html +++ b/docs/graph3d.html @@ -91,22 +91,15 @@ 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> - </head> +</head> <body onload="drawVisualization();"> <div id="mygraph"></div> - - <div id="info"></div> </body> </html> @@ -116,17 +109,19 @@

Loading

- The class name of the Graph3d is vis.Graph3d + The class name of the Graph3d is vis.Graph3d. + 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 DataSet or an Array, described in + section Data Format. + Options is a name-value map in the JSON format. The available options + are described in section Configuration Options.

-
var graph = new vis.Graph3d(container);
+
var graph = new vis.Graph3d(container [, data] [, options]);

- After being loaded, the graph can be drawn via the function draw(), - provided with data and options. -

-
graph.draw(data, options);
-

- where data is a vis DataSet, and options is a name-value map in the JSON format. + Data and options can be set or changed later on using the functions + Graph3d.setData(data) and Graph3d.setOptions(options).

Data Format

@@ -535,12 +530,6 @@ options = { Only applicable when animation data is available. - - draw(data, options) - none - Loads data, sets the provided options, and draws the 3d graph. - - getCameraPosition() An object with parameters horizontal, @@ -558,6 +547,19 @@ options = { when data is changed, or when the layout of the webpage changed. + + setData(data) + none + Replace the data in the Graph3d. + + + + setOptions(options) + none + Update options of Graph3d. + The provided options will be merged with current options. + + setSize(width, height) none diff --git a/examples/graph3d/example01_basis.html b/examples/graph3d/example01_basis.html index 91b1e77c..4ccc908a 100644 --- a/examples/graph3d/example01_basis.html +++ b/examples/graph3d/example01_basis.html @@ -45,10 +45,8 @@ }; // 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); } diff --git a/examples/graph3d/example02_camera.html b/examples/graph3d/example02_camera.html index a55b66e9..2d560338 100644 --- a/examples/graph3d/example02_camera.html +++ b/examples/graph3d/example02_camera.html @@ -71,13 +71,11 @@ 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.redraw(); } diff --git a/examples/graph3d/example03_filter.html b/examples/graph3d/example03_filter.html index cd7819cc..ca0b0d3e 100644 --- a/examples/graph3d/example03_filter.html +++ b/examples/graph3d/example03_filter.html @@ -48,11 +48,9 @@ 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); } diff --git a/examples/graph3d/example04_animate.html b/examples/graph3d/example04_animate.html index 19cbef7a..b53db768 100644 --- a/examples/graph3d/example04_animate.html +++ b/examples/graph3d/example04_animate.html @@ -39,7 +39,6 @@ } } - // specify options var options = { width: "600px", @@ -56,11 +55,9 @@ 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); } diff --git a/examples/graph3d/example05_line.html b/examples/graph3d/example05_line.html index 74d0313f..3a433c35 100644 --- a/examples/graph3d/example05_line.html +++ b/examples/graph3d/example05_line.html @@ -42,11 +42,9 @@ 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); } diff --git a/examples/graph3d/example06_moving_dots.html b/examples/graph3d/example06_moving_dots.html index c21e86f9..e6ebc89f 100644 --- a/examples/graph3d/example06_moving_dots.html +++ b/examples/graph3d/example06_moving_dots.html @@ -55,19 +55,16 @@ animationPreload: false, animationAutoStart: true, legendLabel: "color value", - cameraPosition: - { + cameraPosition: { horizontal: 2.7, vertical: 0.0, 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); } diff --git a/examples/graph3d/example07_dot_cloud_colors.html b/examples/graph3d/example07_dot_cloud_colors.html index c89949ec..9b90289e 100644 --- a/examples/graph3d/example07_dot_cloud_colors.html +++ b/examples/graph3d/example07_dot_cloud_colors.html @@ -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); } diff --git a/examples/graph3d/example08_dot_cloud_size.html b/examples/graph3d/example08_dot_cloud_size.html index 49615760..b5b6cfac 100644 --- a/examples/graph3d/example08_dot_cloud_size.html +++ b/examples/graph3d/example08_dot_cloud_size.html @@ -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); } diff --git a/examples/graph3d/example09_mobile.html b/examples/graph3d/example09_mobile.html index 0901584a..b93737c1 100644 --- a/examples/graph3d/example09_mobile.html +++ b/examples/graph3d/example09_mobile.html @@ -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); } diff --git a/examples/graph3d/example10_styles.html b/examples/graph3d/example10_styles.html index 43e1102c..b5cab109 100644 --- a/examples/graph3d/example10_styles.html +++ b/examples/graph3d/example10_styles.html @@ -61,11 +61,9 @@ 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 diff --git a/examples/graph3d/example11_tooltips.html b/examples/graph3d/example11_tooltips.html index 05bbd0ec..c1af9852 100644 --- a/examples/graph3d/example11_tooltips.html +++ b/examples/graph3d/example11_tooltips.html @@ -64,11 +64,9 @@ 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 diff --git a/src/graph3d/Graph3d.js b/src/graph3d/Graph3d.js index 4230e30d..b1eb51b9 100644 --- a/src/graph3d/Graph3d.js +++ b/src/graph3d/Graph3d.js @@ -5,9 +5,11 @@ * Graph is developed in javascript as a Google Visualization Chart. * * @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 this.containerElement = container; this.width = "400px"; @@ -70,7 +72,15 @@ function Graph3d(container) { // create a frame and canvas this.create(); -}; + + // apply options (also when undefined) + this.setOptions(options); + + // apply data + if (data) { + this.setData(data); + } +} // Extend Graph with an Emitter mixin Emitter(Graph3d.prototype); @@ -320,92 +330,6 @@ Graph3d.prototype._convertTranslationToScreen = function(translation) { 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 * @param {string | {fill: string, stroke: string, strokeWidth: string}} backgroundColor @@ -987,22 +911,99 @@ Graph3d.prototype._readData = function(data) { 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) { throw "Error: graph data not initialized"; } - this._resizeCanvas(); this._resizeCenter(); this._redrawSlider(); @@ -1028,6 +1029,11 @@ Graph3d.prototype.redraw = function(data) { this._redrawInfo(); 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 - * @param {Number} index (optional) + * @param {Number} [index] (optional) * @return {Array} dataPoints */ Filter.prototype._getDataPoints = function(index) {