Cube Component Documentation

Download

Download the compressed file.

Installation

Code

Add References

Add References to the javascript files.

Example: If the javascript files are copied to a subfolder js then the script tags would be referencing the relative path as shown here.

<script src="./js/three.js"></script>

<script src="./js/three.text.js"></script>

<script src="./js/Detector.js"></script>

<script src="./js/resourcetracker.js"></script>

<script src="./js/cube.js"></script>

Component Initialization

An instance of a component can be created by invoking the component constructor.

component(containerId,cubeBackgroundHexColor,cubeSideHexColorLeft,cubeBottomHexColor,cubeSideHexColorRight, hideTitleCaption)

containerId is the html Id in which the component is rendered.

cubeBackgroundHexColor is the background color of the cube (hex).

cubeSideHexColorLeft is the color of the left side of the cube (hex).

cubeBottomHexColor is the color of the bottom side of the cube (hex).

cubeSideHexColorRight is the color of the right side of the cube (hex).

hideTitleCaption is an optional parameter. The top caption (header) is not shown when set to true. (The default value is false.)

directionalLighting is an optional parameter. Directional lighting adds lighting effects to the cylider and legends. (The default value is true.)

Example: Assuming container is the Id of a div.

CSS

#container {

height:360px;

width: 300px;

z-index: 0;

}

HTML

<div id="container"></div>

Javascript

var cube = new component("container",0xffffff,0x696969,0xcccccc,0x808080);

Note that the element can be responsive and have varying width and height. The height must be defined and the minimum height is 300px. Media Query examples explained later.

Component Methods

Captions or titles can be set from using the setTitleHeader method.

setTitleHeader(titleHeaderNumber, titleHeaderText)

titleHeaderNumber is the line number for the title. (Up to 4 lines allowed.)

titleHeaderText is the text for the header display. is the background color of the cube (hex).

TitleHeaderHexColor is the text color for the header (hex).

CubeSideHexColor is the color of the sides of the cube (hex).

Example below:

Javascript

cube.setTitleHeader(1,'Sara\'s Total Balance', 0x000000);

cube.setTitleHeader(2,'1 yr Performance: 9.2% Risk score: 64', 0x36648B);

cube.setTitleHeader(3,'Retirement Goal: $1,200,000', 0x36648B);

cube.setTitleHeader(4,'Current Value: $1,532,321', 0x696969);

A view or data display can be created with createView.

createView(bottomCaptionText, hexColor)

bottomCaptionText is the text or label for the view..

hexColor is the text color for the label (hex).

Example below:

Javascript

var cubeViewId = cube.createView("Holding Type", 0x000000);

Data for a view can be displayed with createCylinder. This will render a cylinder that represents data.

createCylinder(cylinderNumber, cubeViewId, bottomCaptionText, hexColor, value, rangestart, rangeend, hexColorLegendCaptionText)

cylinderNumber is the order that the cylinders are shown left to right. (4 is the maximum).

cubeViewId is the view that is associated with the cylinder display.

bottomCaptionText is the text label for the cylinder (shown in a legend below the cube).

hexColor is the color of the cylinder (hex).

value is the numeric data value.

rangestart is the bottom range for this data..

rangeend is the top range for this data.

hexColorLegendCaptionText is the text color for the label in the legend (hex).

The cylinder height will be determined by the value within the range.

Example below:

Javascript

cube.createCylinder(1, cubeViewId, "Retirement Goal", 0x4ea7ff,1200000,100000,12000000,0x444444);

cube.createCylinder(2, cubeViewId, "Current Value", 0x00FF00,4200000,100000,12000000,0x444444);

cube.createCylinder(3, cubeViewId, "Performance", 0x4e4eff,9,1,20,0x444444);

cube.createCylinder(4, cubeViewId, "Risk Score", 0x000000,64,1,200,0x444444);

Data drill downs can be added with addDrillDown. Drill downs provide data aggregation functionality. A drill down enables a cylinder to be clicked so that a new data view with additional cylinders can be rendered.

addDrillDown(cylinderId, viewIdToActivate)

cylinderId is the cylinder id that will activate a drill down..

viewIdToActivate is the new view that will be rendered when the cylinder is clicked..

Example below:

Javascript

cube.addDrillDown(cylinderIdCountry1,cubeViewIdCountry1);

Note then when a cylinder is clicked and the user is in drill down mode a button is also required so the user can navigate back. A button must be added with the id

<button onclick="cube.navigateBack('cb1');" class="cubebutton" id="cb1">Back</button>;

navigateBack(buttonId) is the function to navigate back.

ButtonId is the id of the button that will be used to navigate back.

Css styling is required for the button.

.cubebutton {

position: absolute;

display: none;

z-index: 99;

left: 80%;

top: 80%;

}

Additional styling can be added. Note the display is none because the button is initially not shown.

Media Query Examples

For cube responsive design

CSS

@media (min-width: 768px) {

#container {

height:300px;

width: 300px;

}

}

Example

A an example of the cube is provided in the zipped file.

Index.html is included to illustrate an example of the cube display with drill downs.

An illustration is shown here

A display after clicking the United States cylinder is shown below:

Sample code from start.html:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>The Chart</title>

<style>

body {

background-color: #ffffff;

margin: 0;

overflow: hidden;

}

#container {

height:360px;

width: 300px;

z-index: 0;

position:relative;

}

#container2 {

height:360px;

width: 300px;

z-index: 0;

}

@media (min-width: 768px) {

#container {

height:300px;

width: 300px;

}

#container2 {

height:300px;

width: 300px;

}

}

.cubebutton {

position: absolute;

display: none;

z-index: 99;

left: 80%;

top: 80%;

}

</style>

</head>

<body>

<div id="container">

<button onclick="cube.navigateBack('cb1');" class="cubebutton" id="cb1">Back</button>

</div>

<div id="container2"></div>

<script src="./js/three.js"></script>

<script src="./js/three.text.js"></script>

<script src="./js/Detector.js"></script>

<script src="./js/resourcetracker.js"></script>

<script src="./js/cube.js"></script>

<script type="text/javascript">

var cube = new component("container",0xffffff,0x696969,0x000000,0x808080);

cube.setTitleHeader(1,'All-Time Olympic Games!!!!', 0x000000);

cube.setTitleHeader(2,'Medal Tally', 0x000000);

cube.setTitleHeader(3,'(Summer Olympics)', 0x36648B);

var cubeViewId = cube.createView("Top Countries", 0x000000);

var cylinderIdCountry1 = cube.createCylinder(1, cubeViewId, "United States - 2520 Medals", 0x4ea7ff,2520,100,3000,0x444444);

var cylinderIdCountry2 = cube.createCylinder(2, cubeViewId, "Soviet Union - 1122 Medals", 0x00FF00,1122,100,3000,0x444444);

var cylinderIdCountry3 = cube.createCylinder(3, cubeViewId, "Germany- 937 Medals", 0x00FFAA,937,100,3000,0x444444);

var cylinderIdCountry4 = cube.createCylinder(4, cubeViewId, "Great Britain- 847 Medals", 0x00FFEE,847,100,3000,0x444444);

var cubeViewIdCountry1 = cube.createView("United States", 0x000000);

cube.addDrillDown(cylinderIdCountry1,cubeViewIdCountry1);

var cylinderCountry1Id1 = cube.createCylinder(1, cubeViewIdCountry1, "1022 Gold", 0xffdf00,1022,100,2000,0x444444);

var cylinderCountry1Id2 = cube.createCylinder(2, cubeViewIdCountry1, "794 Silver", 0xd7d7d7,794,100,2000,0x444444);

var cylinderCountry1Id3 = cube.createCylinder(3, cubeViewIdCountry1, "704 Bronze", 0xad8a56,704,100,2000,0x444444);

var cubeViewIdCountry2 = cube.createView("Soviet Union", 0x000000);

cube.addDrillDown(cylinderIdCountry2,cubeViewIdCountry2);

var cylinderCountry2Id1 = cube.createCylinder(1, cubeViewIdCountry2, "440 Gold", 0xffdf00,440,100,2000,0x444444);

var cylinderCountry2Id2 = cube.createCylinder(2, cubeViewIdCountry2, "357 Silver", 0xd7d7d7,357,100,2000,0x444444);

var cylinderCountry2Id3 = cube.createCylinder(3, cubeViewIdCountry2, "325 Bronze", 0xad8a56,325,100,2000,0x444444);

var cubeViewIdCountry3 = cube.createView("Germany", 0x000000);

cube.addDrillDown(cylinderIdCountry3,cubeViewIdCountry3);

var cylinderCountry3Id1 = cube.createCylinder(1, cubeViewIdCountry3, "275 Gold", 0xffdf00,275,100,2000,0x444444);

var cylinderCountry3Id2 = cube.createCylinder(2, cubeViewIdCountry3, "313 Silver", 0xd7d7d7,313,100,2000,0x444444);

var cylinderCountry3Id3 = cube.createCylinder(3, cubeViewIdCountry3, "349 Bronze", 0xad8a56,349,100,2000,0x444444);

var cubeViewIdCountry4 = cube.createView("Great Britain", 0x000000);

cube.addDrillDown(cylinderIdCountry4,cubeViewIdCountry4);

var cylinderCountry4Id1 = cube.createCylinder(1, cubeViewIdCountry4, "263 Gold", 0xffdf00,263,100,2000,0x444444);

var cylinderCountry4Id2 = cube.createCylinder(2, cubeViewIdCountry4, "295 Silver", 0xd7d7d7,295,100,2000,0x444444);

var cylinderCountry4Id3 = cube.createCylinder(3, cubeViewIdCountry4, "289 Bronze", 0xad8a56,289,100,2000,0x444444);

cube.setActiveView(cubeViewId);

Component Progression API

The cube can display a series or views or progressions. Each view is displayed in an interval. Sample displays below.

These images show 2 examples of views during a progression. For this example the cube is showing the progression of risk and return over time.

At the conclusion of the progressions, the view displays the values of the data in the legend as shown below.

To create a cube progression, a reference to the cubeprogression.js javascript file must be added.

<script src="./js/cubeprogression.js"></script>

Create a cube and create progressioncylinder objects and a progressioncube object.

progressioncylinder(hexColor, rangestart, rangeend, hexColorLegendCaptionText, prependLabel,appendLabel)

hexColor is the color of the cylinder (hex).

rangestart is the bottom range for this data..

rangeend is the top range for this data.

hexColorLegendCaptionText is the text color for the label in the legend (hex).

prepandLabel is the text added to the beginning of the label. Note that it can be null,

appendLabel is the text added to the end of the label. Note that it can be null,

The cylinder height will be determined by the value within the range.

Example below:

Javascript

var cy1 = new progressioncylinder(0x4ea7ff,0,4000,0x444444,null,"Return");

progressioncube(cubein, delay, progressioncylinderArray, dataArray, callback, sampleAmount, hideViewLabel, currencyLabel, showFloatingLabel)

cubein is the cube id for the progression.

delay is the amount of time to show each view in milliseconds.

dataArray is the array of data to be used for the progression.

callback is the function that can be called when the progression is completed. Note that this can be null..

samepleAmount is the number of data points to sample fer view. Set this value to 1 for every data point to have a view.

hideViewLabel can be set to true to hide the view label during a progression. Setting to false shows the view label during a progression. Note that the default value if true (when the parameter is null or unset).

currencyLabel can be set for displaying monetary data. For example, setting to “USD” formats the data to be displayed as USD currency ($ and commas).

showFloatingLabel can be set for displaying the value above the top of each cylinder durning the progression. The default value if false (when the parameter is null or unset).

Example below:

Javascript

var cubeprogressionobj = new progressioncube(cube,100,progressionCylinderArray,data, callFunction, 1);

Complete code example in the progressionindex.html:

Note that drill down functionality is also available upon completion of progressions.

The function getCylinderIdFromActiveView must be called to retrieve the appropriate cylinder id to create a drill down.

getCylinderIdFroActiveView(cubeViewId, cylinderNumber)

cubeViewIds is the the cube id fromr the progression.

CylinderNumber is the clylinder number to be used.

Example below:

Javascript

function callFunction() {

var activeCubeViewId = cube.getActiveView();

var cubeViewId1 = cube.createView("Return", 0x000000);

var CylinderId = cube.getCylinderIdFromActiveView(activeCubeViewId,1);

cube.addDrillDown(CylinderId,cubeViewId1);

var cylinderDrilldown1 = cube.createCylinder(1, cubeViewId1, "Stocks", 0xffdf00,1222,100,2000,0x444444);

var cylinderDrilldown1a= cube.createCylinder(2, cubeViewId1, "Bonds", 0xff0000,1022,100,2000,0x444444);

var cubeViewId2 = cube.createView("Risk", 0x000000);

var CylinderId2 = cube.getCylinderIdFromActiveView(activeCubeViewId,2);

cube.addDrillDown(CylinderId2,cubeViewId2);

var cylinderDrilldown2 = cube.createCylinder(1, cubeViewId2, "Stocks", 0xffdf00,722,100,2000,0x444444);

var cylinderDrilldown2b = cube.createCylinder(2, cubeViewId2, "Bonds", 0xff0000,1422,100,2000,0x444444);

cube.setActiveView(activeCubeViewId);

}

Complete code example in the indexprogressiondrilldown.html:

---