2015-07-18 13:45:18 +01:00
<!DOCTYPE html>
< html lang = "en" >< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
< link rel = "icon" HREF = "favicon.ico" >
< title > graph3d - vis.js - A dynamic, browser based visualization library.</ title >
<!-- Bootstrap core CSS -->
< link href = "../css/bootstrap.css" rel = "stylesheet" >
<!-- Tipue vendor css -->
< link href = "../css/tipuesearch.css" rel = "stylesheet" >
< link href = "../css/style.css" rel = "stylesheet" >
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
< link href = "../css/prettify.css" type = "text/css" rel = "stylesheet" />
< script type = "text/javascript" src = "../js/googleAnalytics.js" ></ script >
< script type = "text/javascript" src = "../js/prettify/prettify.js" ></ script >
< script src = "../js/smooth-scroll.min.js" ></ script >
< script language = "JavaScript" >
smoothScroll . init ();
</ script >
< script type = "text/javascript" src = "../js/toggleTable.js" ></ script >
</ head >
< body onload = "prettyPrint();" >
< div class = "navbar-wrapper" >
< div class = "container" >
< nav class = "navbar navbar-inverse navbar-static-top" role = "navigation" >
< div class = "container" >
< div class = "navbar-header" >
< button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#navbar"
aria-expanded = "false" aria-controls = "navbar" >
< span class = "sr-only" > Toggle navigation</ span >
< span class = "icon-bar" ></ span >
< span class = "icon-bar" ></ span >
< span class = "icon-bar" ></ span >
</ button >
< a class = "navbar-brand hidden-sm" href = "./index.html" > vis.js</ a >
</ div >
< div id = "navbar" class = "navbar-collapse collapse" >
< ul class = "nav navbar-nav" >
< li >< a href = "http://www.visjs.org/index.html#modules" > Modules</ a ></ li >
< li >< a href = "http://www.visjs.org/blog.html" > Blog</ a ></ li >
< li >< a href = "http://www.visjs.org/index.html#download_install" > Download</ a ></ li >
< li >< a href = "http://www.visjs.org/showcase/index.html" > Showcase</ a ></ li >
< li >< a href = "http://www.visjs.org/index.html#contribute" > Contribute</ a ></ li >
< li >< a href = "http://www.visjs.org/featureRequests.html" > Feature requests</ a ></ li >
< li >< a href = "http://www.visjs.org/index.html#licenses" > License</ a ></ li >
</ ul >
< form class = "navbar-form navbar-right" role = "search" >
< input name = "q" id = "tipue_search_input" autocomplete = "off" type = "text" class = "form-control" placeholder = "Enter keywords" >
< button type = "submit" class = "btn btn-default" > Go!</ button >
</ form >
< div id = "search-results-wrapper" class = "panel panel-default" >
< div class = "panel-body" >
< div id = "tipue_search_content" ></ div >
</ div >
</ div >
< div id = "keyword-info" class = "panel panel-success" >
< div class = "panel-body" >
Found < span id = "keyword-count" ></ span > results. Click < a id = "keyword-jumper-button" href = "" > here</ a > to jump to the first keyword occurence!
</ div >
</ div >
</ div >
</ div >
</ nav >
</ div >
</ div >
< a href = "https://github.com/almende/vis" class = "hidden-xs hidden-sm hidden-md" >< img style = "position: absolute; top: 0; right: 0; border: 0;" src = "https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt = "Fork me on GitHub" data-canonical-src = "https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" ></ a >
< div class = "container full" >
< h1 > Graph3d</ h1 >
< h2 id = "Overview" > Overview</ h2 >
< p >
Graph3d is an interactive visualization chart to draw data in a three dimensional
graph. You can freely move and zoom in the graph by dragging and scrolling in the
window. Graph3d also supports animation of a graph.
</ p >
< p >
Graph3d uses < a href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas" > HTML canvas</ a >
to render graphs, and can render up to a few thousands of data points smoothly.
</ p >
< h2 id = "Contents" > Contents</ h2 >
< ul >
< li >< a href = "#Overview" > Overview</ a ></ li >
< li >< a href = "#Loading" > Loading</ a ></ li >
< li >< a href = "#Data_Format" > Data Format</ a ></ li >
< li >< a href = "#Configuration_Options" > Configuration Options</ a ></ li >
< li >< a href = "#Methods" > Methods</ a ></ li >
< li >< a href = "#Events" > Events</ a ></ li >
< li >< a href = "#Data_Policy" > Data Policy</ a ></ li >
</ ul >
< h2 id = "Example" > Example</ h2 >
< p >
The following code shows how to create a Graph3d and provide it with data.
More examples can be found in the < a href = "../examples" > examples</ a > directory.
</ p >
< pre class = "prettyprint lang-html" >
< !DOCTYPE HTML>
< html>
< head>
< title> Graph 3D demo< /title>
< style>
body {font: 10pt arial;}
< /style>
< script type="text/javascript" src="../../dist/vis.js">< /script>
< script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
var data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 50; // number of datapoints will be steps*steps
var axisMax = 314;
var axisStep = axisMax / steps;
for (var x = 0; x < axisMax; x+=axisStep) {
for (var y = 0; y < axisMax; y+=axisStep) {
var value = custom(x, y);
data.add({
x: x,
y: y,
z: value,
style: value
});
}
}
// specify options
var options = {
width: '600px',
height: '600px',
style: 'surface',
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// create a graph3d
var container = document.getElementById('mygraph');
graph3d = new vis.Graph3d(container, data, options);
}
< /script>
< /head>
< body onload="drawVisualization();">
< div id="mygraph">< /div>
< /body>
< /html>
</ pre >
< h2 id = "Loading" > Loading</ h2 >
< p >
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 >
< pre class = "prettyprint lang-js" > var graph = new vis.Graph3d(container [, data] [, options]);</ pre >
< p >
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 >
< h2 id = "Data_Format" > Data Format</ h2 >
< p >
2016-02-17 11:57:17 -07:00
Graph3d can load data from an < code > Array</ code > , a < code > DataSet</ code > (offering 2 way data binding), or a < code > DataView</ code > (offering 1 way data binding).
2015-07-18 13:45:18 +01:00
JSON objects are added to this DataSet by using the < code > add()</ code > function.
Data points must have properties < code > x</ code > , < code > y</ code > , and < code > z</ code > ,
and can optionally have a property < code > style</ code > and < code > filter</ code > .
< h3 > Definition</ h3 >
< p >
The DataSet JSON objects are defined as:
</ p >
< table class = "properties" >
< tr >
< th > Name</ th >
< th > Type</ th >
< th > Required</ th >
< th > Description</ th >
</ tr >
< tr >
< td > x</ td >
< td > number</ td >
< td > yes</ td >
< td > Location on the x-axis.</ td >
</ tr >
< tr >
< td > y</ td >
< td > number</ td >
< td > yes</ td >
< td > Location on the y-axis.</ td >
</ tr >
< tr >
< td > z</ td >
< td > number</ td >
< td > yes</ td >
< td > Location on the z-axis.</ td >
</ tr >
< tr >
< td > style</ td >
< td > number</ td >
< td > no</ td >
< td > The data value, required for graph styles < code > dot-color</ code > and
< code > dot-size</ code > .
</ td >
</ tr >
< tr >
< td > filter</ td >
< td > *</ td >
< td > no</ td >
< td > Filter values used for the animation.
This column may have any type, such as a number, string, or Date.</ td >
</ tr >
</ table >
< h2 id = "Configuration_Options" > Configuration Options</ h2 >
< p >
Options can be used to customize the graph. Options are defined as a JSON object.
All options are optional.
</ p >
< pre class = "prettyprint lang-js" >
var options = {
width: '100%',
height: '400px',
style: 'surface'
};
</ pre >
< p >
The following options are available.
</ p >
< table class = "options" >
< tr >
< th > Name</ th >
< th > Type</ th >
< th > Default</ th >
< th > Description</ th >
</ tr >
< tr >
< td > animationInterval</ td >
< td > number</ td >
< td > 1000</ td >
< td > The animation interval in milliseconds. This determines how fast
the animation runs.</ td >
</ tr >
< tr >
< td > animationPreload</ td >
< td > boolean</ td >
< td > false</ td >
< td > If false, the animation frames are loaded as soon as they are requested.
if < code > animationPreload</ code > is true, the graph will automatically load
all frames in the background, resulting in a smoother animation as soon as
all frames are loaded. The load progress is shown on screen.</ td >
</ tr >
< tr >
< td > animationAutoStart</ td >
< td > boolean</ td >
< td > false</ td >
< td > If true, the animation starts playing automatically after the graph
is created.</ td >
</ tr >
< tr >
< td > axisColor</ td >
< td > string</ td >
< td > '#4D4D4D'</ td >
< td > The color of the axis lines and the text along the axis.</ td >
</ tr >
< tr >
< td > backgroundColor</ td >
< td > string or Object</ td >
< td > {fill: 'white', stroke: 'gray', strokeWidth: 1}</ td >
< td > The background color for the main area of the chart.
Can be either a simple HTML color string, for example: 'red' or '#00cc00',
or an object with the following properties.</ td >
</ tr >
< tr >
< td > backgroundColor.fill</ td >
< td > string</ td >
< td > 'white'</ td >
< td > The chart fill color, as an HTML color string.</ td >
</ tr >
< tr >
< td > backgroundColor.stroke</ td >
< td > string</ td >
< td > 'gray'</ td >
< td > The color of the chart border, as an HTML color string.</ td >
</ tr >
< tr >
< td > backgroundColor.strokeWidth</ td >
< td > number</ td >
< td > 1</ td >
< td > The border width, in pixels.</ td >
</ tr >
< tr >
< td > cameraPosition</ td >
< td > Object</ td >
< td > {horizontal: 1.0, vertical: 0.5, distance: 1.7}</ td >
< td > Set the initial rotation and position of the camera.
The object < code > cameraPosition</ code > contains three parameters:
< code > horizontal</ code > , < code > vertical</ code > , and < code > distance</ code > .
Parameter < code > horizontal</ code > is a value in radians and can have any
value (but normally in the range of 0 and 2*Pi).
Parameter < code > vertical</ code > is a value in radians between 0 and 0.5*Pi.
Parameter < code > distance</ code > is the (normalized) distance from the
camera to the center of the graph, in the range of 0.71 to 5.0. A
larger distance puts the graph further away, making it smaller.
All parameters are optional.
</ tr >
< tr >
< td > dataColor</ td >
< td > string or object</ td >
< td > {fill: '#7DC1FF', stroke: '#3267D2', strokeWidth: 1}</ td >
< td > When < code > dataColor</ code > is a string, it will set the color for both border and fill color of dots and bars. Applicable for styles < code > dot-size</ code > , < code > bar-size</ code > , and < code > line</ code > . When an object, it can contain the properties descibed below.</ td >
</ tr >
< tr >
< td > dataColor.fill</ td >
< td > string</ td >
< td > '#7DC1FF'</ td >
< td > The border color of the dots or bars. Applicable when using styles < code > dot-size</ code > or < code > bar-size</ code > .</ td >
</ tr >
< tr >
< td > dataColor.stroke</ td >
< td > string</ td >
< td > '#3267D2'</ td >
< td > The fill color of the dots or bars. Applicable when using styles < code > dot-size</ code > , < code > bar-size</ code > , or < code > line</ code > .</ td >
</ tr >
< tr >
< td > dataColor.strokeWidth</ td >
< td > number</ td >
< td > 1</ td >
< td > The line width of dots, bars and lines. Applicable for all styles.</ td >
</ tr >
2016-02-17 11:57:17 -07:00
< tr >
< td > dotSizeRatio</ td >
< td > number</ td >
< td > 0.02</ td >
< td > Ratio of the size of the dots with respect to the width of the graph.</ td >
</ tr >
2015-07-18 13:45:18 +01:00
< tr >
< td > gridColor</ td >
< td > string</ td >
< td > '#D3D3D3'</ td >
< td > The color of the grid lines.</ td >
</ tr >
< tr >
< td > height</ td >
< td > string</ td >
< td > '400px'</ td >
< td > The height of the graph in pixels or as a percentage.</ td >
</ tr >
< tr >
< td > keepAspectRatio</ td >
< td > boolean</ td >
< td > true</ td >
< td > If < code > keepAspectRatio</ code > is true, the x-axis and the y-axis
keep their aspect ratio. If false, the axes are scaled such that they
both have the same, maximum with.</ td >
</ tr >
< tr >
< td > showAnimationControls</ td >
< td > boolean</ td >
< td > true</ td >
< td > If true, animation controls are created at the bottom of the Graph.
The animation controls consists of buttons previous, start/stop, next,
and a slider showing the current frame.
Only applicable when the provided data contains an animation.</ td >
</ tr >
< tr >
< td > showGrid</ td >
< td > boolean</ td >
< td > true</ td >
< td > If true, grid lines are draw in the x-y surface (the bottom of the 3d
graph).</ td >
</ tr >
< tr >
< td > showPerspective</ td >
< td > boolean</ td >
< td > true</ td >
< td > If true, the graph is drawn in perspective: points and lines which
are further away are drawn smaller.
Note that the graph currently does not support a gray colored bottom side
when drawn in perspective.
</ td >
</ tr >
< tr >
< td > showShadow</ td >
< td > boolean</ td >
< td > false</ td >
< td > Show shadow on the graph.</ td >
</ tr >
< tr >
< td > style</ td >
< td > string</ td >
< td > 'dot'</ td >
< td > The style of the 3d graph. Available styles:
< code > bar</ code > ,
< code > bar-color</ code > ,
< code > bar-size</ code > ,
< code > dot</ code > ,
< code > dot-line</ code > ,
< code > dot-color</ code > ,
< code > dot-size</ code > ,
< code > line</ code > ,
< code > grid</ code > ,
or < code > surface</ code ></ td >
</ tr >
< tr >
< td > tooltip</ td >
< td > boolean | function</ td >
< td > false</ td >
< td > Show a tooltip showing the values of the hovered data point.
The contents of the tooltip can be customized by providing a callback
function as < code > tooltip</ code > . In this case the function is called
with an object containing parameters < code > x</ code > ,
< code > y</ code > , and < code > z</ code > argument,
and must return a string which may contain HTML.
</ td >
</ tr >
< tr >
< td > valueMax</ td >
< td > number</ td >
< td > none</ td >
< td > The maximum value for the value-axis. Only available in combination
with the styles < code > dot-color</ code > and < code > dot-size</ code > .</ td >
</ tr >
< tr >
< td > valueMin</ td >
< td > number</ td >
< td > none</ td >
< td > The minimum value for the value-axis. Only available in combination
with the styles < code > dot-color</ code > and < code > dot-size</ code > .</ td >
</ tr >
< tr >
< td > verticalRatio</ td >
< td > number</ td >
< td > 0.5</ td >
< td > A value between 0.1 and 1.0. This scales the vertical size of the graph
When keepAspectRatio is set to false, and verticalRatio is set to 1.0,
the graph will be a cube.</ td >
</ tr >
< tr >
< td > width</ td >
< td > string</ td >
< td > '400px'</ td >
< td > The width of the graph in pixels or as a percentage.</ td >
</ tr >
< tr >
< td > xBarWidth</ td >
< td > number</ td >
< td > none</ td >
< td > The width of bars in x direction. By default, the width is equal to the distance
between the data points, such that bars adjoin each other.
Only applicable for styles < code > 'bar'</ code > and < code > 'bar-color'</ code > .</ td >
</ tr >
< tr >
< td > xCenter</ td >
< td > string</ td >
< td > '55%'</ td >
< td > The horizontal center position of the graph, as a percentage or in
pixels.</ td >
</ tr >
< tr >
< td > xMax</ td >
< td > number</ td >
< td > none</ td >
< td > The maximum value for the x-axis.</ td >
</ tr >
< tr >
< td > xMin</ td >
< td > number</ td >
< td > none</ td >
< td > The minimum value for the x-axis.</ td >
</ tr >
< tr >
< td > xStep</ td >
< td > number</ td >
< td > none</ td >
< td > Step size for the grid on the x-axis.</ td >
</ tr >
< tr >
< td > xValueLabel</ td >
< td > function</ td >
< td > none</ td >
< td > A function for custom formatting of the labels along the x-axis,
for example < code > function (x) {return (x * 100) + '%'}</ code > .
</ td >
</ tr >
< tr >
< td > yBarWidth</ td >
< td > number</ td >
< td > none</ td >
< td > The width of bars in y direction. By default, the width is equal to the distance
between the data points, such that bars adjoin each other.
Only applicable for styles < code > 'bar'</ code > and < code > 'bar-color'</ code > .</ td >
</ tr >
< tr >
< td > yCenter</ td >
< td > string</ td >
< td > '45%'</ td >
< td > The vertical center position of the graph, as a percentage or in
pixels.</ td >
</ tr >
< tr >
< td > yMax</ td >
< td > number</ td >
< td > none</ td >
< td > The maximum value for the y-axis.</ td >
</ tr >
< tr >
< td > yMin</ td >
< td > number</ td >
< td > none</ td >
< td > The minimum value for the y-axis.</ td >
</ tr >
< tr >
< td > yStep</ td >
< td > number</ td >
< td > none</ td >
< td > Step size for the grid on the y-axis.</ td >
</ tr >
< tr >
< td > yValueLabel</ td >
< td > function</ td >
< td > none</ td >
< td > A function for custom formatting of the labels along the y-axis,
for example < code > function (y) {return (y * 100) + '%'}</ code > .
</ td >
</ tr >
< tr >
< td > zMin</ td >
< td > number</ td >
< td > none</ td >
< td > The minimum value for the z-axis.</ td >
</ tr >
< tr >
< td > zMax</ td >
< td > number</ td >
< td > none</ td >
< td > The maximum value for the z-axis.</ td >
</ tr >
< tr >
< td > zStep</ td >
< td > number</ td >
< td > none</ td >
< td > Step size for the grid on the z-axis.</ td >
</ tr >
< tr >
< td > zValueLabel</ td >
< td > function</ td >
< td > none</ td >
< td > A function for custom formatting of the labels along the z-axis,
for example < code > function (z) {return (z * 100) + '%'}</ code > .
</ td >
</ tr >
< tr >
< td > xLabel</ td >
< td > String</ td >
< td > x</ td >
< td > Label on the X axis.</ td >
</ tr >
< tr >
< td > yLabel</ td >
< td > String</ td >
< td > y</ td >
< td > Label on the Y axis.</ td >
</ tr >
< tr >
< td > zLabel</ td >
< td > String</ td >
< td > z</ td >
< td > Label on the Z axis.</ td >
</ tr >
< tr >
< td > filterLabel</ td >
< td > String</ td >
< td > time</ td >
< td > Label for the filter column.</ td >
</ tr >
< tr >
< td > legendLabel</ td >
< td > String</ td >
< td > value</ td >
< td > Label for the style description.</ td >
</ tr >
</ table >
< h2 id = "Methods" > Methods</ h2 >
< p >
Graph3d supports the following methods.
</ p >
< table class = "methods" >
< tr >
< th > Method</ th >
< th > Return Type</ th >
< th > Description</ th >
</ tr >
< tr >
< td > animationStart()</ td >
< td > none</ td >
< td > Start playing the animation.
Only applicable when animation data is available.</ td >
</ tr >
< tr >
< td > animationStop()</ td >
< td > none</ td >
< td > Stop playing the animation.
Only applicable when animation data is available.</ td >
</ tr >
< tr >
< td > getCameraPosition()</ td >
< td > An object with parameters < code > horizontal</ code > ,
< code > vertical</ code > and < code > distance</ code ></ td >
< td > Returns an object with parameters < code > horizontal</ code > ,
< code > vertical</ code > and < code > distance</ code > ,
which each one of them is a number, representing the rotation and position
of the camera.</ td >
</ tr >
< tr >
< td > redraw()</ td >
< td > none</ td >
< td > Redraw the graph. Useful after the camera position is changed externally,
when data is changed, or when the layout of the webpage changed.</ td >
</ 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 >
< td > setSize(width, height)</ td >
< td > none</ td >
< td > Parameters < code > width</ code > and < code > height</ code > are strings,
containing a new size for the graph. Size can be provided in pixels
or in percentages.</ td >
</ tr >
< tr >
< td > setCameraPosition (pos)</ td >
< td > {horizontal: 1.0, vertical: 0.5, distance: 1.7}</ td >
< td > Set the rotation and position of the camera. Parameter < code > pos</ code >
is an object which contains three parameters: < code > horizontal</ code > ,
< code > vertical</ code > , and < code > distance</ code > .
Parameter < code > horizontal</ code > is a value in radians and can have any
value (but normally in the range of 0 and 2*Pi).
Parameter < code > vertical</ code > is a value in radians between 0 and 0.5*Pi.
Parameter < code > distance</ code > is the (normalized) distance from the
camera to the center of the graph, in the range of 0.71 to 5.0. A
larger distance puts the graph further away, making it smaller.
All parameters are optional.
</ td >
</ tr >
</ table >
< h2 id = "Events" > Events</ h2 >
< p >
Graph3d fires events after the camera position has been changed.
The event can be catched by creating a listener.
Here an example on how to catch a < code > cameraPositionChange</ code > event.
</ p >
< pre class = "prettyprint lang-js" >
function onCameraPositionChange(event) {
alert('The camera position changed to:\n' +
'Horizontal: ' + event.horizontal + '\n' +
'Vertical: ' + event.vertical + '\n' +
'Distance: ' + event.distance);
}
// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
graph3d.on('cameraPositionChange', onCameraPositionChange);
</ pre >
< p >
The following events are available.
</ p >
< table class = "events" >
< tr >
< th > name</ th >
< th > Properties</ th >
< th > Description</ th >
</ tr >
< tr >
< td > cameraPositionChange</ td >
< td >
< ul >
< li >< code > horizontal</ code > : Number. The horizontal angle of the camera.</ li >
< li >< code > vertical</ code > : Number. The vertical angle of the camera.</ li >
< li >< code > distance</ code > : Number. The distance of the camera to the center of the graph.</ li >
</ ul >
</ td >
< td > The camera position changed. Fired after the user modified the camera position
by moving (dragging) the graph, or by zooming (scrolling),
but not after a call to < code > setCameraPosition</ code > method.
The new camera position can be retrieved by calling the method
< code > getCameraPosition</ code > .</ td >
</ tr >
</ table >
< h2 id = "Data_Policy" > Data Policy</ h2 >
< p >
All code and data are processed and rendered in the browser. No data is sent to any server.
</ p >
</ div >
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
< script src = "../js/jquery.min.js" ></ script >
< script src = "../js/bootstrap.min.js" ></ script >
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
< script src = "../js/ie10-viewport-bug-workaround.js" ></ script >
<!-- jquery extensions -->
< script src = "../js/jquery.highlight.js" ></ script >
< script src = "../js/jquery.url.min.js" ></ script >
<!-- Tipue vendor js -->
< script src = "../js/tipuesearch.config.js" ></ script >
< script src = "../js/tipuesearch.js" ></ script >
<!-- controller -->
< script src = "../js/main.js" ></ script >
