Transcript Graphit.odp
Release Engineering
Graph It Tool
Purpose
●
Provide “living documents”
●
Usable Anywhere*
●
No Programming Required™
●
●
●
●
●
●
Behind the Scenes
What does that HTML snippet do?
jazzweb.ratl.swg.usma.ibm.com
<html
code>
jazzweb.beaverton.ibm.com
graph.js
This file is suppose to
be loaded remotely.
This file is
suppose to
be loaded
remotely.
jQuery
CSV
constellation.beaverton.ibm.co
m
Google
Chart API
Behind the Scenes
What does that HTML snippet do?
jazzweb.ratl.swg.usma.ibm.com
<html
code>
jazzweb.beaverton.ibm.com
graph.js
This file is suppose to
be loaded remotely.
This file is
suppose to
be loaded
remotely.
jQuery
CSV
constellation.beaverton.ibm.co
m
Google
Chart API
Behind the Scenes
What does that HTML snippet do?
jazzweb.ratl.swg.usma.ibm.com
<html
code>
jazzweb.ratl.swg.usma.ibm.com
graph.js
jQuery
CSV
jazzweb.ratl.swg.usma.ibm.co
m
Google
Chart API
Technical Description of Problem
●
We need to send an extra header from the server
when delivering these files.
Access-Control-Allow-Origin: *
●
●
This does not allow unauthorized access to the server.
–
You still need to authenticate to get the data.
●
Javascript will now be able to dynamically request it.
●
http://enable-cors.org/
●
●
graph-it.js
graph.js
●
The chart builder
●
Solely chart displayer
●
Does a few features
●
Reduced feature set
–
●
When UI changes pull
in all settings and
redraw graph
–
Load CSV, parse and
generate HTML table
–
Graph
–
Export HTML
–
Load required libs
–
Load CSV and parse
–
Graph
<div id="dashboard-k3vy1z48r6hia4i">
<div id="graph-k3vy1z48r6hia4i"></div>
<div id="control-k3vy1z48r6hia4i" style="width:850px;
height:50px"></div>
</div>
<script src="//jazzweb.../rtc/graph-it/js/graph.js"></script>
<script>graph.it({
"xaxis":1,
"xTitle":"Date",
"isDate":true,
"showControls":true,
"yaxis":[5],
"yTitle":"Used Space in GB",
"title":"",
"width":850,
"height":300,
"type":"LineChart",
"colors":[],
"url":"//jazzweb/disk_usage/data/df.empire",
"id":"k3vy1z48r6hia4i"
})</script>